一般來說,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; }