1. 程式人生 > >塊元素和行內元素

塊元素和行內元素

基本 pad 如果 空白 isp splay height input nbsp

在HTML中所有的元素一般分為塊元素和行內元素

1.塊元素

塊元素最重要的特性就是獨占一行,裏面可以裝其他的元素,可以設寬和高,就想是個盒子一樣。

塊元素:div(最典型的塊元素),h1-h6,p,ol,ul,table,hr ,form,dl 。塊元素幾乎都是雙標記,也有另外如hr它就是單標記。

一個塊元素和另一個塊元素之間默認有一段空白如果想清空默認的空白可以將margin:0;padding:0;就可以清空空白了;

盒子居中將margin:0px auto;盒子就可以居中了(要有寬和高)。

2.行內元素

行內元素最重要的特性就是不獨占一行,不可以設寬和高(它的寬和高就是裏面內容的寬和高)。

行內元素:span(最典型的行內元素),a,br,em ,img,font,input,label。行內元素有單標記也有雙標記,但是不是所有的行內元素沒有都寬和高,如:img,input。

3.元素轉換

元素轉換就是修改元素的display屬性,如果把display改為inline它就會變成行內元素,改為block就會變成行內元素,這是兩個基本的也有特別的如何把display改為inline-block它就會變成行內塊元素,它不但有

行內不獨占一行的特性還有塊元素可以設寬和高的特性。如果把display改為none它就會在頁面上消失,看不見也不占空間。

塊元素和行內元素