重學前端學習筆記（二十五）--CSS的正常流

toddmark 發布于2019-08-23 17:51 / 2300人閱讀

摘要：一正常流的行為正常流的排版行為依次排列，排不下了換行。在正常流基礎上，有相關規則，使得一些盒占據了正常流需要的空間，可以把理解為文字環繞。

筆記說明

重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，郵箱：kaimo313@foxmail.com。

一、正常流的行為

正常流的排版行為：依次排列，排不下了換行。

1.1、float

在正常流基礎上，有 float 相關規則，使得一些盒占據了正常流需要的空間，可以把 float 理解為文字環繞。

1.2、vertical-align

有 vertical-align 相關規則規定了如何在垂直方向對齊盒。基線、文字頂 / 底、行頂 / 底等概念。

1.3、margin 折疊

1、參考文章：CSS中margin折疊問題記錄

2、塊級格式上下文Block Formatting Context（簡稱 BFC）

Web頁面的一種布局方式，通俗點說，也是指頁面上一個渲染區域，里面的元素按文檔流中的順序垂直排列，并且發生垂直方向上的 margin折疊，同時這個區域內的元素布局不會對外面的元素有任何影響。

3、產生一個BFC：當元素滿足一下任何一個條件

float 屬性取值不是 none

overflow 屬性取值不是 visible

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

position 的值不為 static 或 relative 中的任何一個

4、BFC 內部垂直方向上的 margin折疊

可以用https://codepen.io/pen/測試：


     box1
     box2
     box3

*{
     margin: 0;
     padding: 0;
}
#father{
     width: 2000px;
     height: 400px;
     background: #0016d9;
}
#first-child{
     margin-top: 20px;
     background: chocolate;
     width: 60px;
     height: 60px;
}
#second-child{
     background: chartreuse;
     width: 60px;
     height: 60px;
     margin-bottom: 20px;
}
#three-child{
     margin-top:40px;
     background: fuchsia;
     width: 60px;
     height: 60px;
}

這段代碼渲染出來的結果：

可以看出 box1 距離 body 上邊 20px，而 box2 和 box3 之間距離 40px，就是因為發生了折疊。body就是一個BFC，里面元素會發生margin折疊。

5、折疊現象去除

/*  添加overflow: hidden; */
#father{
     overflow: hidden;
}

這樣就可以得到我們想要的效果：

二、正常流的原理

在 CSS 標準中，規定了如何排布每一個文字或者盒的算法，這個算法依賴一個排版的當前狀態，CSS 把這個當前狀態稱為格式化上下文（formatting context）。

2.1、排版過程

格式化上下文 + 盒 / 文字 = 位置

formatting context + boxes/charater = positions

2.2、塊級盒和行內級盒排版

排版需要分別為它們規定了塊級格式化上下文和行內級格式化上下文。

1、塊級格式化上下文順次排列元素：

2、行內級格式化上下文順次排列元素：

3、正常流中的一個盒或者文字排版，需要分成三種情況處理

當遇到塊級盒：排入塊級格式化上下文。

當遇到行內級盒或者文字：首先嘗試排入行內級格式化上下文，如果排不下，那么創建一個行盒，先將行盒排版（行盒是塊級，所以到第一種情況），行盒會創建一個行內級格式化上下文。

遇到 float 盒：把盒的頂部跟當前行內級上下文上邊緣對齊，然后根據 float 的方向把盒的對應邊緣對到塊級格式化上下文的邊緣，之后重排當前行盒。

三、正常流的使用技巧 3.1、等分布局問題

1、采用百分比寬度解決


    
    
    

.inner {
    width:33.33%;
    height:300px;
    display:inline-block;
    outline:solid 1px blue;
}

2、上面 1 的代碼每個 div 并非緊挨，中間有空白，因為為了代碼格式加入的換行和空格被 HTML 當作空格文本，跟 inline 盒混排了的緣故。

3、上面 2 的做法影響代碼可讀性

/* 解決方案：設置 outer 中的字號為 0 */
.inner {
    width:33.33%;
    height:300px;
    display:inline-block;
    outline:solid 1px blue;
    font-size:30px;
}
.outer {
    font-size:0;
}

4、在某些瀏覽器中，因為像素計算精度問題，還是會出現換行

/*  解決方案：給 outer 添加一個特定寬度 */
.inner {
    width:33.33%;
    height:300px;
    display:inline-block;
    outline:solid 1px blue;
}
.outer {
    width:101px
}

5、這個代碼在某些舊版本瀏覽器中會出現換行

/* 解決方案：給最后一個 div 加上一個負的右 margin */
.outer {
    width:101px
}

.inner {
    width:33.33%;
    height:300px;
    display:inline-block;
    outline:solid 1px blue;
}

.inner:last-child {
    margin-right:-5px;
}

3.2、自適應寬

自適應寬（一個元素固定寬度，另一個元素填滿父容器剩余寬度）是個經典的布局問題。

1、如何使用正常流來解決？

.fixed {
    width:200px;
}
.fixed, .auto {
    height:300px;
    outline:solid 1px blue;
}

2、利用負 margin

.fixed {
    display:inline-block;
    vertical-align:top;
}
.auto {
    margin-left:-200px;
    width:100%;
    display:inline-block;
    vertical-align:top;
}

這樣做會導致 auto 中的內容位置不對，還需要使用 padding 把內容擠出來，最終完整代碼如下：

.fixed {
    display:inline-block;
    vertical-align:top;
}
/* 給 auto 添加 padding-left 和 box-sizing 兩個屬性 */
.auto {
    margin-left:-200px;
    padding-left:200px;
    box-sizing:border-box;
    width:100%;
    display:inline-block;
    vertical-align:top;
}

個人總結

好像BFC是前端面試題的常客。。。

云服務器 GPU云服務器二十五第二十五學習前端的網站前端css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104249.html

重學前端學習筆記（二十五）--CSS的正常流

摘要：一正常流的行為正常流的排版行為依次排列，排不下了換行。在正常流基礎上，有相關規則，使得一些盒占據了正常流需要的空間，可以把理解為文字環繞。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯...

dcr309duan 2019-08-30 11:00 評論0 收藏0
重學前端學習筆記（二十五）--CSS的正常流

摘要：一正常流的行為正常流的排版行為依次排列，排不下了換行。在正常流基礎上，有相關規則，使得一些盒占據了正常流需要的空間，可以把理解為文字環繞。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯...

leap_frog 2019-08-02 15:10 評論0 收藏0
重學前端學習筆記（十五）--瀏覽器工作解析（五）

摘要：五繪制把任何位圖合成到最終位圖的操作稱為繪制。個人總結這一節主要講解了瀏覽器中的位圖操作部分，包括渲染合成和繪制三個部分。作業用實現一個玩具瀏覽器。。。。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音...

iliyaku 2019-08-02 16:17 評論0 收藏0
重學前端學習筆記（十五）--瀏覽器工作解析（五）

摘要：五繪制把任何位圖合成到最終位圖的操作稱為繪制。個人總結這一節主要講解了瀏覽器中的位圖操作部分，包括渲染合成和繪制三個部分。作業用實現一個玩具瀏覽器。。。。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音...

dongxiawu 2019-08-26 13:46 評論0 收藏0