web頁(yè)面的制作，是個(gè)“流”，像水流一樣，必須從上往下，一點(diǎn)點(diǎn)的編織，不像畫畫，可以這個(gè)地方畫一個(gè)，另一個(gè)地方畫一個(gè)，隨意而為。

標(biāo)準(zhǔn)文檔流的一些微觀現(xiàn)象

1. 空白折疊現(xiàn)象

1)標(biāo)簽與標(biāo)簽之間緊密連接，網(wǎng)頁(yè)上兩個(gè)內(nèi)容也是緊密連接，中間沒(méi)有空格。

2)標(biāo)簽與標(biāo)簽之間中間有一個(gè)空格，網(wǎng)頁(yè)上兩個(gè)內(nèi)容之間也有一個(gè)空格的間隙。

3)標(biāo)簽與標(biāo)簽之間有一個(gè)以上的空格(n>1)，網(wǎng)頁(yè)上兩個(gè)內(nèi)容之間也只有一個(gè)空格。

通過(guò)第3)個(gè)現(xiàn)象可知，多出的空格折疊了，這就是所謂的空白折疊現(xiàn)象。

2. 高矮不齊，底邊對(duì)齊

網(wǎng)頁(yè)上的兩個(gè)不同的內(nèi)容出現(xiàn)高低不同時(shí)，底邊對(duì)齊。如圖：

3. 自動(dòng)換行

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

在HTML中，我們已經(jīng)將標(biāo)簽分為了：文本級(jí)、容器級(jí)。文本級(jí)：p、span、a、b、i、u、em；容器級(jí)：div、h系列、li、dt、dd。

CSS標(biāo)準(zhǔn)文檔流也將標(biāo)簽分為兩種等級(jí)：

1)塊級(jí)元素

霸占一行，不能與其他任何元素并列；

能接受寬、高；

如果不設(shè)置寬度，那么寬度將默認(rèn)變?yōu)楦赣H的100%。

2)行內(nèi)元素

與其他行內(nèi)元素并排；

不能設(shè)置寬、高。默認(rèn)的寬度，就是文字的寬度。

CSS的分類和HTML分類很像，就p不一樣：所有的文本級(jí)標(biāo)簽，都是行內(nèi)元素，除了p，p是個(gè)文本級(jí)，但是是個(gè)塊級(jí)元素；所有的容器級(jí)標(biāo)簽都是塊級(jí)元素。

總結(jié)如下圖：

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

1. 塊級(jí)元素可以設(shè)置為行內(nèi)元素

語(yǔ)法為：display:inline;

display是“顯示模式”的意思，用來(lái)改變?cè)氐男袃?nèi)、塊級(jí)性質(zhì)。inline就是“行內(nèi)”，一旦，給一個(gè)塊級(jí)元素設(shè)置display: inline; 那么，這個(gè)div將立即變?yōu)樾袃?nèi)元素。此時(shí)它和一個(gè)span無(wú)異， 此時(shí)這個(gè)div：不能設(shè)置寬度、高度；可以和別人并排了。

2. 行內(nèi)元素可以設(shè)置成塊級(jí)元素

語(yǔ)法為：display:block;

“block”是“塊”的意思。讓標(biāo)簽變?yōu)閴K級(jí)元素。此時(shí)這個(gè)標(biāo)簽，和一個(gè)div無(wú)異，此時(shí)這個(gè)span：能夠設(shè)置寬度、高度；必須霸占一行了，別人無(wú)法和他并排；如果不設(shè)置寬度，將撐滿父親。

標(biāo)準(zhǔn)流里面限制非常多，但是實(shí)際創(chuàng)建網(wǎng)頁(yè)時(shí)，我們要讓不同的塊級(jí)元素并排布局，這該如何實(shí)現(xiàn)呢？那就是“脫離標(biāo)準(zhǔn)流”，CSS中一共有三種手段使一個(gè)元素脫離標(biāo)準(zhǔn)流，明天我再跟大家分享。

學(xué)習(xí)相關(guān)推薦(編程必備輔助)：

①：關(guān)注公眾號(hào)“只會(huì)寫B(tài)UG”，分享更多干貨知識(shí)，資訊，教程等

②：海量編程類資料零基礎(chǔ)到高級(jí)亟待領(lǐng)取！！！

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

總結(jié)

以上是生活随笔為你收集整理的css span 右端对齐_CSS标准文档流的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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