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

来源:http://www.cnblogs.com/SeeYouBug/archive/2016/12/07/6138563.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
更多相關文章
  • LightGallery.js – 功能齊全的 Javascript Lightbox
    Lightgallery是一個輕量級的模塊化、響應式的燈箱畫廊，它允許您創建美麗的圖像和視頻畫廊。藉助縮略圖插件的幫助，Lightgallery 允許您創建動畫縮略圖畫廊。 它支持觸摸屏設備上滑動導航以及桌面設備的滑鼠拖動，還允許用戶瀏覽縮略圖和原圖之間通過滑動手指或滑鼠拖動。 ...
  • 不懂CSS也能定製博客界面!
    之前沒想過定製博客界面,畢竟CSS,HTML什麼的都不懂,不過看了這篇文章分分鐘搞定: 【詳細圖解】一步一步教你自定義博客園（cnblog）界面 我是基於模板BlueSky做了些改動,先看修改前後的效果: 修改前: 修改後: 1先動手!什麼都別管! 在我的博客-管理-設置-頁面定製CSS代碼,只添加 ...
  • CORS基礎要點：關於dataType、contentType、withCredentials
    事實上，面試時我喜歡問跨域，因為多數開發者都知道它並且常用，而我希望能從面試者的回答中知道他在這個問題的深入程度，進一步看看面試者研究問題的思維方式及鑽研精神，然而確實難到了很多人，當然這也不是面試通過的必要條件；這些都是題外話了，呵呵~~~，這裡也不炒冷飯如何實現跨域，也不是分析CORS的原理，因 ...
  • bootstrapPaginator設置同步會翻2頁的小坑
    因為需要用到post的返回值在做後面的決定.不想嵌套在回調函數中.網上找了一下.設置為同步 $.ajaxSetup( { async: false }); 結果bootstrap的翻頁組件就出了bug.點下一頁就會翻2頁...... 去掉就好了.看來只能寫到回調函數裡面了. ...
  • CSS定位position
    position選項來定義元素的定位屬性，選項有5個可選值：static、relative、absolute、fixed、inherit 屬性值為relative、absolute、fixed時top | left | right| bottom | z-index才能起作用。 static（預設值 ...
  • js生成和下載二維碼
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text ...
  • form表單提交和ajax表單提交，關於移動端如何通過軟鍵盤上的【搜索】和【前進】進行提交操作
    【文章來源】由於自己對於form研究甚少，所以一直用的都是AJAX進行提交，這次後臺提出要用form提交，順便深入研究一下；之前在做表單的時候，發現input可以通過設置不同的type屬性，調用不同的移動端軟鍵盤，但是對於軟鍵盤中的【搜索】和【前往】不知道怎麼進行控制 【form 和 ajax 區別 ...
  • 浮動導致佈局變動
    float: none | left | right | inherit none:預設值，即不浮動 left：向頁面的左側浮動 right：向頁面的右側浮動 inherit：繼承父元素的float值（一般不建議使用inherit，ie不支持這個選項） 重點： 1、對於塊級元素來說，在不設置寬度的情 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類