【Hello CSS】第六章-文檔流與排版

  • 作者：陳大魚頭
  • github： KRISACHAN

正常流

什么是“正常流”？ 其實就是我們日常所說的“文檔流”。 在W3C官方文檔里對應的是“normal flow”。

正常流的盒子屬于格式化上下文(FC)，在CSS2.2中可以是表格、塊或內聯。 在CSS3中引入了flex跟grid，當然以后會引入得更多。

塊級盒子(block-level boxes) 與創建 塊級格式化上下文(BFC) 有關；

行內級盒子(inline-level boxes) 與創建 行內級格式化上下文(IFC) 有關。

BFC

魚頭注：在之前的文章中有介紹過如何生成一個BFC，本章便不再累述。

根據W3C上的解釋：

浮動、絕對定位元素、塊容器（例如inline-blocks、table-cells、and table-captions）都不是塊盒子。除了overflow以外的visible（除非該值已經傳播到了視口）為其內容建立新的BFC。

表現是什么？

表現就是在包含塊內一個盒子一個盒子不重疊地垂直排列，兩個兄弟盒子直接的垂直距離由margin決定。浮動也是如此（雖然有可能兩個盒子的距離會因為floats而變小），除非該盒子再創建一個新的BFC。

簡單來說，BFC就是一個獨立不干擾外界也不受外界干擾的盒子啊(/ω＼)

IFC

魚頭注：Mmmmm，BFC還是相對好理解，IFC比較復雜，W3C上所占的篇幅也比BFC多得多的。

簡單來說，跟BFC表現不一樣的盒子就是IFC了(*?ω?)。

跟BFC不一樣，IFC內的盒子會從包含塊的頂部一個接著一個地水平排列。這些盒子會考慮水平margin，border跟padding。垂直對齊的方式也略有復雜。然后，包含形成一條線的框的矩形區域稱為線盒（line box）。

線盒（line box）的寬度：由浮動情況跟它所在的包含塊決定。

線盒（line box）的高度：由line-height的計算結果決定。

基線（baseline）

線盒（line box） 的高度由line-height的計算結果決定。

line-height的定義就是線盒（line box）內兩基線（baseline）（W3C原文）的間距。

vertical-align的默認值就是基線。

字母x

你們還記得讀書時用的英語作業本嗎？

如上圖所示，我們看到小寫字母x的位置，它的上下邊緣就是我們的基線（baseline），但下邊緣才是我們日常使用的屬性值。順便一提，CSS單位ex便是指的這個字母x的高度。

如何理解IFC

自從翻了CSS的發展史之后，了解了CSS的誕生背景之后，其實很多東西理解起來就輕松了。IFC之所以比BFC復雜，原因就在于很多非規律的成分，在西文了，我們可以簡單粗暴的理解為英語作業本的表現，但是在writing-mode不同，文字表現不同的各個國家，IFC的表現也會有差異。

當然以上都是我的個人理解，如果有更科學更標準的理解方式或者不同的想法，可以加魚頭微信“krisChans95”來探討。

層疊上下文與層疊順序

我們首先來看一張很著名的圖

上面便是在同樣的上下文中，元素的層疊規則（CSS3以后的除外，那規則會比較復雜）。元素的 z-index 值只在父級層疊上下文中有意義。級層疊上下文被自動視為父級層疊上下文的一個獨立單元。

文檔中的層疊上下文由滿足以下任意一個條件的元素形成：

  • 根元素 (HTML),
  • z-index 值不為 auto 的 絕對/相對定位，
  • 一個 z-index 值不為 auto 的 flex 項目 (flex item)，即：父元素 display: flex|inline-flex，
  • opacity 屬性值小于 1 的元素，
  • transform 屬性值不為 none 的元素，
  • mix-blend-mode 屬性值不為 "normal"的元素，
  • filter值不為 none 的元素，
  • perspective值不為 none 的元素，
  • isolation 屬性被設置為 isolate 的元素，
  • position: fixed
  • 在 will-change 中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值
  • -webkit-overflow-scrolling 屬性被設置 touch 的元素

新時代的布局

Flex

我想到如今，應該很少人會沒寫過或者沒了解過 Flex （不知道的可以翻閱MDN）。

這個是 CSS 史上第一個以 start-end 來定義方向的屬性，這是一個可伸縮的布局模型。

一個設有 display:flex 或 display:inline-flex 的元素是一個伸縮容器，伸縮容器的子元素被稱為為伸縮項目，這些子元素使用伸縮布局模型來排版。

語法如下：

display: flex/inline-flex;
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
復制代碼

flex 屬性可以指定1個，2個或3個值。

