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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM