国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

【CSS】講一講BFC、IFC、GFC、FFC

2年前作者：古狼_guwolf分類：Toy博客閱讀(57)違法舉報

這篇具有很好參考價值的文章主要介紹了【CSS】講一講BFC、IFC、GFC、FFC。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

1. 前言

????????FC（Formatting Contexts），是CSS2.1的一個概念，是頁面中的一塊渲染區(qū)域，具有一套渲染規(guī)則，決定FC中子元素如何定位，以及和其他元素的關(guān)系和相互作用。在說FC之前說一下文檔流。

1.1. 普通流

????????元素按照其所有HTML中的位置先后位置至上而下布局，行內(nèi)元素水平排列，直到當前行被占滿然后換行，塊級元素則會被渲染為新的完整的一行，元素默認都是普通流定位。

1.2?浮動

? ? ? ? 當一個元素被設置浮動效果后，它會脫離普通流，向左右向右偏移所在容器的邊框位置，或碰到另一個浮動元素為止。

1.3 絕對定位

? ? ? ? 元素會整體脫離普通流，因此絕對定位不會對其兄弟元素造成影響。

2. BFC

? ? ? ? BFC（Block Formatting Contexts，塊級格式化上下文）是頁面上一個隔離渲染區(qū)域，BFC中的子元素不會在布局上影響外面的元素。

BFC形成條件：

  • 根元素，即html元素
  • 顯示元素，display：inline-block、table-cell、table-caption三種
  • 定位元素，position除relative、static、sticky值以外的值：absolute、fixed兩種
  • 浮動元素，float除none值以外的值：left、right
  • 溢出元素，overflow除visible值以外的值：hidden、scroll、auto

特性：

  • 內(nèi)部Box（塊級元素）垂直方向一個接一個放置（BFC中的子元素之間）
  • 垂直方向上的距離由margin決定（BFC中的子元素之間）
  • BFC區(qū)域不會與浮動元素區(qū)域重疊（BFC和浮動元素同級之間）
  • 計算BFC高度時，浮動元素也參與計算（BFC和浮動元素父子之間）
  • BFC是頁面上一個獨立容器，窗口中的子元素不影響外面元素（BFC和其他元素同級之間）
2.1 內(nèi)部盒子垂直方向一個接一個放置

????????不在BFC里，塊級Box也會垂直排列，這一條規(guī)則不用多說

2.2?垂直方向上的距離由margin決定

? ? ? ? 塊級元素垂直外邊距會折疊，即由外邊距較大的為準，不會發(fā)生margin穿透問題。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box:first-child {
            height: 20px;
            margin: 10px 0;
            background-color: green;
        }
        .box:last-child {
            height: 20px;
            margin: 20px 0;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>
2.3?BFC區(qū)域不會與浮動元素區(qū)域重疊

? ? ? ? float元素固定寬度，BFC元素不設置寬度，BFC元素寬度會自適應

<!DOCTYPE html>
<html>
<head>
    <style>
        .box:nth-child(1) {
            float: left; /*既是浮動元素，也是BFC*/
            width: 200px;
            height: 300px;
            margin-right: 10px;
            background-color: red;
        }

        .box:nth-child(2) {
            overflow: hidden; /*設置BFC，不被浮動元素覆蓋*/
            height: 300px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>
2.4 計算BFC高度時，浮動元素也參與計算
<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            background-color: red;
            padding: 5px;
            overflow: hidden;
        }
        .box {
            float: left;
            height: 20px;
            width: 20px;
            margin: 20px 0;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>
2.5?BFC是頁面上一個獨立容器，窗口中的子元素不影響外面元素
<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            float: left;
            width: 100px;
            height: 150px;
            background-color: red;
        }
        .wrapper {
            overflow: hidden;
        }
        .box:first-child {
            height: 20px;
            margin: 10px 0;
            background-color: green;
        }
        .box:last-child {
            height: 20px;
            margin: 20px 0;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <div class="box"></div>
        </div>
        <div class="box"></div>
    </div>
</body>
</html>
3. IFC

????????IFC（Inline Formatting Contexts，內(nèi)聯(lián)格式化上下文）?。

作用：

  • 水平居中：當一個塊要在環(huán)境中水平居中時，設置其為inline-block則會在外層產(chǎn)生IFC，通過text-align則可以使其水平居中
  • 垂直居中：創(chuàng)建一個IFC，用其中一個元素撐開父元素的高度，然后設置其vertical-align:middle，其他行內(nèi)元素則可以在此父元素下垂直居中
4. GFC

????????GFC（GridLayout Formatting Contexts，網(wǎng)格布局格式化上下文）

形成條件：

  • 顯示元素，display：grid、inline-grid兩種

參見【CSS】布局方式梳理和總結(jié)-CSDN博客中的CSS3網(wǎng)格布局。

5. FFC

? ? ? ? FFC（Flex?Formatting Contexts，布局格式化上下文）

形成條件：

  • 顯示元素，display：flex、inline-flex兩種

參見【CSS】布局方式梳理和總結(jié)-CSDN博客中的?CSS3 Flex布局。

參見：

區(qū)塊格式化上下文 - Web 開發(fā)者指南 | MDN (mozilla.org)

CSS深入理解流體特性和BFC特性下多欄自適應布局 ? 張鑫旭-鑫空間-鑫生活 (zhangxinxu.com)

注：以上，如有不合理之處，還請幫忙指出，大家一起交流學習~??文章來源地址http://www.zghlxwxcb.cn/news/detail-784273.html

到了這里，關(guān)于【CSS】講一講BFC、IFC、GFC、FFC的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權(quán)，不承擔相關(guān)法律責任。如若轉(zhuǎn)載，請注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

領(lǐng)支付寶紅包贊助服務器費用

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包