什麼是CSS？
CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表） 。
主要用于設定HTML頁面中的文本内容（字型、大小、對齊方式等）、圖檔的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。 CSS以HTML為基礎，提供了豐富的功能，如字型、顔色、背景的控制及整體排版等，而且還可以針對不同的浏覽器設定不同的樣式。
CSS 三大特性
層疊、 繼承、 優先級 CSS層疊性：是指多種CSS樣式的疊加。
CSS繼承性：是指書寫CSS樣式表時，子标簽會繼承父标簽的某些樣式，如文本顔色和字号。
想要設定一個可繼承的屬性，隻需将它應用于父元素即可。簡單了解就是： 子承父業。
CSS優先級：定義CSS樣式時，經常出現兩個或更多規則應用在同一進制素上，這時就會出現優先級的問題。
使用了 !important聲明的規則。 考慮權重時，需要注意的一些點：
- 繼承樣式的權重為0。
- 行内樣式優先。
- 權重相同時，CSS遵循就近原則。
盒模型
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：
外邊距（margin）
、
邊框（border）
、
内邊距（padding）
、
實際内容（content）
四個屬性。
CSS盒模型：
标準模型 + IE模型标準模型和IE模型的差別
計算寬度和高度的不同。
标準盒模型：盒子總寬度/高度 =
width/height + padding + border + margin
。（ 即 width/height 隻是内容高度，不包含 padding 和 border 值 ）
IE盒子模型：盒子總寬度/高度 =
width/height + margin = (内容區寬度/高度 + padding + border) + margin
。（ 即 width/height 包含了 padding 和 border 值 ）
CSS如何設定這兩種模型
标準：
box-sizing: content-box;
( 浏覽器預設設定 ) IE：
box-sizing: border-box;
W3C盒子模型(标準盒模型)
IE盒子模型(怪異盒模型)
JS如何擷取盒模型對應的寬和高
（1）
dom.style.width/height
隻能取到行内樣式的寬和高，style 标簽中和 link 外鍊的樣式取不到。 （2）
dom.currentStyle.width/height
（隻有IE相容）取到的是最終渲染後的寬和高 （3）
window.getComputedStyle(dom).width/height
同（2）但是多浏覽器支援，IE9 以上支援。 （4）
dom.getBoundingClientRect().width/height
也是得到渲染後的寬和高，大多浏覽器支援。IE9 以上支援，除此外還可以取到相對于視窗的上下左右的距離。 （6）
dom.offsetWidth/offsetHeight
包括高度（寬度）、内邊距和邊框，不包括外邊距。最常用，相容性最好。
BFC
BFC基本概念
BFC: 塊級格式化上下文BFC基本概念：
BFC
是
CSS
布局的一個概念，是一塊獨立的渲染區域，是一個環境，裡面的元素不會影響到外部的元素 。 父子元素和兄弟元素邊距重疊，重疊原則取最大值。空元素的邊距重疊是取
margin
與 padding 的最大值。
BFC原理（渲染規則|布局規則）：
（1）内部的
Box
會在垂直方向，從頂部開始一個接着一個地放置； （2）
Box
垂直方向的距離由
margin
(外邊距)決定，屬于同一個
BFC
的兩個相鄰
Box
的
margin
會發生重疊； （3）每個元素的
margin Box
的左邊， 與包含塊
border Box
的左邊相接觸，（對于從左到右的格式化，否則相反）。即使存在浮動也是如此； （4）BFC 在頁面上是一個隔離的獨立容器，外面的元素不會影響裡面的元素，反之亦然。文字環繞效果，設定
float
； （5）BFC 的區域不會與
float Box
重疊（清浮動）; （6）計算
BFC
的高度時，浮動元素也參與計算。
CSS在什麼情況下會建立出BFC（即脫離文檔流）
0、根元素，即 HTML 元素（最大的一個
BFC
） 1、浮動（
float 的值不為 none
） 2、絕對定位元素（
position 的值為 absolute 或 fixed
） 3、行内塊（
display 為 inline-block
） 4、表格單元（
display 為 table、table-cell、table-caption、inline-block 等 HTML 表格相關的屬性
) 5、彈性盒（
display 為 flex 或 inline-flex
） 6、預設值。内容不會被修剪，會呈現在元素框之外（
overflow 不為 visible
）
BFC作用（使用場景）
1、自适應兩（三）欄布局（避免多列布局由于寬度計算四舍五入而自動換行） 2、避免元素被浮動元素覆寫 3、可以讓父元素的高度包含子浮動元素，清除内部浮動（原理：觸發父
div
的
BFC
屬性，使下面的子
div
都處在父
div
的同一個
BFC
區域之内） 4、去除邊距重疊現象，分屬于不同的
BFC
時，可以阻止
margin
重疊
定位(position) position
屬性值分為四種：
static：自動定位（預設定位方式），所謂靜态位置就是各個元素在HTML文檔流中預設的位置。
relative：相對定位，相對定位是将元素相對于它在标準流中的位置進行定位
absolute：絕對定位，相對于其上一個已經定位的父元素進行定位
fixed：固定定位，相對于浏覽器視窗進行定位。它的特點在于它的元素跟父親沒有任何關系，隻認浏覽器；完全脫标，不占有位置，不随着滾動條滾動。
疊放次序（z-index的特點：
z-index的預設屬性值是0，取值越大，定位元素在層疊元素中越居上。
如果取值相同，則根據書寫順序，後來居上。
後面數字一定不能加機關。
隻有相對定位，絕對定位，固定定位有此屬性，其餘标準流，浮動，靜态定位都無此屬性，亦不可指定此屬性。