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

資訊專欄INFORMATION COLUMN

CSS 小結(jié)筆記之BFC

番茄西紅柿 / 1243人閱讀

摘要：必須表現(xiàn)為一塊一塊的，才能給出一個(gè)隔離的空間。觸發(fā)的具體條件光有的潛質(zhì)，不代表就直接會觸發(fā)。最后，一般設(shè)置最常用的就是給盒子加上因?yàn)檫@樣的寫法基本上不會對原有的其他樣式產(chǎn)生影響。

BFC 即為Block formatting context 的縮寫，BFC 主要用來將一個(gè)盒子設(shè)置為一個(gè)隔離的容器，不管盒子內(nèi)部的元素具有什么屬性，都不會影響到盒子的外面。

1、哪些元素能產(chǎn)生BFC

不是所有的元素都能產(chǎn)生BFC的，只有display 屬性為 block, list-item, table 的元素，才可以產(chǎn)生BFC。

這點(diǎn)其實(shí)根據(jù)BFC的主要作用應(yīng)該可以很形象的理解。“必須表現(xiàn)為一塊一塊的，才能給出一個(gè)隔離的空間“。

2、觸發(fā)BFC的具體條件

光有BFC的潛質(zhì)，不代表就直接會觸發(fā)BFC。觸發(fā)BFC 需要至少滿足下列條件中的一條：

（1）、具有浮動（即float不為none）

（2）、具有絕對定位或固定定位（position：absolute |fixed）

（3）、display為inline-block, table-cell, table-caption, flex, inline-flex

（4）、overflow不為visible（一般設(shè)置overflow：hidden）

3、BFC盒子的特性

（1）、BFC內(nèi)部的盒子是從上到下一個(gè)接著一個(gè)排列的（正常的塊級元素排列也是如此）

（2）、BFC內(nèi)部的盒子之間的距離是通過margin值來設(shè)置的，相鄰的兩個(gè)盒子的margin會重疊

（3）、BFC盒子內(nèi)部的子盒子是緊貼著BFC盒子的邊緣的（從左到右排列，則子盒子的左邊緣緊貼著BFC的左邊框（不與邊框重疊）；從右到左排列，則子盒子的右邊緣緊貼著BFC盒子的右邊框）

（4）、BFC盒子不會與浮動的盒子產(chǎn)生重疊，而是緊靠著浮動的邊緣

（5）、計(jì)算BFC的高度時(shí)，也會自動計(jì)算浮動或定位的盒子的高度

4、BFC的具體應(yīng)用

（1）、清除元素內(nèi)部的浮動（特性（5）的應(yīng)用）

正常情況下當(dāng)父盒子不給出高度時(shí)，子盒子的高度會將把父盒子自動撐開來，讓父盒子具有高度。

而如果子元素都具有浮動時(shí)，父盒子就不會被撐開。這時(shí)使父盒子具有BFC屬性即可同時(shí)計(jì)算浮動盒子的高度

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        .fa {
            width: 200px;
            margin: 100px auto;
            border: 2px solid red;
            background-color: aqua;
        }
        
        .fa div {
            width: 100px;
            height: 100px;
            float: left;
            border: 2px solid yellowgreen;
            background-color: deeppink;
        }
        
        .fa .son2 {
            border: 2px solid grey;
            background-color: hotpink;
        }
    style>
head>

<body>
    <div class="fa">
        <div class="son1">div>
        <div class="son2">div>
    div>
body>

html>
View Code

在父盒子沒有觸發(fā)BFC時(shí)，顯示的結(jié)果如下

而通過2中的方法，給.fa 添加BFC （例如增加一句overflow: hidden;）效果如下

（2）、解決外邊距合并的問題（特性（2）的應(yīng)用）

根據(jù)上述的3-（2）所說，BFC內(nèi)部的相鄰的兩個(gè)盒子的margin值會重疊，那么如果不屬于同一個(gè)BFC則可以解決這個(gè)問題

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        .fa {
            width: 200px;
            margin: 100px auto;
            height: 400px;
            border: 2px solid red;
            background-color: aqua;
            overflow: hidden;
        }
        
        .son1,
        .son2 {
            width: 100px;
            height: 100px;
            border: 2px solid yellowgreen;
            background-color: deeppink;
        }
        
        .son1 {
            margin-bottom: 50px;
        }
        
        .son2 {
            margin-top: 100px;
            border: 2px solid grey;
            background-color: hotpink;
        }
    style>
head>

<body>
    <div class="fa">

        <div class="son1">div>

        <div class="son2">div>
    div>
body>

html>
View Code

同一個(gè)BFC下，.son1的下邊距為50px .son2的上邊距為100px 按照我們一般想要的結(jié)果是，.son1 與.son2 之間的距離為150px；

而實(shí)際效果入下：

 

可以很明顯看出，他們之間的距離只有100px，他們的margin重疊了。

如果給.son1 外邊在嵌套一個(gè)BFC 則 .son1 與.son2，不屬于同一個(gè)BFC就不會產(chǎn)生這個(gè)情況 結(jié)果如下：

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        .fa {
            width: 200px;
            margin: 100px auto;
            height: 400px;
            border: 2px solid red;
            background-color: aqua;
            overflow: hidden;
        }
        
        .son1,
        .son2 {
            width: 100px;
            height: 100px;
            border: 2px solid yellowgreen;
            background-color: deeppink;
        }
        
        .bfc {
            overflow: hidden;
        }
        
        .son1 {
            margin-bottom: 50px;
        }
        
        .son2 {
            margin-top: 100px;
            border: 2px solid grey;
            background-color: hotpink;
        }
    style>
