14-塊級元素和行內元素

學習的初期，咱們就要知道，標準文檔流等級森嚴。標籤分爲兩種等級：

• 行內元素
• 塊級元素

好比h1標籤和span，同時設置寬高，來看瀏覽器效果，那麼你會發現：

 

行內元素和塊級元素的區別：（很是重要）

行內元素：

• 與其餘行內元素並排；
• 不能設置寬、高。默認的寬度，就是文字的寬度。

塊級元素：

• 霸佔一行，不能與其餘任何元素並列；
• 能接受寬、高。若是不設置寬度，那麼寬度將默認變爲父親的100%。

塊級元素和行內元素的分類：

在之前的HTML知識中，咱們已經將標籤分過類，當時分爲了：文本級、容器級。

從HTML的角度來說，標籤分爲：

• 文本級標籤：p、span、a、b、i、u、em。
• 容器級標籤：div、h系列、li、dt、dd。

　　PS：爲甚麼說p是文本級標籤呢？由於p裏面只能放文字&圖片&表單元素，p裏面不能放h和ul，p裏面也不能放p。

 

如今，從CSS的角度講，CSS的分類和上面的很像，就p不同：

• 行內元素：除了p以外，全部的文本級標籤，都是行內元素。p是個文本級，可是是個塊級元素。

• 塊級元素：全部的容器級標籤都是塊級元素，還有p標籤。

塊級元素和行內元素的相互轉換

咱們能夠經過display屬性將塊級元素和行內元素進行相互轉換。display即「顯示模式」。

塊級元素能夠轉換爲行內元素：

一旦，給一個塊級元素（好比div）設置：

display: inline;

那麼，這個標籤將當即變爲行內元素，此時它和一個span無異。inline就是「行內」。也就是說：

• 此時這個div不能設置寬度、高度；
• 此時這個div能夠和別人並排了

行內元素轉換爲塊級元素：

一樣的道理，一旦給一個行內元素（好比span）設置：

display: block;

那麼，這個標籤將當即變爲塊級元素，此時它和一個div無異。block」是「塊」的意思。也就是說：

• 此時這個span可以設置寬度、高度
• 此時這個span必須霸佔一行了，別人沒法和他並排
• 若是不設置寬度，將撐滿父親

 

 

 

標準流裏面的限制很是多，致使不少頁面效果沒法實現。若是咱們如今就要並排、而且就要設置寬高，那該怎麼辦呢？辦法是：移民！脫離標準流！

css中一共有三種手段，使一個元素脫離標準文檔流：

• （1）浮動
• （2）絕對定位
• （3）固定定位