一點點css的基礎原理總結

0.前言

CSS屬性很是多，若是說死記的話，是不容易的，咱們瞭解他的原理，其餘不常見的屬性都是手到擒來

1.包含塊（CB）

首先說一下ICB（初始包含塊）。簡單來講，根元素的ICB就是首屏。 連續媒體：頁面內容範圍超出視窗大小，須要咱們拉動滾動條才能看，他的ICB是視窗（viewport） 分頁媒體：頁面內容是一頁一頁的，好比咱們在手機上看見的一些h5，他的ICB是頁面範圍

這很明顯，position爲fixed的時候就是ICB

CB是作什麼的呢？ 好比咱們的top、left、bottom、right，他們定位就相對於CB。百分比，也是相對於CB。全部的元素，在CB裏面參與高度計算。對於脫離文檔流的float、absolute、fixed，父元素沒法識別他們，也不參加高度的計算，因此float的時候會致使父元素高度坍塌。

• position爲relative或者static的元素，它的包含塊由最近的塊級（display爲block,list-item, table）祖先元素的內容框組成
• 若是元素position爲absolute，它的包含塊是祖先元素中最近一個非static
• 其餘狀況下包含塊由祖先節點的padding edge組成

對於margin須要注意了：margin-top和margin-bottom的百分比也是相對於父元素width，不是height。這個理由很簡單，咱們能夠想象一下：設置了上下方向的margin->父元素的高增長->上下margin又增長->父元素高又增長......，如此循環。

其實這個是流傳的說法，其實真正的緣由是在於咱們的書寫習慣。咱們寫字是從左到右，從上到下，在排版上，水平方向可能就有具體的需求好比分欄。可是垂直方向上，咱們要寫多少字是一個未知數，並且要是的確須要知道垂直方向尺寸有多大，也是咱們人爲地給他一個高度（height默認是0，咱們要是想用百分比的高只能給父級元素人爲地賦值）。也能夠想一下，若是是咱們書寫習慣是豎着寫，那麼就是height默認是視窗高度了，而width默認是0.

咱們是否是會發現一個問題，都說absolute相對於最近的非static元素，可是咱們作遮罩層的時候，是否是直接寫寬高100%，並且還能有效。 由於，最近都沒有一個非static的父元素，absolute會相對於ICB

2.寬和高

不管何時，要記得水平方向，寬默認取所有；垂直方向，高默認取0。因此，咱們平時width100%就是佔滿所有，auto就是佔滿剩下的內容，而height100%有時候設置了也沒有用。 height沒用的時候，由於他的父元素是0或者被默認是0。好比一個div，直接設置高100%，他是0，可是你用一個已知高度的div包住他，這時候他的百分比就有用了。 auto、百分比，都由CB（包含塊）決定

這樣子，咱們也能夠知道爲何margin auto能居中了： 首先，先要知道寬高，既然已經知道了寬高，那margin就能夠被反推出來值是多少，auto會平分剩下的（兩邊margin=行寬-width）。

先說一個概念：outerHeigth，也就是margin-box。顧名思義就是普通盒子模型加上margin。因此咱們能夠得出一個條件：居中的時候，outerHeigth=父（CB或者ICB）的高。如何居中呢，顯然是top或者bottom爲0，這樣子margin盒子邊界和父元素（CB或者ICB）重疊

3.BFC

塊級盒子造成BFC的條件： 1.浮動元素 2.絕對定位元素 3.非塊級盒子的塊級容器（inline-block，table-cells，and table-captions） 4.overflow不是「 visible」 5.根元素

BFC的特色： 1.一個獨立的容器。 2.盒子從頂端開始垂直地一個接一個地排列，盒子之間垂直的間距是由 margin 決定的。 3.在同一個 BFC 中，兩個相鄰的塊級盒子的垂直外邊距會發生重疊。 4.BFC 區域不會和 float box 發生重疊。 5.BFC 可以識別幷包含浮動元素，參與高度計算。