head>

<body>
    <div class="fa">
        <div class="bfc">
            <div class="son1">div>
        div>
        <div class="son2">div>
    div>
body>

html>
View Code

 

（3）、使右側(cè)盒子寬度自適應(yīng)（特性（4）的應(yīng)用）

一個(gè)父盒子內(nèi)部有兩個(gè)子盒子，如果第一個(gè)子盒子有浮動，而第二個(gè)子盒子沒有浮動，則第一個(gè)子盒子會蓋在第二個(gè)盒子上面。

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        .fa {
            width: 400px;
            margin: 100px auto;
            height: 400px;
            border: 2px solid red;
            background-color: aqua;
        }
        
        .son1 {
            width: 100px;
            height: 100px;
            border: 2px solid yellowgreen;
            background-color: deeppink;
            float: left;
        }
        .son2 {
            height: 200px;
           
            border: 2px solid grey;
            background-color: hotpink;
        }
    style>
head>

<body>
    <div class="fa">

        <div class="son1">div>

        <div class="son2">這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字div>
    div>
body>

html>
View Code

 

 

如果給第二個(gè)子盒子（.son2{overflow:hidden}）添加BFC，則第二個(gè)盒子會緊貼著浮動盒子的右側(cè)，并且由于第二個(gè)子盒子沒有寬度，所以他的寬度會自適應(yīng)剩余大小。

最后，一般設(shè)置BFC最常用的就是給盒子加上 overflow: hidden; 因?yàn)檫@樣的寫法基本上不會對原有的其他樣式產(chǎn)生影響。

 

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

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

相關(guān)文章

  • 前端筆記之CSS（下）浮動&BFC&定位&Hack

    摘要：并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。宋體清除浮動這是專業(yè)術(shù)語，其實(shí)就是需要我們解決浮動帶來的影響宋體父元素的高度塌陷宋體。相對定位的參考點(diǎn)是自身。 一、浮動 1.1 各個(gè)語言的主要知識點(diǎn) HTML：標(biāo)簽語義化(那么怎么樣布局才是合理的?沒有絕對的對和錯(cuò)) CSS： 　　樣式： 　　布局： 　　　　標(biāo)準(zhǔn)流(標(biāo)準(zhǔn)文檔流、普通文檔流)：盒子模型(width/height...

    番茄西紅柿 評論0 收藏0

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

    摘要：為了實(shí)現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。從浮動的起因和浮動的實(shí)現(xiàn)后果來看，浮動不適合用于大范圍的布局，更適合利用其特性實(shí)現(xiàn)一些小范圍的流體布局效果。 張鑫旭的CSS深入理解之float浮動學(xué)習(xí)筆記 float的歷史 float為產(chǎn)生文字環(huán)繞效果而生 float的特性 — 包裹和破壞 包裹：即產(chǎn)生一個(gè)BFC破壞：使父容器...

    denson 評論0 收藏0

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

    摘要：張鑫旭的深入理解之學(xué)習(xí)筆記基本屬性屬性介紹默認(rèn)當(dāng)與值相同時(shí)，等同于當(dāng)與值不相同時(shí)，其中一個(gè)值被賦予時(shí)，若另一個(gè)值為，那這個(gè)會被重置為作用前提元素非對應(yīng)方位的尺寸限制拉伸對于單元格等需要為狀態(tài)才可以與滾動條頁面默認(rèn)滾動條來自與無 《張鑫旭的CSS深入理解之overflow》學(xué)習(xí)筆記 overflow基本屬性 overflow屬性介紹 overflow: visible(默認(rèn))|hidd...

    Ali_ 評論0 收藏0

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

    摘要：張鑫旭的深入理解之學(xué)習(xí)筆記與容器的尺寸可視尺寸對于沒有設(shè)定的塊元素，可改變元素水平方向的可視尺寸占據(jù)尺寸對于元素，可改變元素水平垂直方向的占據(jù)尺寸與百分比單位普通元素的百分比都是相對于容器的寬度計(jì)算的絕對定位元素的百分比是相對于包含塊的寬 張鑫旭的CSS深入理解之margin學(xué)習(xí)筆記 margin與容器的尺寸 可視尺寸：對于沒有設(shè)定width的塊元素，margin可改變元素水平方向...

    stefan 評論0 收藏0

  • CSS 小結(jié)筆記之三種樣式表

    摘要：內(nèi)部樣式表內(nèi)部樣式表一般寫在頭部，在標(biāo)簽內(nèi)用標(biāo)簽括起來。外部樣式表外部樣式表是單獨(dú)將樣式寫到一個(gè)文件中，并在頭部引用。使用外部樣式表時(shí)要注意如果出現(xiàn)多重樣式時(shí)樣式覆蓋帶來的問題。CSS 引入共有三種方式：內(nèi)部樣式表，內(nèi)聯(lián)樣式（行內(nèi)樣式）表，外部樣式表，當(dāng)然也可以使用多重樣式 內(nèi)聯(lián)樣式 內(nèi)聯(lián)樣式表 內(nèi)聯(lián)樣式 直接把樣式卸載html代碼行內(nèi)，一般僅僅在此樣式僅僅只在當(dāng)前元素上應(yīng)用時(shí)使用，其他...

    李文鵬 評論0 收藏0

發(fā)表評論

0條評論

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