行內元素與塊級元素的特點與不同

2021-10-07 03:53:49 字數 981 閱讀 1500

在學習css的各項屬性值之前,我希望大家能先理解清楚行內元素與塊級元素的特點與不同點,這對網頁的布局真的十分重要,在我沒有理解之前對網頁布局的認識就十分模糊

大家可以將html網頁看做是多分割組成的網頁,每個分割都是多行組成的,事實上很多元素看起來不再同一水平線上但都在同一行

行內元素顧名思義就是處在一行內的元素,這樣的元素不會自己乙個人佔滿一行,而是和其他行內元素一起分享一行

如span標籤,這些元素可以存在於同一行,並且只有當一行充滿時才會折行,這些元素無法設定寬高,他們的寬高由文字內容大小自適應,並且上下內外邊距的設定對他們也無效(當他們單獨存在一行時可以)

塊級元素和行內元素不同,無論設定寬高與否他都會獨佔一行,如div,ul,塊級元素可以設定上下內外邊距

行內塊級元素具有行內元素和塊級元素的特性如img標籤和imput標籤,他和行內元素一樣,分享一行,在行末折行,並且與塊級元素一樣可以設定寬高和上下內外邊距

其實行內與塊級元素都可以通過css進行設定

屬性:display

屬性值:block(塊級) block-inline(行內塊級) inline(行內)

這是span標籤

這是div

這是span

塊級元素與行內元素特點

塊級元素 1 塊級元素會獨佔一行,其寬度自動填滿其父元素寬度 2 塊級元素可以設定 width,height屬性。注意 塊級元素即使設定了寬度,仍然是獨佔一行的 3 塊級元素可以設定margin 和 padding。行級元素 1 行內元素不會獨佔一行,相鄰的行內元素會排列在同一行裡,知道一行排不下,...

行內元素與塊級元素

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

塊級元素與行內元素

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