所以咱們能夠想起一些場見的問題，用bfc解決 1.父子盒子margin越界問題

而BFC能夠解決這個問題，由bfc的特色：一個獨立容器（甚至能夠說是一個獨立的margin-box），固然不會平白無故地穿透父盒子

2.float時父元素高度坍塌、兄弟元素重疊 前面咱們已經看見，父元素高度爲0。所以，咱們把父元素變成BFC，那就能夠實現咱們想要的結果——父元素包含一堆子元素

還有一種方法，在父元素後面（：：after）加上一個尺寸爲0的僞元素，clear：both，使得父元素換行顯示，識別前一行的高度（便是0）

3.兄弟元素，一個float 若是是一個float另外一個不是，則正常狀況下，沒有float的那個直接無視float的那個，由於用了float脫離文檔流。若是無float爲bfc，則會像加了float同樣緊跟後面

一個float，一個正常，正常的元素無視float的元素：

另外一個是bfc：

4.行內元素

4.1可置換行內元素

展現內容不屬於css範疇的，好比src、value，可被替換的（img、object、video、textarea、input等標籤），僞元素經過content插入的對象是匿名可置換元素。

反之，其餘的就是不可置換行內元素了，a、span標籤

對比：

	可置換	不可置換
寬高margin可設？	不能	能
水平對齊方式	父元素的text-align影響	默認左對齊
垂直對齊方式	本身的或者父爲table-cell時的vertical-align	默認baseline

4.2IFC

不一樣於BFC，IFC是默認地、隱式的建立，當一個區域內僅僅包含水平排列的元素才生成（文本、行級元素、行級塊元素），能夠經過vertical-align來設置垂直方向上的對齊。

4.2.1 inline-box（行級盒子）

有點像咱們之前的英語做業本同樣，只是多了幾條線

baseline就是基線，英語本上寫字的那一行，middle是中間（整個7線譜的最中間，也是英語本三行的最中間的1.5行） ，vertical-align就是設置對齊哪一條線的。

面試官：你見過這種狀況嗎

當img的vertical-align爲baseline，img的高又小於行高就會發生這樣子的狀況。咱們只要讓他的對齊線是bottom或者top（是top的時候，他用上邊線和top對齊的）就行

4.2.2 行高inline-height

非置換元素能夠設置，也能夠被span、a、label影響，可置換元素或者行級塊、行級表格子元素的margin盒子和vartical-align決定。

對於不可置換元素的行高，高爲最上面的text-top到最下面的text-bottom（不管是單行仍是多行），若是父級塊元素不設置高，行內子元素line-height影響父元素的行高。

父爲table-cell的時候，能夠利用vertical-align控制內部子元素垂直居中（不管行級元素仍是塊級元素）

對於塊級包含文本的行高，好比p標籤嵌套一些文字的狀況，默認是normal。這個normal是根據font-size大小來決定，塊高稍大於font-size。一樣的，對於多行的狀況，是每一行加起來的和。每一種字體，已經肯定了自身相應的高度，不一樣字體可能有很細微的差異。因而，咱們能夠設置line-height：1（或者100%），這樣子就可讓字體飽滿地填充塊高。

5. 垂直方向的margin

前面已經說到outerHeigth的概念，也就是margin盒子。

居中條件是outerHeigth=line-height《=》vartical-align：top=bottom=0

還有咱們都知道的垂直方向margin摺疊：

用BFC或者float，margin就不會摺疊了：

6.盒子模型

你們都知道的ie盒子和w3c盒子，有的人就說了，ie盒子這種舊東西，有什麼意義？ 其實，在響應式的狀況下，好比50%寬，10pxpadding， ie盒子比w3c盒子更好了 ie：

W3C：

calc須要計算，因此性能上就稍微差了一點

如今bootstrap也是用ie盒子了，在響應式上比較容易操做。ie盒子，在關心盒子外部與外部總體的聯繫時候比較優；W3C盒子，在關心盒子內部的內容與外部的聯繫的時候比較優