塊級元素和行內元素的區別,常見的塊級元素和行內元素有哪些


一般來說,html的元素分為兩種,即塊級元素和行內元素。

 

塊級元素:塊狀元素排斥其他元素與其位於同一行,可以設定元素的寬(width)和高(height),塊級元素一般是其他元素的容器,可容納塊級元素和行內元素。

行內元素:行內元素不可以設置寬(width)和高(height),但可以與其他行內元素位於同一行,行內元素內一般不可以包含塊級元素。行內元素的高度一般由元素內部的字體大小決定,寬度由內容的長度控制。

 

常見塊級元素有:h1,h2,h3,h4,h5,h6,p,div,dl,dt,hr,ol,ul,li,form,pre,table,td,th;

常見內聯元素有:em,strong,span,button,input,label,code,select,img,textarea

 

兩者之間的區別:

區別:
1.塊級元素占據一整行,內聯元素的寬度是其元素內容的寬度,多個內聯元素排列會放在同一行里除非放不下,才會擠到新的一行
2.塊級元素可以設置寬度width和高度height,而內聯元素設置widht和height是無效的
3.塊級元素可以包含塊級元素和內聯元素,而內聯元素只能包含文本
4.塊級元素可以設置margin和padding屬性,行內元素只有margin-left、margin-right、padding-left、padding-right起作用

 

比如:我們可以給div和p元素應用以下的樣式,但是span標簽不能應用下面的樣式。

.test{
 width:100px;
 height:100px;
 }

 

當然我們還可以通過樣式display屬性來改變元素的顯示方式。當display的值設為block時,元素將以塊級方式呈現;當display值設為inline時,元素將以行內形式呈現。所以我們可以給span標簽應用以下樣式:

.test{
 width:100px;
 height:100px;
 display:block;
 }

  


免責聲明!

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



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