義元素內部和外部的顯示類型。
·外部顯示類型display-outside:生成一個內聯元素盒,該元素之前或者之后并不會產生換行。在流式布局中,如果有空間,下一個元素將會在同一行上。塊級盒子可以修改寬度和高度。內邊距(padding),外邊距(margin)和邊框(border)會將其他元素從當前盒子周圍"推開"。內聯盒子不會產生換行,設置寬度和高度無效。
·內部顯示類型默認流式布局:將成為一個自包含的獨立塊級格式化上下文,使得該元素的內部布局不受外部元素的影響。將元素呈現為表格形式的布局,同時具備內聯元素和塊級元素的特點,即可以設置寬高,又可以在同一行顯示。同display:inline flow-root;外部顯示為inline,內部布局為table;外部顯示為inline,內部布局為fLex;外部顯示為inline,內部布局為grid。同display:inline table;同display:inline flex;同display:inline grid。元素不顯示,不占據空間。
迎關注!
display是css布局中一個重要的屬性,它可以設置html標簽的顯示方式。常見的取值有以下幾個:
設置元素顯示方式為塊級元素顯示,顯示方式為塊級元素的標簽,默認寬度為父元素寬度,同時寬度和高度都是可以手動設置的,相鄰的塊級元素是換行顯示的。
一些標簽的默認顯示方式就是block,不需要設置display:block也具有塊級元素的以上特性,它們是:div,p,h1~h6,ul,form等。
設置元素顯示方式為內聯元素顯示,顯示方式為內聯元素的標簽,默認寬度為內容寬度,寬度和高度是不可設置的,相鄰的內聯元素是不換行顯示的(但同一元素內的文本是可以換行的)。
一些標簽的默認顯示方式為inline,不需要設置display:inline也具有內聯元素的以上特性,它們是:span,label,a,cite,em等。
設置元素的顯示方式為行內塊元素,設置了該顯示方式的元素同時具有inline和block元素的優質特性,默認寬度為內容寬度,但是寬度和高度都是可以設置的,元素同行顯示,整塊換行。
默認為inline-block顯示的元素有input、textarea、select、button等。
設置元素不顯示。
display:none與visibility:hidden的區別是display:none不顯示且不占位(直接移除了該元素),但visibility:hidden不顯示但占位(只是隱藏了)。
display屬性是用來設置元素的顯示方式的,在布局中具有重要意義。值得注意的是,無論什么元素都是可以通過設置display屬性來修改其顯示方式的,所以元素的顯示方式不是一成不變的,可以為了布局的需要而進行更改。以上四個只是display較為常見的取值,還有一些較少用到的取值可以參考下圖的解釋:
display的取值及描述
display的取值及描述
收藏轉發請先關注,謝謝支持!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。