css span 右端对齐_CSS标准文档流
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)題。
- 上一篇: 正确使用信用卡,保护自己的个人财产安全
- 下一篇: 平安普惠信息服务有限公司是干嘛的