前端面試 行內元素與塊級元素

2021-08-08 23:38:52 字數 1068 閱讀 8318

判斷行內元素和塊級元素的快捷方法就是判斷是否能並列。

塊級元素

行內元素

(1)塊級元素會獨佔一行,其寬度自動填滿其父元素寬度;

行內元素不會獨佔一行,相鄰的行內元素會排列在同一行,直至一行排不下才會換行,其寬度隨元素的內容而變化。

(2)塊級元素可以包含行內元素和塊級元素;行內元素不能包含塊級元素。

(3)行內元素設定width、height、margin-top、margin-bottom、padding-top、padding-bottom無效。所以img 和 input 在嚴格意義上稱之為行內塊元素。因為這兩個標籤可以設定寬高屬性。

display:inline-block;

display:inline;

display:block;

筆試遇到的一道題,當時沒有答對。

1.指出span1 與 div1 的寬度

答案:span是 0*0

2.設定子元素margin-left:20px之後呢?

答案如下:

為什麼span會有了21的高度呢?我也不知道啊很奇怪啊~~~

3.設定子元素padding-left:30px之後呢?

顯然對div沒有影響,而span則有了寬度30~

行內元素 塊級元素和行內塊級元素

而標籤的屬性是可以轉換的 display inline 轉換為行內元素 display linline block 轉換為行內塊元素 display block 轉換為塊級元素。行內元素 無法設定寬高 margin和padding上下無效,只有左右有效果 總是和相鄰的行內元素在同一行上,預設排列方式...

行內元素與塊級元素

1.行內元素與塊級元素直觀上的區別 行內元素會在一條直線上排列,都是同一行的,水平方向排列 塊級元素各佔據一行,垂直方向排列。塊級元素從新行開始結束接著乙個斷行。2.塊級元素可以包含行內元素和塊級元素。行內元素不能包含塊級元素。3.行內元素與塊級元素屬性的不同,主要是盒模型屬性上 行內元素設定wid...

塊級元素與行內元素

用法 塊級元素只能用於標籤中 塊級元素與行內元素 塊級元素與行內元素的幾個區別 格式 在預設情況下,塊級元素會從新起一行 內容模型 塊級元素可以包含其他的塊級元素和行內元素,這種模型會比行內元素有著更加大的結構 塊級元素列表 1.資訊 2.塊引用 3.定義列表中的條目描述 4.文件分割槽 5.定義列...