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

資訊專欄INFORMATION COLUMN

【學(xué)習(xí)筆記】CSS深入理解之float

denson / 1508人閱讀

摘要：為了實(shí)現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動(dòng)，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。從浮動(dòng)的起因和浮動(dòng)的實(shí)現(xiàn)后果來看，浮動(dòng)不適合用于大范圍的布局，更適合利用其特性實(shí)現(xiàn)一些小范圍的流體布局效果。

張?chǎng)涡竦腃SS深入理解之float浮動(dòng)學(xué)習(xí)筆記
float的歷史

float為產(chǎn)生文字環(huán)繞效果而生

float的特性 — 包裹和破壞

包裹：即產(chǎn)生一個(gè)BFC
破壞：使父容器塌陷，元素脫離文檔流，產(chǎn)生inline boxes環(huán)繞

清除浮動(dòng)

方式一：使用clear，類似于產(chǎn)生一個(gè)連接索道，使前文和后文關(guān)聯(lián)，會(huì)產(chǎn)生margin重疊效果。

clear: both，這個(gè)元素和源碼中后面的元素將不浮動(dòng)

非浮動(dòng)元素和浮動(dòng)元素之間不能通過外邊距撐開距離

因此需要一個(gè)多帶帶的非浮動(dòng)元素充當(dāng)索道

方式二：父容器BFC或者h(yuǎn)aslayout(IE6/IE7) - 封閉容器，不會(huì)產(chǎn)生margin重疊

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; /*IE6, IE7產(chǎn)生haslayout*/
}
float的表現(xiàn)

元素block化：inline元素被block化
去空格化，空格符成為環(huán)繞文本

浮動(dòng)與流體布局應(yīng)用

文字環(huán)繞效果
https://codepen.io/curlywater...

左中右效果
https://codepen.io/curlywater...

單側(cè)固定
https://codepen.io/curlywater...

DOM與顯示位置匹配的單側(cè)固定
https://codepen.io/curlywater...
第一種實(shí)現(xiàn)方式，保證向右浮動(dòng)的元素寫在前（先布局），內(nèi)容區(qū)設(shè)置margin-right
第二種實(shí)現(xiàn)方式，為了使DOM和現(xiàn)實(shí)順序一致，對(duì)內(nèi)容區(qū)加一個(gè)向左浮動(dòng)的盒子，沒有指定寬度的盒子利用外邊距保留剩余空間，實(shí)現(xiàn)寬度拉伸。使用負(fù)margin把左浮動(dòng)的頭像區(qū)移動(dòng)到同行。

兩側(cè)自適應(yīng)
https://codepen.io/curlywater...
使用table-cell產(chǎn)生一個(gè)BFC，去除掉浮動(dòng)的影響

總結(jié)

浮動(dòng)起源于實(shí)現(xiàn)文字環(huán)繞效果。

為了實(shí)現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動(dòng)，元素周圍的內(nèi)容轉(zhuǎn)換為inline boxes圍繞元素排列。

從浮動(dòng)的起因和浮動(dòng)的實(shí)現(xiàn)后果來看，浮動(dòng)不適合用于大范圍的布局，更適合利用其特性實(shí)現(xiàn)一些小范圍的流體布局效果。

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

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

相關(guān)文章

  • 【學(xué)習(xí)筆記】CSS深入理解之absolute

    摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記絕對(duì)定位的特性絕對(duì)定位與浮動(dòng)相似，都有破壞性和包裹性。利用絕對(duì)定位元素脫離文檔流的特性，使用動(dòng)畫可以避免大范圍的回流和重繪。絕對(duì)定位元素拉伸實(shí)現(xiàn)寬高自適應(yīng)，可應(yīng)用于大范圍的布局。 《張?chǎng)涡竦腃SS深入理解之a(chǎn)bsolute》學(xué)習(xí)筆記 絕對(duì)定位的特性 絕對(duì)定位與浮動(dòng)相似，都有破壞性和包裹性。浮動(dòng)的一些應(yīng)用場(chǎng)景中也可用絕對(duì)定位替代 絕對(duì)定位的行為表現(xiàn) 無依賴絕對(duì)...

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

  • 【學(xué)習(xí)筆記】CSS深入理解之z-index

    摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記層疊上下文什么是層疊上下文在軸上延伸出一個(gè)層級(jí)，離父級(jí)層疊上下文的頂部更近。遵循后來居上和誰大誰上的層疊原則。 張?chǎng)涡竦腃SS深入理解之z-index學(xué)習(xí)筆記 層疊上下文 什么是層疊上下文？在z軸上延伸出一個(gè)層級(jí)，離父級(jí)層疊上下文的頂部更近。 如何產(chǎn)生層疊上下文？ 根元素具有根層疊上下文 z-index不為auto的定位元素 一個(gè) z-index 值不為 ...

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

  • 【學(xué)習(xí)筆記】CSS深入理解之vertical-align

    摘要：上例中，左邊盒子的基線為其底邊緣，右邊盒子的基線為的基線將右邊盒子的行高設(shè)置為，即這個(gè)的高度為，位置處于中間。 vertical-align的值 線類：baseline（默認(rèn)）, top, bottom, middle 文字類：text-top, text-bottom 上標(biāo)下標(biāo)類：sub, super 數(shù)值：1px, 1em - 在baseline對(duì)齊的基礎(chǔ)上上下偏移一定數(shù)值 百分...

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

  • 【學(xué)習(xí)筆記】CSS深入理解之margin

    摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記與容器的尺寸可視尺寸對(duì)于沒有設(shè)定的塊元素，可改變?cè)厮椒较虻目梢暢叽缯紦?jù)尺寸對(duì)于元素，可改變?cè)厮酱怪狈较虻恼紦?jù)尺寸與百分比單位普通元素的百分比都是相對(duì)于容器的寬度計(jì)算的絕對(duì)定位元素的百分比是相對(duì)于包含塊的寬 張?chǎng)涡竦腃SS深入理解之margin學(xué)習(xí)筆記 margin與容器的尺寸 可視尺寸：對(duì)于沒有設(shè)定width的塊元素，margin可改變?cè)厮椒较?..

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

  • 【學(xué)習(xí)筆記】CSS深入理解之padding

    摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記與容器的尺寸元素值過大，一定影響元素尺寸為定值，會(huì)影響元素尺寸為或者為，同時(shí)值沒有暴走，不影響元素尺寸元素水平影響尺寸，垂直不影響尺寸，但是會(huì)影響占據(jù)空間會(huì)顯示背景色負(fù)值與百分比單位不支持負(fù)值百分比相對(duì)于自身寬 張?chǎng)涡竦腃SS深入理解之padding學(xué)習(xí)筆記 padding與容器的尺寸 block元素 padding值過大，一定影響元素尺寸 width為定...

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

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

0條評(píng)論

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