單值語法: 值必須為以下其中之一:

  • 一個無單位 數(<number>) : 它會被當作<flex-grow>的值。
  • 一個有效的 寬度(width) 值: 它會被當作 <flex-basis>的值。
  • 關鍵字 none、 auto, 或 initial 。

雙值語法: 第一個值必須為一個無單位數，并且它會被當作 <flex-grow> 的值。第二個值必須為以下之一：

  • 一個無單位數：它會被當作 <flex-shrink> 的值。
  • 一個有效的寬度值: 它會被當作 <flex-basis> 的值。

三值語法:

  • 第一個值必須為一個無單位數，并且它會被當作 <flex-grow> 的值。
  • 第二個值必須為一個無單位數，并且它會被當作 <flex-shrink> 的值。
  • 第三個值必須為一個有效的寬度值， 并且它會被當作 <flex-basis> 的值。

Grid

我印象中第一次接觸Grid布局的時候，開個Chrome的實驗性功能也就只能能支持個repeat(4, 200px)，但如今已經除了IE，其他瀏覽器差不多也是Full support了(如果你還不了解這個布局模型，可以翻閱MDN)。

在這里順便提一下，Flex是一維布局，Grid是二維布局。意思就是Flex只能同時在一個方向進行作用，而Grid卻可以在縱橫兩個方向同時工作。

語法如下：

display: grid/inline-grid;
gird: <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
復制代碼

我們來看看 grid 所支持的一些 “奇怪” 的特性：

命名空間：

魚頭覺得 grid 布局中最有趣的功能就是命名空間了，我們可以看看以下示例：

首先是第一種 網格線命名：

