前言

我們很小的時候什么都不知道，于是什么都會是別人對我們解釋，也許是父母，也許是師長，但是隨著年齡的增大，我們會逐步形成自己的世界觀，并且當我們有小孩時候，他會問我們很多問題，我們會為他解答，那么我們的答案有何而來呢？

我們的答案來自我們自己的世界，來自我們自己形成的世界觀！

我們初學CSS時候什么也不知道，于是我們從書上、博客上獲取了很多知識，那么我們是不是也應該形成自己的世界觀呢？我們碰到的問題是不是都可以用我們形成的世界觀解釋呢？

以上是我最近思考的問題，我覺得我們有必要形成自己的世界觀了，形成世界觀才是長大的標志，我形成的世界觀可以不堅固，可以很小但是他必須存在，你們的也必須存在。

我們需要捍衛我們的世界觀，我們需要建造我們的世界觀，當我們的世界足夠大，足夠發達的時候，我們就會被稱為高手啦，哇哈哈！！！

師尊，我們的頁面是哪里來的？

在我們的瀏覽器中輸入了一個url后，我們的服務器便會返回一堆字符串給我們，這個字符串就是傳說中html。

從得到html字節開始，dom樹便開始勾踐了，遇到以下情況時候dom樹的構建會被暫時阻塞：

① 網絡卡

② 有未加載的腳本

③ 樣式還未加載結束就遇到script

dom樹是基礎，dom樹構建結束以后便根據樣式與dom構建我們的渲染樹了，這個時候樣式文件便會阻塞我們的頁面渲染。

PS：有些網頁會把CSS寫在頁面里，而不是外部文件是為了避免頁面閃爍，或者出現裸奔的局面。

當樣式表加載結束后，渲染樹也被構建好了，我們的頁面就基本成型了。

渲染樹一旦構建完成后，若是js腳本操作dom，就很可能引起頁面回流，過多的回流是前端性能的殺手。

瀏覽器下載的順序是由上到下的，渲染順序也是由上到下的，下載樣式表與渲染樹形成是同步完成的

在渲染到頁面某一部分時，上面的所有部分已經下載完成，并且渲染結束（一旦有js引起改變，邊可能引起之前元素發生回流）

若是瀏覽器中有多個樣式表，在所有樣式表下載結束后瀏覽器又會將所有的樣式表放到一起重新解析，會對之前的所有元素重新渲染，所以樣式表過多也不是太好的。

PS：我們在做頁面時候要注意頁面的大小開始不宜過大，這樣可以渲染的很快，以延遲加載的方式進行。

以上的邏輯可以分割如下：

① 構建dom樹

② 構建render樹

PS：渲染樹，寫英文為了防止以后被問到不知道是什么，包含顏色和屬性的矩形塊。

③ 布局render樹，確定每個節點在屏幕上的確切坐標，然后開始繪制。

師尊，我們的頁面如何布局呢？

以上為瀏覽器干的事情，他干完了就形成了我們所看到的頁面，我們不需要過于關注，但是我們需要關注他的布局。

當渲染樹被創建并添加到樹中，他并沒有位置和大小，計算他位置與大小的過程便是layout或者reflow。

每個渲染對象都有一個layout或者reflow方法，每個渲染對象須有布局的children的layout方法。

每個小變化都可能導致重新布局，瀏覽器使用一個dirty bit系統，一個渲染對象發生變化就會標記他以及他的children胃dirty，就會重新布局之，若是僅僅是其children有問題的話，就只會搞他的children。

全局回流（reflow）是需要避免的，因為其很耗性能，窗口改變會引起全局回流是可以理解的，但是改變整個瀏覽器字體大小的事情我們要少做。

渲染一個對象時候，這個元素的尺寸（高度不定）由其parent決定，他又會決定其children對象，children積累高度與margin、padding便為自己的尺寸，總之這個過程中瀏覽器很忙。

瀏覽器在渲染頁面的時候很忙，所以你一個不小心哪里不如他意了他就會使壞的，所以不要一來就認為瀏覽器有bug，他忙自然關注不了太多。

PS：元素繪制的過程就是講元素壓入堆棧的過程，一個渲染對象的堆棧順序為：背景色->背景圖->border->children->outline。所以我們在寫css時候規則可言參照之

CSS規定所有元素都應該具有盒模型（內容區、padding、border、margin），但是不同元素又有差異：

塊級元素——塊級盒模型

行內元素——生成一個或者多個inline boxes ，inline boxes組成line boxes確定其行高

none——不生成盒模型

師尊，什么是盒模型？

盒模型對我們后面的布局至關重要

瀏覽器要定位元素就必須知道其定位與尺寸,瀏覽器有三種方式布局：

① normal 根據自身和模型大小布局

② float 開始與普通流類似，然后脫離文檔盡可能靠左或者靠右

③ absolute 與dom無關，根據top等決定位置，盒模型決定尺寸

以上三種無論如何都應該有其支點，這個支點就是傳說中的containing block（包含快），也就是元素所處容器，再簡單點就是依賴于其parent了（這塊可能有誤）

前面我們說過，每個元素皆遵循盒模型定理，所以各個元素可以簡單看做一個個盒子，小盒子擺放依賴于大盒子。

① static/relative元素包含快為其父元素的內容區（出去padding部分）

② absolute包含快為最近定位元素（absolute/relative）

③ fixed為根元素（html）

④ float包含快為最近的塊級元素

師尊，BFC/IFC又是什么？

而在盒子們布局時候為了減除彼此間的影響，便出現了block formatting context（塊級上下文）這種布局特性，我理解為隔開盒子的隔板。

以下行為會產生bfc：

① float不為none

② overflow不為visible

③ display為table-cell，table-caption，inline-block中的任何一個

