本篇文章給大家分享的是有關(guān) 什么是網(wǎng)頁的布局方式與浮動，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),旬陽企業(yè)網(wǎng)站建設(shè),旬陽品牌網(wǎng)站建設(shè),網(wǎng)站定制,旬陽網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,旬陽網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

一. 網(wǎng)頁的布局方式

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

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

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

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

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

1.3 在標(biāo)準(zhǔn)流中有兩種排版方式, 一種是垂直排版, 一種是水平排版
垂直排版, 如果元素是塊級元素, 那么就會垂直排版
水平排版, 如果元素是行內(nèi)元素/行內(nèi)塊級元素, 那么就會水平排版

2.浮動流排版方式

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

2.2浮動流只有一種排版方式, 就是水平排版. 它只能設(shè)置某個元素相對于父元素左對齊或者右對齊

注意點:

1.浮動流中沒有居中對齊, 也就是沒有center這個取值
2.在浮動流中是不可以使用margin: 0 auto;(是無效的)

特點:

1.在浮動流中是不區(qū)分塊級元素/行內(nèi)元素/行內(nèi)塊級元素的
無論是級元素/行內(nèi)元素/行內(nèi)塊級元素都可以水平排版
2.在浮動流中無論是塊級元素/行內(nèi)元素/行內(nèi)塊級元素都可以設(shè)置寬高
3.綜上所述, 浮動流中的元素和標(biāo)準(zhǔn)流中的行內(nèi)塊級元素很像

3.定位流排版方式

二. 浮動元素的脫標(biāo)

1.什么是浮動元素的脫標(biāo)?

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

2.浮動元素脫標(biāo)之后會有什么影響?

如果前面一個元素浮動了, 而后面一個元素沒有浮動 , 那么這個時候前面一個元就會蓋住后面一個元素;

三. 浮動元素排序規(guī)則

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

1相同方向上的浮動元素, 先浮動的元素會顯示在前面, 后浮動的元素會顯示在后面

2不同方向上的浮動元素, 左浮動會找左浮動, 右浮動會找右浮動

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

四. 浮動元素貼靠現(xiàn)象

什么是浮動元素貼靠現(xiàn)象?

1.如果父元素的寬度能夠顯示所有浮動元素, 那么浮動的元素會并排顯示
2.如果父元素的寬度不能顯示所有浮動元素, 那么會從最后一個元開始往前貼靠
3.如果貼靠了前面所有浮動元素之后都不能顯示, 最終會貼靠到父元素的左邊或者右邊

五. 浮動元素的字圍現(xiàn)象

什么是浮動元素字圍現(xiàn)象?
浮動元素不會擋住沒有浮動元素中的文字, 沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現(xiàn)象;一般用作圖文混排!

浮動元素字圍現(xiàn)象

六. 企業(yè)開發(fā)中什么時候使用標(biāo)準(zhǔn)流什么時候使用浮動流?

1.企業(yè)開發(fā)中什么時候使用標(biāo)準(zhǔn)流什么時候使用浮動流?
垂直方向使用標(biāo)準(zhǔn)流, 水平方向使用浮動流

2.拿到一個很復(fù)雜的界面如何入手?

2.1從上至下布局

2.2從外向內(nèi)布局

2.3水平方向可以先劃分為一左一右再對左邊或者右邊進(jìn)行進(jìn)一步布局

七. 浮動元素高度問題

1.在標(biāo)準(zhǔn)流中內(nèi)容的高度可以撐起父元素的高度

2.在浮動流中浮動的元素是不可以撐起父元素的高度的! (父元素沒有浮動,只有子元素浮動)

以上就是 什么是網(wǎng)頁的布局方式與浮動，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁名稱：什么是網(wǎng)頁的布局方式與浮動-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://weahome.cn/article/dcgids.html