css display屬性辨析

2021-07-26 03:05:32 字數 1214 閱讀 7735

經常看到這樣的屬性,

block、inline

也用的比較多,但是什麼讓它們產生的差異,並沒有深究過,inline-block

不太明白怎麼回事,今天做乙個小結。

block、inline就不多說,乙個塊兒級,乙個行級,inline-block則是對外表現是行級,包含的元素則表現塊兒級屬性。具體看下邊解釋以及樣例。

1display:block

塊兒級物件,預設寬度是100%,如果沒有採用『float:left|right』樣式,相鄰的兩塊兒物件就會分排在不同的兩行上。

例子:

結果:

2、display:inline

內聯物件的寬度取決於其內部元素的寬度與padding樣式之和。不可直接指定其寬度與高度(示例**中可以看出來即使設定了,也沒有用)。相鄰的兩個內聯物件會排在同一行上。

例子:

結果:

3、inline-block

應用此特性的元素呈現為內聯物件,周圍元素保持在同一行,但可以設定寬度和高度地塊元素的屬性

例子:

結果:

(div 塊兒物件;span 內聯物件)

css display屬性詳解

css display屬性用於指定在頁面上使用哪種盒模型來渲染指定的元素。通俗來講就是某個元素在頁面中的顯示方式 inline table,table,table row group,table column,table column group,table header group,table f...

Css display的幾個屬性

塊級元素 block 特性 總是獨佔一行,表現為另起一行開始,而且其後的元素也必須另起一行顯示 寬度 width 高度 height 內邊距 padding 和外邊距 margin 都可控制 內聯元素 inline 特性 和相鄰的內聯元素在同一行 寬度 width 高度 height 內邊距的top...

前端 CSS display常見屬性

此元素不會被顯示。隱藏該區域,不佔實際空間。但對後台來說真實存在,可以獲取被隱藏的元素。visibility hidden 將元素隱藏,但是在網頁中該佔的位置還是佔著。網頁佔位 display none 將元素的顯示設為無,即在網頁中不佔任何的位置。網頁不佔位 flex是一種彈性布局屬性。注意,設f...