CSS3與頁面佈局學習總結（三）——BFC、定位、浮動、7種垂直居中方法

来源:http://www.cnblogs.com/best/archive/2016/12/01/6119467.html
-Advertisement-
Play Games

一、BFC與IFC 1.1、BFC與IFC概要 BFC（Block Formatting Context）即“塊級格式化上下文”， IFC（Inline Formatting Context）即行內格式化上下文。常規流（也稱標準流、普通流）是一個文檔在被顯示時最常見的佈局形態。一個框在常規流中必須屬 ...


一、BFC與IFC

1.1、BFC與IFC概要

BFC（Block Formatting Context）即“塊級格式化上下文”， IFC（Inline Formatting Context）即行內格式化上下文。常規流（也稱標準流、普通流）是一個文檔在被顯示時最常見的佈局形態。一個框在常規流中必須屬於一個格式化上下文，你可以把BFC想象成一個大箱子，箱子外邊的元素將不與箱子內的元素產生作用。

BFC是W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關係和相互作用。當涉及到可視化佈局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照一定規則進行佈局。一個環境中的元素不會影響到其它環境中的佈局。比如浮動元素會形成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。也可以說BFC就是一個作用範圍。

在普通流中的 Box(框) 屬於一種 formatting context(格式化上下文) ，類型可以是 block ，或者是 inline ，但不能同時屬於這兩者。並且， Block boxes(塊框) 在 block formatting context(塊格式化上下文) 里格式化， Inline boxes(塊內框) 則在 Inline Formatting Context(行內格式化上下文) 里格式化。

1.2、如何產生BFC

當一個HTML元素滿足下麵條件的任何一點，都可以產生Block Formatting Context：
a)、float的值不為none

b)、overflow的值不為visible

c)、display的值為table-cell, table-caption, inline-block中的任何一個

d)、position的值不為relative和static

CSS3觸發BFC方式則可以簡單描述為：在元素定位非static,relative的情況下觸發，float也是一種定位方式。

1.3、BFC的作用與特點

a)、不和浮動元素重疊，清除外部浮動，阻止浮動元素覆蓋

如果一個浮動元素後面跟著一個非浮動的元素，那麼就會產生一個重疊的現象。常規流（也稱標準流、普通流）是一個文檔在被顯示時最常見的佈局形態，當float不為none時，position為absolute、fixed時元素將脫離標準流。

沒有BFC的情況：

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BFC與IFC</title>
        <style type="text/css">
            #div1{
                width: 200px;
                height: 200px;
                background: lightgreen;
                float: left;
            }
            #div2{
                width: 300px;
                height: 300px;
                background: lightblue;
            }
        </style>
    </head>
    <body>
        <h2>BFC與IFC</h2>
        <div id="div1">div1
        </div>
        <div id="div2">div2
        </div>
    </body>
</html>
View Code

運行結果：

此時的div1因為float已經產生了BFC，在div2中添加樣式overflow:hidden讓其產生BFC，代碼如下：

            #div2{
                width: 300px;
                height: 300px;
                background: lightblue;
                overflow: hidden;
            }

運行結果：

b)、清除元素內部浮動，計算浮動元素的高度

只要把父元素設為BFC就可以清理子元素的浮動了，最常見的用法就是在父元素上設置overflow: hidden樣式，對於IE6加上zoom:1就可以了(IE Haslayout)。

當一個元素的內部元素浮動時不會計算其高度，示例如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>BFC與IFC</title>
        <style type="text/css">
            #div0 {
                border: 2px solid lightsalmon;
                padding: 20px;
                width: 400px;
            }
            
            #div1 {
                width: 200px;
                height: 200px;
                background: lightgreen;
                float: left;
            }
            
            #div2 {
                width: 200px;
                height: 200px;
                background: lightblue;
                float: left;
            }
        </style>
    </head>

    <body>
        <h2>BFC與IFC</h2>
        <div id="div0">
            <div id="div1">div1
            </div>
            <div id="div2">div2
            </div>
        </div>
    </body>

</html>
View Code

運行結果：

修改div0讓其觸發BFC，還原高度，代碼如下：

            #div0 {
                border: 2px solid lightsalmon;
                padding: 20px;
                width: 400px;
                overflow: hidden;  /*讓div0觸發BFC*/
            }

運行結果：

 

c）、外邊距將不再與上下文之外的元素摺疊 

示例代碼：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>BFC與IFC</title>
        <style type="text/css">
            #div1 {
                width: 200px;
                height: 200px;
                background: lightgreen;
                margin-bottom: 100px;
            }
            
            #div2 {
                width: 200px;
                height: 200px;
                background: lightblue;
                margin-top: 100px;
            }
        </style>
    </head>

    <body>
        <h2>BFC與IFC</h2>
            <div id="div1">div1
            </div>
            <div id="div2">div2
            </div>
    </body>

</html>
View Code

如果此時將腳本的div1與div2同時變成BFC環境，修改的css如下：

            #div1 {
                width: 200px;
                height: 200px;
                background: lightgreen;
                margin-bottom: 100px;
                overflow: hidden;
            }
            
            #div2 {
                width: 200px;
                height: 200px;
                background: lightblue;
                margin-top: 100px;
                overflow: hidden;
            }

