亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

joyqi / 2810人閱讀

摘要：這種方法的局限性在于，必須設(shè)置父元素的高度為固定，因為的子元素已經(jīng)脫離文檔流，不能撐開父元素，或者會遮蓋同級的兄弟元素。

三列布局，中間自適應(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有類似的功能，在這一點上卻大不相同，下面會講到。

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)脫離文檔流，無法撐開父元素;*/

}

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/49781.html

相關(guān)文章

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

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

    jsyzchen 評論0 收藏0

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

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

    andot 評論0 收藏0

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

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

    JessYanCoding 評論0 收藏0

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

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

    aboutU 評論0 收藏0

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

    摘要：即自適應(yīng)寬度元素定義一個父標簽，并設(shè)置屬性為為自適應(yīng)寬度元素設(shè)置，應(yīng)定寬元素寬度固定寬度元素設(shè)置屬性為負值除此之外應(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 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<