php網(wǎng)頁(yè)的布局是什么意思

這篇文章主要為大家展示了“php網(wǎng)頁(yè)的布局是什么意思”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“php網(wǎng)頁(yè)的布局是什么意思”這篇文章吧。

　　一。 網(wǎng)頁(yè)的布局方式

　　1.什么是網(wǎng)頁(yè)的布局方式？

　　網(wǎng)頁(yè)的布局方式其實(shí)就是指瀏覽器是如何對(duì)網(wǎng)頁(yè)中的元素進(jìn)行排版的;分為：標(biāo)準(zhǔn)流，浮動(dòng)流，定位流

　　1.標(biāo)準(zhǔn)流（文檔流/普通流）排版方式

　　1.1其實(shí)瀏覽器默認(rèn)的排版方式就是標(biāo)準(zhǔn)流的排版方式

　　1.2在CSS中將元素分為三類， 分別是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素

　　1.3 在標(biāo)準(zhǔn)流中有兩種排版方式， 一種是垂直排版， 一種是水平排版

　　垂直排版， 如果元素是塊級(jí)元素， 那么就會(huì)垂直排版

　　水平排版， 如果元素是行內(nèi)元素/行內(nèi)塊級(jí)元素， 那么就會(huì)水平排版

　　2.浮動(dòng)流排版方式

　　2.1浮動(dòng)流是一種"半脫離標(biāo)準(zhǔn)流"的排版方式

　　2.2浮動(dòng)流只有一種排版方式， 就是水平排版。 它只能設(shè)置某個(gè)元素相對(duì)于父元素左對(duì)齊或者右對(duì)齊

　　注意點(diǎn)：

　　1.浮動(dòng)流中沒(méi)有居中對(duì)齊， 也就是沒(méi)有center這個(gè)取值

　　2.在浮動(dòng)流中是不可以使用margin: 0 auto;（是無(wú)效的）

　　特點(diǎn)：

　　1.在浮動(dòng)流中是不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素的

　　無(wú)論是級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素都可以水平排版

　　2.在浮動(dòng)流中無(wú)論是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素都可以設(shè)置寬高

　　3.綜上所述， 浮動(dòng)流中的元素和標(biāo)準(zhǔn)流中的行內(nèi)塊級(jí)元素很像

　　3.定位流排版方式

　　二。 浮動(dòng)元素的脫標(biāo)

　　1.什么是浮動(dòng)元素的脫標(biāo)？

　　脫標(biāo)： 脫離標(biāo)準(zhǔn)流

　　當(dāng)某一個(gè)元素浮動(dòng)之后， 那么這個(gè)元素看上去就像被從標(biāo)準(zhǔn)流中刪除了一樣， 這個(gè)就是浮動(dòng)元素的脫標(biāo);

　　2.浮動(dòng)元素脫標(biāo)之后會(huì)有什么影響？

　　如果前面一個(gè)元素浮動(dòng)了， 而后面一個(gè)元素沒(méi)有浮動(dòng) , 那么這個(gè)時(shí)候前面一個(gè)元就會(huì)蓋住后面一個(gè)元素;

　　三。 浮動(dòng)元素排序規(guī)則

　　浮動(dòng)元素排序規(guī)則 :

　　1相同方向上的浮動(dòng)元素， 先浮動(dòng)的元素會(huì)顯示在前面， 后浮動(dòng)的元素會(huì)顯示在后面

　　2不同方向上的浮動(dòng)元素， 左浮動(dòng)會(huì)找左浮動(dòng)， 右浮動(dòng)會(huì)找右浮動(dòng)

　　3浮動(dòng)元素浮動(dòng)之后的位置， 由浮動(dòng)元素浮動(dòng)之前在標(biāo)準(zhǔn)流中的位置來(lái)確定（如果元素浮動(dòng)前在標(biāo)準(zhǔn)流中的第一行，那么它浮動(dòng)后就在第一行顯示，如果浮動(dòng)前在標(biāo)準(zhǔn)流中的第二行，浮動(dòng)后就在第二行顯示）

　　四。 浮動(dòng)元素貼靠現(xiàn)象

　　什么是浮動(dòng)元素貼靠現(xiàn)象？

　　1.如果父元素的寬度能夠顯示所有浮動(dòng)元素， 那么浮動(dòng)的元素會(huì)并排顯示

　　2.如果父元素的寬度不能顯示所有浮動(dòng)元素， 那么會(huì)從最后一個(gè)元開(kāi)始往前貼靠

　　3.如果貼靠了前面所有浮動(dòng)元素之后都不能顯示， 最終會(huì)貼靠到父元素的左邊或者右邊

以上是“php網(wǎng)頁(yè)的布局是什么意思”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！