CSS HTML元素佈局及Display屬性

　　本篇文章主要介紹HTML的內聯元素、塊級元素的分類與佈局，以及dispaly屬性對佈局的影響。

目錄

1. HTML 元素分類：介紹內聯元素、塊級元素的分類。

2. HTML 元素佈局：介紹內聯元素、塊級元素的佈局。

3. CSS display屬性：介紹此屬性對佈局的影響。

 

1. HTML元素分類

HTML元素大題可分爲內聯(inline)元素和塊(block)元素。

1.1 內聯元素(inline)

①元素顯示方式："文本方式"，1個挨着1個，不獨自佔有1行；

②內嵌的元素也必須是內聯元素：如<a></a>,不能在裏面嵌入<div></div>等塊級元素；

③包含的標籤有：<a>、<input>、<label>、<img> 等等；

 

1.2 塊元素(block)

①元素顯示方式：每一個元素獨自佔有1行，至關於先後都帶有換行符；

②內嵌的元素能夠是內聯或塊級元素；

③包含的元素有：<h1>~<h6>、<div>、<hr>等等；

 

2. HTML 元素佈局展現

2.1 默認展現(未添加width和height屬性)

①HTML元素在瀏覽器展現的方式是：從上到下，從左到右。

②內聯元素，是根據瀏覽器的寬度及自身的width寬度來填充。若當前行剩餘空白區域不夠，就會換至下一行。

③塊級元素，根據內聯元素的展現方式展現大概區域；當瀏覽器的寬度減小時，會自動擴充塊級元素的height屬性的值，以容納內嵌元素的展現。

2.1.1 展現頁面

 

2.2 增長了width屬性的展現

2.2.1 塊級元素(div)增長了width屬性

 

 

2.3 結論

①當塊級元素沒設置width屬性時，瀏覽器寬度的變動，會壓縮塊元素內嵌元素的排版。

②設置塊級元素的width屬性時，瀏覽器的width屬性值變動，不會影響到塊級元素裏的內嵌元素的佈局，他們(內嵌元素)受父級塊級元素的影響。

　　　　適用範圍：導航條(導航條裏有多個a標籤，可放在一個div裏，並給div附加width屬性；以避免瀏覽器縮小，形成導航排版亂掉)；

 

3.CSS display屬性  

3.1 主要的值

1) none ：此元素不被顯示；
2) block ：此元素按塊級元素顯示：先後帶換行符，本身佔一行。內聯元素 → 塊元素
3) inline ：此元素按內聯元素顯示：1個挨着1個。塊元素 → 內聯元素

3.2 display:block 演示

input3 設爲了display:block

 

3.3 display:inline

div 設爲了display:inline

 

End

Web開發之路系列文章

菜單加載中...