2018-7-26 css13-網(wǎng)頁(yè)布局和浮動(dòng)流
時(shí)間：2023-09-07 00:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-07 00:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
2018-7-26 css13-網(wǎng)頁(yè)布局和浮動(dòng)流：
- 網(wǎng)頁(yè)布局：
- 標(biāo)準(zhǔn)流，浮動(dòng)流（float，不用顯示轉(zhuǎn)換就可以設(shè)置高寬），定位流
- 企業(yè)開(kāi)發(fā)中，垂直方向：標(biāo)準(zhǔn)流布局；水平方法：浮動(dòng)流布局
- 浮動(dòng)元素的脫標(biāo)--脫離標(biāo)準(zhǔn)流
- 浮動(dòng)元素排序規(guī)則-3個(gè)
- 浮動(dòng)元素貼靠現(xiàn)象-3種
- 浮動(dòng)元素字圍現(xiàn)象--圖文混排
- 浮動(dòng)元素高度，浮動(dòng)的元素是不可以撐起父元素的高度
轉(zhuǎn)自HTML+CSS - 文集 - 簡(jiǎn)書(shū)
自學(xué)請(qǐng)參考CSS 浮動(dòng)
【網(wǎng)頁(yè)布局】什么是網(wǎng)頁(yè)的布局方式?
網(wǎng)頁(yè)的布局方式其實(shí)就是指瀏覽器是如何對(duì)網(wǎng)頁(yè)中的元素進(jìn)行排版的
三種排版方式：
1.標(biāo)準(zhǔn)流(文檔流/普通流)排版方式
瀏覽器默認(rèn)的排版方式就是標(biāo)準(zhǔn)流的排版方式
在CSS中將元素分為三類, 分別是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
在標(biāo)準(zhǔn)流中有兩種排版方式, 一種是垂直排版, 一種是水平排版
- 垂直排版, 如果元素是塊級(jí)元素, 那么就會(huì)垂直排版
- 水平排版, 如果元素是行內(nèi)元素/行內(nèi)塊級(jí)元素, 那么就會(huì)水平排版
2.浮動(dòng)流排版方式
浮動(dòng)流是一種"半脫離標(biāo)準(zhǔn)流"的排版方式。因?yàn)?b>
浮動(dòng)元素浮動(dòng)之后的位置, 由浮動(dòng)元素浮動(dòng)之前在標(biāo)準(zhǔn)流中的位置來(lái)確定。浮動(dòng)流只有一種排版方式, 就是水平排版. 它只能設(shè)置某個(gè)元素左對(duì)齊或者右對(duì)齊
float: left; 和父元素最左邊對(duì)齊float: right; 和父元素最右邊對(duì)齊注意點(diǎn):
- 浮動(dòng)流中沒(méi)有居中對(duì)齊, 也就是沒(méi)有center這個(gè)取值
- 在浮動(dòng)流中是不可以使用margin: 0 auto;
特點(diǎn):
- 浮動(dòng)流中是不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素的
- 無(wú)論是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素都可以水平排版
- 在浮動(dòng)流中無(wú)論是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素都可以設(shè)置寬高
綜上所述, 浮動(dòng)流中的元素和標(biāo)準(zhǔn)流中的行內(nèi)塊級(jí)元素很像。
浮動(dòng)流中元素不再需要顯示轉(zhuǎn)換。
企業(yè)開(kāi)發(fā)中，垂直方向：標(biāo)準(zhǔn)流布局；水平方法：浮動(dòng)流布局3.定位流排版方式
【浮動(dòng)元素的脫標(biāo)】什么是浮動(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)
浮動(dòng)元素脫標(biāo)之后會(huì)有什么影響?
- 如果前面一個(gè)元素浮動(dòng)了, 而后面一個(gè)元素沒(méi)有浮動(dòng) , 那么這個(gè)時(shí)候前面一個(gè)元就會(huì)蓋住后面一個(gè)元素
【浮動(dòng)元素排序規(guī)則-3個(gè)】1.相同方向上的浮動(dòng)元素, 先浮動(dòng)的元素會(huì)顯示在前面, 后浮動(dòng)的元素會(huì)顯示在后面例子，3個(gè)元素依次浮動(dòng)顯示。
<style> .box1{ float: left; width: 50px; height: 50px; background-color: red; } .box2{ float: left; width: 100px; height: 100px; background-color: pink; } .box3{ float: left; width: 150px; height: 150px; background-color: yellow; } </style>效果
說(shuō)明，如果不采用浮動(dòng)流，也可以用標(biāo)準(zhǔn)流的水平排版完成。
2.不同方向上的浮動(dòng)元素, 左浮動(dòng)會(huì)找左浮動(dòng), 右浮動(dòng)會(huì)找右浮動(dòng)例子
<style> .box1{ float: left; width: 50px; height: 50px; background-color: red; } .box2{ float: right; width: 100px; height: 100px; background-color: pink; } .box3{ float: left; width: 150px; height: 150px; background-color: yellow; } .box4{ float: right; width: 200px; height: 200px; background-color: tomato; } </style>效果
3.浮動(dòng)元素浮動(dòng)之后的位置, 由浮動(dòng)元素浮動(dòng)之前在標(biāo)準(zhǔn)流中的位置來(lái)確定例子
<style> .box1{ float: left; width: 50px; height: 50px; background-color: red; } .box2{ width: 100px; height: 100px; background-color: pink; } .box3{ float: left; width: 150px; height: 150px; background-color: yellow; } .box4{ float: left; width: 200px; height: 200px; background-color: tomato; }</style>效果
說(shuō)明：
首先在標(biāo)準(zhǔn)流中，1,2,3,4是垂直排版的。
標(biāo)準(zhǔn)流默認(rèn)排版是在左上角。
1浮動(dòng)后，標(biāo)準(zhǔn)流中2,3,4位置依次上移。
再分析3，在它浮動(dòng)之前，在標(biāo)準(zhǔn)流中就是在2的下面這個(gè)位置，所以浮動(dòng)后在現(xiàn)在的位置（和在標(biāo)準(zhǔn)流中位置比較，沒(méi)有移動(dòng)）。
再看4，當(dāng)3浮動(dòng)后，4在標(biāo)準(zhǔn)流中會(huì)位置向上移動(dòng)，排在2下面，也就是和3的上邊齊平。所以4浮動(dòng)后，也就按照<規(guī)則1和2>平移到3右邊。
【浮動(dòng)元素貼靠現(xiàn)象-3種】<div class="father"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div></div>- 如果父元素的寬度能夠顯示所有浮動(dòng)元素, 那么浮動(dòng)的元素會(huì)并排顯示
- 如果父元素的寬度不能顯示所有浮動(dòng)元素, 那么會(huì)從最后一個(gè)元素開(kāi)始往前貼靠
- 如果貼靠了前面所有浮動(dòng)元素之后都不能顯示, 最終會(huì)貼靠到父元素的左邊或者右邊
【浮動(dòng)元素字圍現(xiàn)象】什么是浮動(dòng)元素字圍現(xiàn)象?
- 浮動(dòng)元素不會(huì)擋住沒(méi)有浮動(dòng)元素中的文字， 沒(méi)有浮動(dòng)的文字會(huì)自動(dòng)給浮動(dòng)的元素讓位置，這個(gè)就是浮動(dòng)元素字圍現(xiàn)象
例子，第一句給浮動(dòng)的div讓位置
<head><meta charset="UTF-8"><title>CSS Example</title><style> div{ float: left; width: 50px; height: 50px; border: 1px solid #000; background-color: red } p{ width: 400px; height: 70px; background-color: yellow; }</style></head><body><h1 >六言詩(shī)·給彭德懷同志</h1><div></div><p > 山高路遠(yuǎn)坑深，</p><p > 大軍縱橫馳奔。</p><p > 誰(shuí)敢橫刀立馬？</p><p > 唯我彭大將軍。</p></body>效果
應(yīng)用場(chǎng)景
【浮動(dòng)元素高度】- 在標(biāo)準(zhǔn)流中內(nèi)容的高度可以撐起父元素的高度。
<head> <meta charset="UTF-8"> <title>浮動(dòng)元素高度問(wèn)題</title> <style> *{ margin: 0; padding: 0; } div{ border: 1px solid #000; } p{ width: 50px; height: 50px; background-color: red; } </style></head><body><div> <p></p></div></body>效果，<p>標(biāo)簽把父元素<div>撐了起來(lái)
- 在浮動(dòng)流中浮動(dòng)的元素是不可以撐起父元素的高度
上面代碼，把<p>標(biāo)簽浮動(dòng)
p{ float: left; width: 50px; height: 50px; background-color: red; }效果，父元素<div>高度為0
在線咨詢