執行時會發現效果還是一樣，此時的div1與div2都是BFC上下文，但是要求的是：外邊距將不再與上下文之外的元素摺疊，按照要求，我們應該將div1與div2放在不同的上下文中，修改後的腳本如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BFC與IFC</title>
        <style type="text/css">
            #div1 {
                width: 200px;
                height: 200px;
                background: lightgreen;
                margin-bottom: 100px;
            }
            
            #div2 {
                width: 200px;
                height: 200px;
                background: lightblue;
                margin-top: 100px;
            }
            #div2-outer
            {
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <h2>BFC與IFC</h2>
        <div id="div1">div1
        </div>
        <div id="div2-outer">
            <div id="div2">div2
            </div>
        </div>
    </body>
</html>

運行結果如下：

 d)、元素會一個接一個地被垂直放置，它們的起點是一個包含塊的頂部（文字不會環繞佈局）

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BFC</title>
        <style>
            .div1 {
                border: 3px solid blue;
                width: 300px;
            }
            .cls1 {
                width: 100px;
                height: 100px;
                background: lightblue;
                margin: 5px;
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div id="div11" class="cls1">div11</div>
            <p>
            扁粉菜（BFC）是安陽名吃，製作原料和工藝都很簡單。扁粉菜是大鍋菜，以扁粉條為主原料；熬一大鍋的高湯，將扁粉條下鍋煮熟，再燴入豆腐片，豬血片和青菜。盛上一碗加點辣椒，配上熱乎乎的油餅，吃上一口，怎一個“爽”字了得！扁粉菜最有營養的算是高湯和豬血片了，而且可以續湯，雖然它是粗食，但是便宜，實惠，營養，所以大家都愛吃
            </p>
        </div>
    </body>
</html>
View Code

沒有BFC時的運行結果：

從運行結果可以看出div與p還是重疊了，只是文字被擠出，和前面提到的重疊是同一個意思，將p元素觸發BFC後的效果如下圖所示：

            p{
                overflow: hidden;
            }

運行結果：

1.4、IE與Layout

Layout是 IE 瀏覽器渲染引擎的一個組成部分。在 IE 瀏覽器中，一個元素要麼自己對自身的內容進行組織和計算大小， 要麼依賴於包含塊來計算尺寸和組織內容，hasLayout 與 BFC 有很多相似之處。在IE中，元素使用“佈局”概念來控制尺寸和定位，分為擁有佈局和沒有佈局兩種情況，擁有佈局的元素由它控制本身及其子元素的尺寸和定位，而沒有佈局的元素則通過父元素（最近的擁有佈局的祖先元素）來控制尺寸和定位，而一個元素是否擁有佈局則由 hasLayout 屬性告知瀏覽器，它是個布爾型變數，true 代表元素擁有佈局，false 代表元素沒有佈局。簡而言之，hasLayout 只是一個 IE 下專有的屬性，hasLayout 為 true 的元素瀏覽器會賦予它一系列的效果。
特別註意的是，hasLayout 在 IE 8 及之後的 IE 版本中已經被拋棄，所以在實際開發中只需針對 IE 8 以下的瀏覽器為某些元素觸發 hasLayout。

出發IE下的haslayout方法：

display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)
min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，僅用於塊級元素)
overflow-x: (除 visible 外任意值，僅用於塊級元素)
overflow-y: (除 visible 外任意值，僅用於塊級元素)
position: fixed

綜合前面的內容清除浮動的寫法如下：

.floatfix{
*zoom:1;  /*在舊版本的IE瀏覽器縮放大小，觸發haslayout*/
}
.floatfix:after{
content:"";
display:table;
clear:both;
}

除了BFC還有IFC,GFC,FFC,是不同格式化上下文（Formatting Context）的簡稱，GFC是網格格式化上下文（Grid Formatting Context），FFC是彈性盒格式化上下文（Flex Formatting Context），FKC是開封菜的意思:）。

二、定位

使用css佈局position非常重要，他的語法如下：

position：static | relative | absolute | fixed | center | page | sticky
預設值：static，center、page、sticky是CSS3中新增加的值。

2.1、static
可以認為靜態的，預設元素都是靜態的定位，對象遵循常規流。此時4個定位偏移屬性不會被應用，也就是使用left，right，bottom，top將不會生效。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>定位</title>
        <style type="text/css">
            #div1{
                width: 200px;
                height: 200px;
                background: lightblue;
                left:100px;
                top:100px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
        </div>
    </body>
</html>
View Code

運行結果：

定義偏移並未起作用。

2.2、relative

相對定位，對象遵循常規流，並且參照自身在常規流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>相對定位</title>
        <style type="text/css">
            div {
                width: 200px;
                height: 200px;
                background: lightblue;
                margin: 10px;
            }
            #div1 {
                position: relative;  /*相對定位*/
                left:30px;  /*在自己原有位置上相對左邊偏移30像素*/
                bottom: -30px;
                background: lightgreen;
            }
        </style>
    </head>
    <body>
        <div id="div1">div1
        </div>
        <div id="div2">div2
        </div>
    </body>
