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

資訊專欄INFORMATION COLUMN

構(gòu)建靜態(tài)頁面 之 [ 浮動(dòng) ]

Scliang / 2332人閱讀

摘要：浮動(dòng)描述是對頁面布局的一種表現(xiàn)方式設(shè)置浮動(dòng)的元素會(huì)脫離文檔流設(shè)置浮動(dòng)的元素會(huì)改變后面元素的顯示位置屬性表示設(shè)置元素浮動(dòng)屬性值表示設(shè)置元素左浮動(dòng)屬性值表示設(shè)置元素右浮動(dòng)設(shè)置浮動(dòng)的元素會(huì)脫離文檔流，指定元素后面的元素會(huì)自動(dòng)向前，形成重疊的顯

浮動(dòng) 描述

是對頁面布局的一種表現(xiàn)方式

設(shè)置浮動(dòng)的元素會(huì)脫離文檔流

設(shè)置浮動(dòng)的元素會(huì)改變后面元素的顯示位置

float屬性

表示設(shè)置元素浮動(dòng)

left屬性值 - 表示設(shè)置元素左浮動(dòng)

right屬性值 - 表示設(shè)置元素右浮動(dòng)

設(shè)置浮動(dòng)的元素會(huì)脫離文檔流，指定元素后面的元素會(huì)自動(dòng)向前，形成重疊的顯示效果


    
    浮動(dòng)

元素類型的浮動(dòng) 塊級元素浮動(dòng)

垂直方向排列改為水平方向排列

顯示寬度由父級寬度的 100% 變?yōu)?0（在沒設(shè)寬的情況下）


    
    元素類型的浮動(dòng)

內(nèi)聯(lián)元素浮動(dòng)

允許設(shè)置寬度和高度


    
    元素類型的浮動(dòng)

行內(nèi)塊級元素浮動(dòng)

去掉了元素之間的間隙


    
    元素類型的浮動(dòng)

父子關(guān)系的浮動(dòng)

子級元素的浮動(dòng)范圍，不能超出父級元素的所在區(qū)域范圍

父級元素浮動(dòng)，子級元素也會(huì)跟隨父級一同浮動(dòng)


    
    父子關(guān)系的浮動(dòng)

兄弟關(guān)系的浮動(dòng)

如果下一個(gè)兄弟元素浮動(dòng)，下一個(gè)兄弟元素不會(huì)超過上一個(gè)兄弟元素所占的區(qū)域位置


    
    兄弟關(guān)系的浮動(dòng)

高度塌陷

父級元素沒設(shè)高度，子級元素設(shè)置浮動(dòng) - 父級元素會(huì)高度塌陷

高度塌陷 - 僅存在父子關(guān)系中

解決方法

為父級元素設(shè)置高度

開啟BFC環(huán)境

浮動(dòng)可以開啟 - 脫離文檔流

將元素類型改為行內(nèi)塊級元素可以開啟 - 行內(nèi)塊級元素的本身問題

overflow屬性 屬性值為hidden時(shí)可以開啟 - 解決內(nèi)容溢出

設(shè)置絕對定位可以開啟 - 脫離文檔流

注意：開啟BFC方法所帶來的副作用


    
    高度塌陷

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

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

相關(guān)文章

  • 構(gòu)建靜態(tài)頁面 之 [ 浮動(dòng) ]

    摘要：浮動(dòng)描述是對頁面布局的一種表現(xiàn)方式設(shè)置浮動(dòng)的元素會(huì)脫離文檔流設(shè)置浮動(dòng)的元素會(huì)改變后面元素的顯示位置屬性表示設(shè)置元素浮動(dòng)屬性值表示設(shè)置元素左浮動(dòng)屬性值表示設(shè)置元素右浮動(dòng)設(shè)置浮動(dòng)的元素會(huì)脫離文檔流，指定元素后面的元素會(huì)自動(dòng)向前，形成重疊的顯 浮動(dòng) 描述 是對頁面布局的一種表現(xiàn)方式 設(shè)置浮動(dòng)的元素會(huì)脫離文檔流 設(shè)置浮動(dòng)的元素會(huì)改變后面元素的顯示位置 float屬性 表示設(shè)置元素浮動(dòng) ...

    snowell 評論0 收藏0

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

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

    andot 評論0 收藏0

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

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

    JessYanCoding 評論0 收藏0

  • 【靜態(tài)頁面架構(gòu)】CSS之定位

    摘要：架構(gòu)浮動(dòng)是以屬性設(shè)置容器指定的位置當(dāng)前元素設(shè)置為浮動(dòng)后，只影響當(dāng)前元素后面的所有元素的位置塊級元素不再獨(dú)占一行，多元素之間會(huì)水平方向排列設(shè)置浮動(dòng)后，會(huì)從頁面的文檔流脫離默認(rèn)寬度是父級寬度的高度是后者的所有元素高度之和左浮動(dòng)寬度默認(rèn)是 CSS架構(gòu) 1.浮動(dòng)； 是以float屬性設(shè)置容器指定的位置 div { width: 200px; ...

    scq000 評論0 收藏0

  • 前端面試題目匯總

    摘要：線程在執(zhí)行過程中與進(jìn)程還是有區(qū)別的。但是線程不能夠獨(dú)立執(zhí)行，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個(gè)線程執(zhí)行控制。從邏輯角度來看，多線程的意義在于一個(gè)應(yīng)用程序中，有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行。 關(guān)于js 1.原型鏈 2.AJAX請求數(shù)據(jù)時(shí)解決緩存的辦法3.js的繼承 ...

    lastSeries 評論0 收藏0

發(fā)表評論

0條評論

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