成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

三列布局，中間自適應(yīng)，關(guān)于float和positon方法

jsyzchen / 2674人閱讀

摘要：這種方法的局限性在于，必須設(shè)置父元素的高度為固定，因?yàn)榈淖釉匾呀?jīng)脫離文檔流，不能撐開(kāi)父元素，或者會(huì)遮蓋同級(jí)的兄弟元素。

三列布局，中間自適應(yīng)，嘗試了兩種方法
float
.mydiv{

background-color: #eee;
margin:20px;
padding: 20px;
border: solid 1px #999;
overflow: auto;

}

.left {

float: left;
width: 160px;
height: 100px;
background: blue;
padding: 20px;

}

.right{

float: right;
width: 80px;
height: 300px;
background: blue;
padding: 20px;

}

.middle{

margin-left: 220px;
margin-right: 140px;
background: red;
height: 200px;
padding: 20px;

}
.clearfix{

clear: both;

}
看到一篇文章：http://www.barelyfitz.com/screencast/html-training/css/positioning/，里面有這么一句話：
We can "float" an element to push it as far as possible to the right or to the left, and allow text to wrap around it.
“wrap around it”非常重要，float與absolute有類似的功能，在這一點(diǎn)上卻大不相同，下面會(huì)講到。

position

mydiv{ 
background-color: #eee;
margin:20px;
padding: 20px;
border: solid 1px #999;
position: relative;

}

left { 
position: absolute;
left: 20px;
width: 160px;
height: 100px;
padding: 20px;

}

right{ 
position: absolute;
right: 20px;
width: 80px;
height: 260px;
padding: 20px;/*absolute已經(jīng)脫離文檔流，無(wú)法撐開(kāi)父元素;*/

}

middle{ 
margin-left: 220px;
margin-right: 140px;
height: 200px;
padding: 20px;

}
需要設(shè)置父元素為relative，子元素的absolute才會(huì)相對(duì)于父元素絕對(duì)定位。
這種方法的局限性在于，必須設(shè)置父元素的高度為固定，因?yàn)閍bsolute的子元素已經(jīng)脫離文檔流，不能撐開(kāi)父元素，或者會(huì)遮蓋同級(jí)的兄弟元素。
也就是說(shuō)這種方法不能自適應(yīng)高度布局。對(duì)于子元素高度不確定的情況這種方法也就不能使用了。當(dāng)然用js腳本進(jìn)行控制也可以。

關(guān)于absolute和float區(qū)別。
absolute是完全脫離文檔流，兩個(gè)設(shè)置了absolute的元素甚至都可以互相覆蓋。
而關(guān)于float，W3C手冊(cè)中有這么一句話：由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。
對(duì)于普通流中的塊框不存在，也就是說(shuō)對(duì)于float元素、文檔中的行內(nèi)元素，浮動(dòng)元素是存在的。表達(dá)有點(diǎn)晦澀？？？具體的說(shuō)，float:left遇到float:left,會(huì)停下來(lái)并排顯示而不是覆蓋。而對(duì)于行內(nèi)元素：圖片和文字，會(huì)“wrap around it”，就是包圍float元素。

但是float和absolute都會(huì)出現(xiàn)無(wú)法撐開(kāi)父元素的問(wèn)題：
這時(shí)候absolute就比較雞肋了，在多欄不確定高度的布局中，absolute沒(méi)有辦法解決父元素自適應(yīng)高度的問(wèn)題（參考：http://www.barelyfitz.com/screencast/html-training/css/positioning/）而float可以有一些清除float的方法，上面采用了overflow: auto;和.clearfix方法。清除浮動(dòng)絕對(duì)是個(gè)大問(wèn)題，接下來(lái)也會(huì)繼續(xù)學(xué)習(xí)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115137.html

相關(guān)文章

  • 三列布局，中間自適應(yīng)，關(guān)于float和positon方法

    摘要：這種方法的局限性在于，必須設(shè)置父元素的高度為固定，因?yàn)榈淖釉匾呀?jīng)脫離文檔流，不能撐開(kāi)父元素，或者會(huì)遮蓋同級(jí)的兄弟元素。 三列布局，中間自適應(yīng)，嘗試了兩種方法float.mydiv{ background-color: #eee; margin:20px; padding: 20px; border: solid 1px #999; overflow: auto; } .left { ...

    joyqi 評(píng)論0 收藏0

  • 構(gòu)建靜態(tài)頁(yè)面 之 [ 布局 ]

    摘要：布局描述表示對(duì)頁(yè)面中的顯示效果進(jìn)行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內(nèi)塊級(jí)元素水平居中的第一種方法該方法需作用在父子結(jié)構(gòu)中為父級(jí)設(shè)置屬性為子級(jí)設(shè)置屬性注意的問(wèn)題屬性是設(shè)置文本內(nèi)容對(duì)齊方式的 布局 描述 表示對(duì)頁(yè)面中的顯示效果進(jìn)行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一種方式 水平居中 + 行內(nèi)塊級(jí)元素（text-a...

    andot 評(píng)論0 收藏0

  • 構(gòu)建靜態(tài)頁(yè)面 之 [ 布局 ]

    摘要：布局描述表示對(duì)頁(yè)面中的顯示效果進(jìn)行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內(nèi)塊級(jí)元素水平居中的第一種方法該方法需作用在父子結(jié)構(gòu)中為父級(jí)設(shè)置屬性為子級(jí)設(shè)置屬性注意的問(wèn)題屬性是設(shè)置文本內(nèi)容對(duì)齊方式的 布局 描述 表示對(duì)頁(yè)面中的顯示效果進(jìn)行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一種方式 水平居中 + 行內(nèi)塊級(jí)元素（text-a...

    JessYanCoding 評(píng)論0 收藏0

  • 三列布局（左右固定，中間自適應(yīng)）

    1、定位 我是左邊，我是固定的 我是中間，我是自適應(yīng)的，左邊右邊都position固定了，他們脫離了文檔流，我終于得到機(jī)會(huì)擠進(jìn)中間啦！只要我margin一下就沒(méi)人會(huì)擋住我啦！我可真是個(gè)小機(jī)靈鬼(同時(shí)，我還是個(gè)自由人，我div寫在開(kāi)頭中間結(jié)尾都可以呢) 我是右邊，我也是固定的 *{ margin:0; padding: 0; } .l...

    aboutU 評(píng)論0 收藏0

  • 關(guān)于幾種自適應(yīng)布局

    摘要：即自適應(yīng)寬度元素定義一個(gè)父標(biāo)簽，并設(shè)置屬性為為自適應(yīng)寬度元素設(shè)置，應(yīng)定寬元素寬度固定寬度元素設(shè)置屬性為負(fù)值除此之外應(yīng)注意結(jié)構(gòu)中應(yīng)先寫自適應(yīng)元素，再寫固定寬度元素。 類型一 1，左右兩側(cè)，左側(cè)固定寬度200px，右側(cè)自適應(yīng)占滿 代碼如下 左右兩側(cè)，左側(cè)固定寬度200px，右側(cè)自適應(yīng)占滿 .box{ width:600px; height:500px; ...

    Honwhy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<