④ position不為relative和static時

在IE7以下沒有BFC的概念，其為了解決的這個問題便提出了haslayout，兩者之間可以畫等號，但是haslayout bug較多，所以IE7以下有很多bug。

相鄰的塊級元素之間會發生margin collapse現象，便是外邊距疊加行為。

這個原因便是相鄰且在同一bfc時垂直外邊距疊加行為。

垂直外邊距便會疊加要解決的話，

有兩種方案（不讓其相鄰，處在不同的bfc）可以為外部設置padding屬性將彼此隔開，當然也可以使用overflow觸發器bfc導致其處在不同的bfc，便不會造成疊加

師尊，塊級元素又是什么？

有了以上知識后，我們再來看看塊級元素

塊級元素會獨占一行，在normal中，其排布由其盒模型確定

PS：IE6盒模型解析有誤，需要向下兼容需要處理

塊級元素為布局大戶，他與position的配合便是布局的瑞士軍刀。

我這里對absolute布局的塊級元素有兩種理解：

1 absolute破壞了元素的高寬，并且將其剝離正常文檔流，而形成了一個會飛的inline-block元素，其初始原點（top/left）與文檔流中正常元素一致，但不會影響其它元素

2 absolute擁有了自己的bfc環境，自成一格與主流bfc分割開后，大小由盒模型確定，位置由top等確定

因為頁面上可能出現多個absolute，所以彼此間的顯示可能出現遮蓋的現象，所以我們有了z-index遮蓋家伙幫我們干事。

PS：我猜測，要讓元素靠近我們其實是讓其bfc靠近我們，而ie7以下不存在bfc，取而代之的是haslayout，所以在ie7以下便會有這樣那樣的bug，并且元素需要依賴其父元素的z-index，事實上便是子元素的haslayout需要依賴父元素的haslayout，他這樣的真相便是，標準瀏覽器的bfc是各自獨立的，ie7/6的haslayout是依賴于父元素的（猜測，歡迎拍磚）

行內元素

對于行內元素來說，每個字會形成一個匿名inline boxes，每個行內元素也會有一個inline boxes，一行的inline boxes便會形成一個line boxes，行框決定著這行的高度。

但是，我們這里的inline boxes干了什么事呢？

既然有塊級格式上下文，便會有inline formatting contexts（行內格式化上下文）

ifc中，inline boxes都是水平排列的，起點是其containing block的頭部，

PS：這塊我有所欠缺，后面再補上

inline boxes會撐開line boxes，line boxes才給予了我們一行的高度，所以文字撐不開高度，是inline boxes撐開的高度，最后便是line-height決定高度（若是塊級元素的高度未設定）。

float

我們知道float也會創建獨立的bfc，這里我對他的理解也形成了兩種：

1 float這家伙破壞了元素的高度，將之變為會左右移動的inline-block，雖然高度不存在了，但是寬度還在，所以其它文本會圍繞之，塊級元素（邊框等）卻會覆蓋之。

2 float擁有了自己的bfc了，所以脫離了文檔流，其margin屬性與其它元素無關了（該理念還無法成型，暫時依賴第一個吧）

你的世界觀形成了嗎？

至此，我們便了解了css中的很多東西了，我們以此形成了世界觀，于是我們今后需要在此世界中找到所有我們需要的答案，若是找不到就說明這個世界還不夠發達，需要你在建，我們需要維護他，不讓他崩毀，但他若是真的崩毀了也不要緊，因為你在形成的世界會無比的輝煌！！！

好了我們以此世界觀來解釋我們遇到的一些問題：

兼容性問題？

其實我們說的兼容性問題主要是IE7以下有問題，IE7以下因為不存在BFC而替用了haslayout，所以會有很多bug，針對bug，

高手會避免haslayout產生問題，而一般人會選擇使用hack技術

為什么會高度坍塌？

因為float破壞了元素的inline boxes，而我們的inline boxes撐開了我們的塊級元素，所以不動態指定高度的話，其實不會具有高度的。

如何解決高度坍塌，其原理是什么？

clear：我這里猜測清除浮動強制修復了行內元素的inline boxes，所以元素又能撐開塊級元素了（但是我不能證明自己）

overflow：overflow觸發了元素的bfc，讓元素具有獨立的bfc，所以其元素不用坍塌了！以上就是坑爹的！因為我自欺欺人都不行，何況忽悠你們，所以我們這里換個說法，這里我想換個思路，我們知道bfc其實就是格式化上下文，說白了他會包裹著我們的元素（我們在IE7中有時候用a標簽模擬按鈕，但是沒戲，觸發layout后便可以了，應該就是這個原理），若是我們來看看觸發了bfc的元素，他本來都沒了高度，但是我要包括你，我們不能包裹沒有的東西吧，所以瀏覽器又被迫恢復了其inline boxes。

PS：我第一是確實一時間找不到還有什么問題可以讓我自說自答了，二來是怕真的出現問題答不起，我好不容易搭建起了的世界就給崩毀了就太傷心啦，所以我暫時不在問自己問題了。

為什么我在js操作dom的時候風扇會不停的轉？

因為操作dom后可能引起大量回流reflow，所以頁面又要重新布局，這個過程很耗資源的。

為什么我們要指定圖片的容器寬度

因為圖片加載后，若是寬度不固定，會撐開他所在頁面，以下部分會發生下層現象，也是一種reflow，（dom構建結束后才加載圖片）

結語

我形成了自己的CSS時間觀了，雖然他還很脆弱，但是我會慢慢建設他，讓我的CSS世界堅固而美麗。

各位，若是你們覺得有什么不足以及錯誤，請提出哦。

?

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的【正视CSS 06】构建我们自己的世界观！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。