學(xué)習(xí)的初期，我們就要知道，標(biāo)準(zhǔn)文檔流等級(jí)森嚴(yán)。標(biāo)簽分為兩種等級(jí)：

• 行內(nèi)元素
• 塊級(jí)元素

比如h1標(biāo)簽和span，同時(shí)設(shè)置寬高，來看瀏覽器效果，那么你會(huì)發(fā)現(xiàn)：

?

行內(nèi)元素和塊級(jí)元素的區(qū)別：（非常重要）

行內(nèi)元素：

• 與其他行內(nèi)元素并排；
• 不能設(shè)置寬、高。默認(rèn)的寬度，就是文字的寬度。

塊級(jí)元素：

• 霸占一行，不能與其他任何元素并列；
• 能接受寬、高。如果不設(shè)置寬度，那么寬度將默認(rèn)變?yōu)楦赣H的100%。

塊級(jí)元素和行內(nèi)元素的分類：

在以前的HTML知識(shí)中，我們已經(jīng)將標(biāo)簽分過類，當(dāng)時(shí)分為了：文本級(jí)、容器級(jí)。

從HTML的角度來講，標(biāo)簽分為：

• 文本級(jí)標(biāo)簽：p、span、a、b、i、u、em。
• 容器級(jí)標(biāo)簽：div、h系列、li、dt、dd。

　　PS：為甚么說p是文本級(jí)標(biāo)簽?zāi)?#xff1f;因?yàn)閜里面只能放文字&圖片&表單元素，p里面不能放h和ul，p里面也不能放p。

?

現(xiàn)在，從CSS的角度講，CSS的分類和上面的很像，就p不一樣：

• 行內(nèi)元素：除了p之外，所有的文本級(jí)標(biāo)簽，都是行內(nèi)元素。p是個(gè)文本級(jí)，但是是個(gè)塊級(jí)元素。

• 塊級(jí)元素：所有的容器級(jí)標(biāo)簽都是塊級(jí)元素，還有p標(biāo)簽。

塊級(jí)元素和行內(nèi)元素的相互轉(zhuǎn)換

我們可以通過display屬性將塊級(jí)元素和行內(nèi)元素進(jìn)行相互轉(zhuǎn)換。display即“顯示模式”。

塊級(jí)元素可以轉(zhuǎn)換為行內(nèi)元素：

一旦，給一個(gè)塊級(jí)元素（比如div）設(shè)置：

display: inline;

那么，這個(gè)標(biāo)簽將立即變?yōu)樾袃?nèi)元素，此時(shí)它和一個(gè)span無異。inline就是“行內(nèi)”。也就是說：

• 此時(shí)這個(gè)div不能設(shè)置寬度、高度；
• 此時(shí)這個(gè)div可以和別人并排了

行內(nèi)元素轉(zhuǎn)換為塊級(jí)元素：

同樣的道理，一旦給一個(gè)行內(nèi)元素（比如span）設(shè)置：

display: block;

那么，這個(gè)標(biāo)簽將立即變?yōu)閴K級(jí)元素，此時(shí)它和一個(gè)div無異。block”是“塊”的意思。也就是說：

• 此時(shí)這個(gè)span能夠設(shè)置寬度、高度
• 此時(shí)這個(gè)span必須霸占一行了，別人無法和他并排
• 如果不設(shè)置寬度，將撐滿父親

?

?

?

標(biāo)準(zhǔn)流里面的限制非常多，導(dǎo)致很多頁面效果無法實(shí)現(xiàn)。如果我們現(xiàn)在就要并排、并且就要設(shè)置寬高，那該怎么辦呢？辦法是：移民！脫離標(biāo)準(zhǔn)流！

css中一共有三種手段，使一個(gè)元素脫離標(biāo)準(zhǔn)文檔流：

• （1）浮動(dòng)
• （2）絕對(duì)定位
• （3）固定定位

轉(zhuǎn)載于:https://www.cnblogs.com/mayugang/p/10303588.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的22 块级元素和行内元素的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。