</html>

運行結果：

2.3、absolute

絕對定位，對象脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素，其margin不與其他任何margin摺疊。

元素定位參考的是離自身最近的定位祖先元素，要滿足兩個條件，第一個是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果沒有則選擇body為對照對象。第二個條件是要求祖先元素必須定位，通俗說就是position的屬性值為非static都行。

示例代碼：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>絕對定位</title>
        <style type="text/css">
            div {
                border: 2px solid darkturquoise;
                padding: 10px;
            }
            
            #div1 {
                width: 400px;
                height: 400px;
            }
            
            #div2 {
                width: 300px;
                height: 300px;
            }
            
            #div3 {
                width: 200px;
                height: 200px;
                position: absolute;
                right: 5px;
                top: 5px;
            }
        </style>
    </head>

    <body>
        <div id="div1"> div1
            <div id="div2"> div2
                <div id="div3">div3
                </div>
            </div>
        </div>

    </body>

</html>

運行結果：

 因為div3使用absolute絕對定位，它的參考對象是父元素div2,div1都不滿足條件，因為兩者都沒有進行定位，是預設的定位值static，根據約定最終找到body，所以會出現在頁面的右上角。此時如果想讓div3的參照對象為div1，則可以修改代碼為：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>絕對定位</title>
        <style type="text/css">
            div {
                border: 2px solid darkturquoise;
                padding: 10px;
            }
            #div1 {
                width: 400px;
                height: 400px;
                position: relative;  /*相對定位*/
            }
            #div2 {
                width: 300px;
                height: 300px;
            }
            #div3 {
                width: 200px;
                height: 200px;
                position: absolute;
                right: 5px;
                bottom: 5px;
            }
        </style>
    </head>
    <body>
        <div id="div1"> div1
            <div id="div2"> div2
                <div id="div3">div3
                </div>
            </div>
        </div>
    </body>
</html>


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTML5 學習筆記（一）——HTML5概要與新增標簽
    目錄 一、HTML5概要 1.1、為什麼需要HTML5 1.2、什麼是HTML5 1.3、HTML5現狀及瀏覽器支持 1.4、HTML5特性 1.5、HTML5優點與缺點 1.5.1、優點 1.5.2、缺點 1.6、HTML5效果展示 1.7、HTML5學習與開發工具 1.7.1、基礎要求 1.7. ...
  • Echarts3 力導向佈局圖
    因為項目需要，要求實現類似力導圖效果的圖，我就瞄上了echarts。 註意事項1：由於我的項目要部署到內網，所以js文件要在本地，網上大多力導圖都是echarts2的，而其又依賴zrender基礎庫，下載的echarts2是2.2.7版本，但是去zrender官網下載的2.1版本，用起來說版本最低要 ...
  • 我的微信小程式入門踩坑之旅
    前言 更好的閱讀體驗請：我的微信小程式入門踩坑之旅 小程式出來也有一段日子了，剛出來時也留意了一下。不過趕上生病，加上公司里也有別的事，主要是自己犯懶，就一直沒做。這星期一，趕緊趁著這股熱乎勁，也不是很忙，終於磨磨唧唧的寫了個小demo，（當然還有好多介面沒有使用）。 預計閱讀時間：5min 正文 ...
  • 前端測試框架 jasmine 的使用
    最近的項目在使用AngulaJs,對JS代碼的測試問題就擺在了面前。通過對比我們選擇了 Karma + jasmine ,使用 Jasmine做單元測試 ，Karma 自動化完成，當然瞭如果使用 Karma + jasmine 前提是必須安裝 Nodejs。 安裝好 Nodejs ，使用 npm 安 ...
  • 正則表達式解析URL
    正則表達式： 匹配（說明）： 使用說明： (1)、地址必須以http/https/ftp/ftps開頭； (2)、地址不能包含雙位元組符號或非鏈接特殊字元。 ...
  • 讀高性能JavaScript編程 第二章 讓我知道了代碼為什麼要這樣寫
    代碼為什麼要這樣寫？ 而不這樣？ 很明顯 我們都知道第一個性能要比第二個好，為什麼呢？ 首先要瞭解 js引擎的 Data Access 數據訪問。這裡只說 非優化的js引擎。 1、訪問 Literal values 直接量 eg：字元串，數字，布爾值，對象，數組，函數，正則表達式，具有特殊意義的空值 ...
  • bootstrapValidator 版本差異問題導致的submitHandler失效問題
    我用過的兩個版本： v0.5.2-dev,0.4.5 這裡針對於提交方法進行說明一下，如下代碼： ...
  • jQuery Wheel 環形菜單插件5種效果演示
    很酷的菜單-jQuery Wheel 環形菜單插件5種效果演示 線上預覽 下載地址 實例代碼 <div class="container"> <!-- Top Navi --> <div class="header"> <h1>jQuery Wheel 環形菜單插件 Demo 1: Default ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類