<style>html,body,div {margin: 0;padding: 0;}.grid {display: grid;width: 420px;background: #e4d6ba;margin: 1em auto;}.g-namespace {height: 400px;grid-template-columns: [col1] 100px [col2] auto [col3] 100px;grid-template-rows: [rows1] 25% [rows2] 100px [rows3] auto [rows4] 60px}.grid > div {outline: 1px dotted;}
</style>
<body><div class="grid g-namespace"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</body>
復制代碼

效果如下：

第二種 真命名空間布局：

<style>html,body,div {margin: 0;padding: 0;}.grid {display: grid;width: 400px;height: 400px;margin: 1em auto;}.g-namespace {grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;grid-template-areas: "頭部 頭部 頭部" "左邊 中間 右邊" "底部 底部 底部";}.頭部 {grid-area: 頭部 / 頭部 / 頭部 / 頭部;background: #32CD32;}.底部 {grid-area: 底部 / 底部 / 底部 / 底部;background: #FFD700;}.左邊 {grid-area: 左邊 / 左邊 / 左邊 / 左邊;background: #EE82EE;}.右邊 {grid-area: 右邊 / 右邊 / 右邊 / 右邊;background: #FF7F50;}
</style>
<body><div class="grid g-namespace"><div class="頭部"></div><div class="左邊"></div><div class="右邊"></div><div class="底部"></div></div>
</body>
復制代碼

效果如下：

通過上面兩個示例，我們可以發現Grid布局的二維性可以滿足我們日常很多的布局要求，當然，第一眼看語法不免有點懵，但是熟悉之后，基本日常需求中的二維布局我們都能依賴它來完成。

一些常用的靈活尺寸

屬性定義
fr可伸縮長度單位，網格容器中可用空間的一等份。
auto自由分配，由具體情況決定。
minmax()定義了一個長寬范圍的閉區間。
fit-content()同等于min(maximum size, max(minimum size, argument))

以上屬性對比結果如下：

源碼在我codepen中，大家可以自行去對比： codepen.io/krischan77/…

后記

本章的內容要深究起來是非常龐大的，魚頭我在準備內容的時候有想過是不是要另外再開個布局的系列去分享，但是我想把本文當成是一個關鍵字集合來供自己以及有需要的人來做目錄也是極好的。我認為CSS中最難的部分就是布局了，雖然W3C本身提供了很多的屬性以及規范來處理這些布局問題的，但是涉及到了現實的項目，更多時候是錯綜復雜的，但是隨著CSS邏輯屬性的變化，以及各類新布局系統的出現，相信以后的布局會簡單得多。

本章內容就這么草草結束了，關于上面提到的，或者沒有提到的與之相關的，以后有機會魚頭會新開個系列來分享。當然如果看到這里的你有任何布局上的見解或問題也歡迎來找魚頭探討。

參考資料：

聊聊CSS中的層疊相關概念

CSS Conf -《新時代CSS布局》學習總結

新時代CSS布局

CSS世界

CSS Display Module Level 3

CSS Flexible Box Layout Module Level 1

CSS Grid Layout Module Level 1

CSS Box Alignment Module Level 3

寫給自己看的display: grid布局教程

寫給自己看的display: flex布局教程

CSS深入理解流體特性和BFC特性下多欄自適應布局

塊格式化上下文

Normal flow

css中的IFC

【Hello CSS】系列

【Hello CSS】是以CSS基礎概念為主題的系列文章，旨在幫助大家更深刻地了解并且提高CSS在各位開發者心目中的地位。由于魚頭我水平有限，文筆有限，如果各位在文章中發現有任何不合理，不正確的地方，還煩不吝指出，我會非常感謝的；如果通過文章有任何想法或疑問，也希望各位能積極留言，我們互相探討；如果通過本系列文章有所收獲，這就讓魚頭我喜不自勝了！



如果你也喜歡CSS，喜歡探討技術，或者對本文，本系列有任何的意見或建議，你可以掃描下方二維碼，關注微信公眾號“魚頭的Web海洋”，隨時與魚頭互動。歡迎！衷心希望可以遇見你。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/448810.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/448810.shtml
英文地址，請注明出處：http://en.pswp.cn/news/448810.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

創建型模式---工廠模式

創建型模式---工廠模式

工廠模式 在工廠設計模式中&#xff0c;客戶端可以請求一個對象&#xff0c;而無需要知道這個對象來自哪里&#xff0c;也就是使用哪個類來生成這個對象。工廠背后的思想是簡化對象的創建。與客戶端自己基于類實例化直接創建對象相比&#xff0c;基于一個中心化函數來實現&…
閱讀更多...
OpenCL memory object 之 Global memory (2)

OpenCL memory object 之 Global memory (2)

當我們用clCreateBuffer, clCreateImage創建OpenCL memory object時候&#xff0c;我們需要輸入一個flag參數&#xff0c;這個參數決定memory object的位置。 cl_mem clCreateBuffer (cl_context context, cl_mem_flags flags, size_t size, void *host_ptr, cl_int *errc…
閱讀更多...
數據結構進階篇-跳表

數據結構進階篇-跳表

大家想必都知道&#xff0c;數組和鏈表的搜索操作的時間復雜度都是O(N)的&#xff0c;在數據量大的時候是非常耗時的。對于數組來說&#xff0c;我們可以先排序&#xff0c;然后使用二分搜索&#xff0c;就能夠將時間復雜度降低到O(logN)&#xff0c;但是有序數組的插入是一個O…
閱讀更多...
查看本機ssh公鑰，生成公鑰

查看本機ssh公鑰，生成公鑰

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 查看ssh公鑰方法&#xff1a; 1.通過命令窗口&#xff1a;打開你的git bash 窗口&#xff0c;進入.ssh目錄&#xff1a;cd ~/.ssh&…
閱讀更多...
如何實現動態水球圖 --》 echars結合echarts-liquidfill實現

如何實現動態水球圖 --》 echars結合echarts-liquidfill實現

1&#xff09;項目中作為項目依賴&#xff0c;安裝到項目當中(注意必須要結合echars) npm install echarts vue-echarts --save npm install echarts-liquidfill --save 2&#xff09;在需要使用水晶球的組件里引入liquidFill.js import echarts-liquidfill/src/liquidFill.js;…
閱讀更多...
OpenCL memory object 之選擇傳輸path

OpenCL memory object 之選擇傳輸path

對應用程序來說&#xff0c;選擇合適的memory object傳輸path可以有效提高程序性能。 下面先看一寫buffer bandwidth的例子&#xff1a; 1. clEnqueueWriteBuffer()以及clEnqueueReadBuffer() 如果應用程序已經通過malloc 或者mmap分配內存&#xff0c;CL_MEM_USE_HOST_PTR是個…
閱讀更多...
struts入門超詳細

struts入門超詳細

https://blog.csdn.net/yerenyuan_pku/article/details/52652262轉載于:https://www.cnblogs.com/liuna369-4369/p/10870873.html
閱讀更多...
RabbitMQ 從入門到精通 （一）

RabbitMQ 從入門到精通 （一）

目錄 1. 初識RabbitMQ2. AMQP3.RabbitMQ的極速入門4. Exchange(交換機)詳解4.1 Direct Exchange4.2 Topic Exchange4.3 Fanout Exchange5. Message 消息1. 初識RabbitMQ RabbitMQ 是一個開源的消息代理和隊列服務器&#xff0c;用來通過普通協議在完全不同的應用之間共享數據&a…
閱讀更多...
接收并解析消息體傳參、解析 json 參數

接收并解析消息體傳參、解析 json 參數

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1.場景&#xff1a;postman 發送了一個 post 請求&#xff0c;如下&#xff1a; 2. 解析方式為用一個 vo 對象來接收 json。把 json 中的…
閱讀更多...
OpenCL memory object 之 傳輸優化

OpenCL memory object 之 傳輸優化

首先我們了解一些優化時候的術語及其定義&#xff1a; 1、deferred allocation&#xff08;延遲分配&#xff09;&#xff0c; 在第一次使用memory object傳輸數據時&#xff0c;runtime才對memory object真正分配空間。 這樣減少了資源浪費&#xff0c;但第一次使用時要慢一些…
閱讀更多...
VBS使文本框的光標位于所有字符后

VBS使文本框的光標位于所有字符后

有時候在文本框里會顯示一部分提示信息&#xff0c;用戶在這些提示信息后面輸入文本&#xff0c;但是將焦點設置于文本框后&#xff0c;光標總是在文本框的最前面&#xff0c; 用戶輸入的時候需要按"-->"鍵將光標移到最后才能輸入&#xff0c;這樣的操作很不爽。我…
閱讀更多...
記錄ionic 最小化應用時所遇的問題

記錄ionic 最小化應用時所遇的問題

ionic3與ionic4最小化插件安裝不一樣&#xff1a; ionic3安裝方法&#xff1a; $ ionic cordova plugin add cordova-plugin-appminimize $ npm install --save ionic-native/app-minimize4 并在app.module.ts中 注入依賴&#xff1a; import { AppMinimize } from ionic-nativ…
閱讀更多...
解決 --- Docker 啟動時報錯：iptables:No chain/target/match by the name

解決 --- Docker 啟動時報錯：iptables:No chain/target/match by the name

問題&#xff1a;jenkins的docker containner啟動失敗&#xff0c;報錯&#xff1a;failed programming external connectivity … iptables: No chain/target/match by that name” docker 服務啟動的時候&#xff0c;docker服務會向iptables注冊一個鏈&#xff0c;以便讓dock…
閱讀更多...
AMD OpenCL 大學課程

AMD OpenCL 大學課程

AMD OpenCL大學課程是非常好的入門級OpenCL教程&#xff0c;通過看教程中的PPT&#xff0c;我們能夠很快的了解OpenCL機制以及編程方法。下載地址&#xff1a;http://developer.amd.com/zones/OpenCLZone/universities/Pages/default.aspx 教程中的英文很簡單&#xff0c;我相信…
閱讀更多...
第一篇 計算機基礎

第一篇 計算機基礎

1.什么是編程語言 python和中文、英語一樣、都是一門語言&#xff0c;只要是語言&#xff0c;其實就庫看成是一種事物與另一種事物溝通的介質。python屬于編程語言&#xff0c;編程語言是程序員與計算機之間溝通的介質&#xff1b;中文和英文則是人與人之間溝通的介質。 2.什么…
閱讀更多...
47.QT-QChart之曲線圖,餅狀圖,條形圖使用

47.QT-QChart之曲線圖,餅狀圖,條形圖使用

1.使用準備 在pro中, 添加QT charts 然后在界面頭文件中添加頭文件并聲明命名空間,添加: #include <QtCharts> QT_CHARTS_USE_NAMESPACE 2.QChart之曲線圖 繪制曲線圖需要用到3個類 QSplineSeries: 用于創建有由一系列數據組成的曲線.類似的還有QPieSeries(餅圖數據). Q…
閱讀更多...
Docker 部署應用、jar 工程 docker 方式部署

Docker 部署應用、jar 工程 docker 方式部署

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1. 把要部署的工程打成一個jar包。&#xff08;我的工程叫 gentle &#xff09; 打 jar 的方法&#xff1a;超簡單方法&#xff1a; Int…
閱讀更多...
流浪不是我的初衷 ... ...

流浪不是我的初衷 ... ...

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 或許&#xff0c;我從來就是一個習慣沉默的人 ... 或許&#xff0c;我從來就不善于傾述 ... 會有難過的時候&#xff0c;會有覺得累的…
閱讀更多...
第二階段沖刺（2）

第二階段沖刺（2）

1、整個項目預期的任務量 &#xff08;任務量 所有工作的預期時間&#xff09;和 目前已經花的時間 &#xff08;所有記錄的 ‘已經花費的時間’&#xff09;&#xff0c;還剩余的時間&#xff08;所有工作的 ‘剩余時間’&#xff09; &#xff1b; 所有工作的預期時間&#…
閱讀更多...
VS2008+OpenCL環境配置

VS2008+OpenCL環境配置

1. 配置.cl文件支持: 1.1. 打開VS2008&#xff0c; 工具->選項->文本編輯器->文件擴展名&#xff0c;添加一個新的擴展名&#xff0c;指定編輯器為Microsoft Visual C 。這樣在OpenCL文件中就能顯示C的語法高亮了。 1.2. 配置OpenCL語法高亮 - 打開目錄~\NVIDIA Corpo…
閱讀更多...
最新文章

Copyright @ 2022~2023