css

1、盒模型

頁面渲染時，dom元素纔有的 佈局模型。可以通過 box-sizing 進行設置。根據計算寬高的區域可分爲：

content-box(W3C標準盒模型)
border-box(IE盒模型 width包含padding和border)
padding-box (padding計算入width內)

ie8+瀏覽器支持content-box和border-box；
ff則支持全部三個值。
-webkit-box-sizing: 100px; // for ios-safari, android
-moz-box-sizing:100px; //for ff
box-sizing:100px; //for other

<style type="text/css">
    .content-box{
        box-sizing:content-box;
        -moz-box-sizing:content-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #E6A43F;
        background: blue;
    }
    .padding-box{
        box-sizing:padding-box;
        -moz-box-sizing:padding-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #186645;
        background: red;                
    }
    .border-box{
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #3DA3EF;
        background: yellow;
    }
</style>

2、BFC

塊兒級格式化上下文，是一個獨立的渲染區域，讓處於BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響

IE下爲Layout,可通過zoom:1觸發

功能

使 BFC 內部浮動元素不會到處亂跑；
和浮動元素產生邊界。
方法:
- overflow: auto 讓浮動的內容和周圍的內容登高
- overflow: hidden 外邊距塌陷
- display: flow-root 它可以創建無副作用的BFC

`給 <div> display: flow-root 屬性後，<div> 中的所有內容都會參與BFC，浮動的內容不會從底部溢出。`

觸發條件:

根元素(<html>)
浮動元素（元素的 float 不是 none）
絕對定位元素（元素的 position 爲 absolute 或 fixed）
行內塊元素（元素的 display 爲 inline-block）
表格單元格（元素的 display爲 table-cell，HTML表格單元格默認爲該值）
表格標題（元素的 display 爲 table-caption，HTML表格標題默認爲該值）
匿名錶格單元格元素（元素的 display爲 table、table-row、 table-row-group、table-header-group、table-
footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table）
overflow 值不爲 visible 的塊元素
display 值爲 flow-root 的元素
contain 值爲 layout、content或 paint 的元素
彈性元素（display爲 flex 或 inline-flex元素的直接子元素）
網格元素（display爲 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不爲 auto，包括 column-count 爲 1）
column-span 爲 all 的元素始終會創建一個新的BFC，即使該元素沒有包裹在一個多列容器中（標準變更，Chrome bug）。

html
float!=none
position = absolute || fixed
display = inline-block || flow-root || table、table-row、 table-row-group、table-header-group、table-

應用場景

阻止margin重疊
可以包含浮動元素 —— 清除內部浮動(清除浮動的原理是兩個div都位於同一個 BFC 區域之中)
自適應兩欄佈局
可以阻止元素被浮動元素覆蓋

層疊上下文

層疊上下文
層疊等級
層疊順序
z-index

普通元素的層疊等級優先由其所在的層疊上下文決定。
層疊等級的比較只有在當前層疊上下文元素中才有意義。不同層疊上下文中比較層疊等級是沒有意義的。

如何產生層疊上下文

HTML中的根元素<html></html>本身j就具有層疊上下文，稱爲“根層疊上下文”。
普通元素設置position屬性爲非static值並設置z-index屬性爲具體數值，產生層疊上下文。
CSS3中的新屬性也可以產生層疊上下文。
- 父元素的display屬性值爲flex|inline-flex，子元素z-index屬性值不爲auto的時候，子元素爲層疊上下文元素；
- 元素的opacity屬性值不是1；
- 元素的transform屬性值不是none；
- 元素mix-blend-mode屬性值不是normal`；
- 元素的filter屬性值不是none；
- 元素的isolation屬性值是isolate；
- will-change指定的屬性值爲上面任意一個；
- 元素的-webkit-overflow-scrolling屬性值設置爲touch。

4、居中佈局

水平居中
- 行內元素：text-align: center
- 塊兒級元素：margin:0 auto
- absolute + transform
  - (1) 絕對定位元素的定位基準點是其有定位元素的祖先元素;
  - (2) translate要做偏移，是相對於自身的中心點而言，如果用百分比做單位，參考值就是本身元素的寬度。
- flex + justify-cennter:cennter
垂直居中
- ling-heigth:height
- absolute + transform
- flex + align-item:center

.center {
          position:absolute;
           top:50%;
           left:50%;
           width:200px;
           height:200px;
           margin-top:-200/2px;
           margin-left:-200/2px;
}
.center {
           position:relative;
            top:50%;
            left:50%;
            width:200px;
            height:200px;
            background:red;
            transform:translate(-50%,-50%); /* 可以做很多動畫效果，不兼容 */
            transform-origin:50% 50%; /* 設置旋轉元素的基點位置 不兼容*/
}

flex佈局 解決的一些問題

將內容塊垂直居中於其父級內部。
無論有多少寬度/高度，使容器的所有子容器佔用相同數量的可用寬度/高度。
使多列布局中的所有列採用相同的高度，即使它們包含不同的內容量。

section {
  display: flex; /* 子元素在section 中水平平均分佈*/
}

佈局方向

flex-direction: row(默認) || column排布方向
flex-wrap: wrap; 自動換行子元素添加高度 flex: 200px;

flex-direction: row;
flex-wrap: wrap;

等價於
flex-flow: row wrap;

還有好多。。。

5、選擇器優先級

!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性
選擇器從右向左解析

6、清浮動，防止父級塌陷

通過增加尾元素清除浮動
- :after/ <br/>:clear:both
創建父級BFC 如：display: flow-root
父級設置高度

link與@import的區別

link是XHTML標籤
link標籤除了可以加載css外，還可以做很多其他的事情，如定義RSS，定義rel連接屬性等，@import只能加載CSS。
加載順序的差別：當一個頁面被加載的時候，link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再加載。所以有時候瀏覽@import加載CSS的頁面時會沒有樣式（就是閃爍），網速慢的時候還挺明顯。
使用dom控制樣式時的差別。當時用JavaScript控制dom去改變樣式的時候，只能使用link標籤，因爲@import不是dom可以控制的
@import可以在css中再次引入其他樣式表

8、css預處理器（sass/less/postcss）

css預處理器的原理：是將類css語言通過webpack編譯轉換成瀏覽器可讀的真正css，在這層編譯之上，便可賦予css更多強大的功能，常用功能：

嵌套
定義變量
循環語句
條件語句
自動前綴
單位轉換
minxin複用

css動畫

transition:過渡動畫
- transition-property:屬性
- transition-duration:間隔
- transition-timing-function:曲線
- transition-delay:延遲
animation/keyframes
- animation-name:動畫名稱，對應@keyframes
- animation-timing-function:曲線
- animation-delay:延遲
- animation-iteration-count:次數
  - infinite:循環動畫
- animation-direction:方向
  - alternate:反向播放
- animation-fill-mode:靜止模式
  - forwards:停止時保留最後一幀
  - backwards:停止時回到第一幀
  - both:同時運用
- 常用鉤子：animationend
動畫屬性:儘可能的使用動畫屬性進行動畫，能擁有較好的性能表現
- translate
- scale
- rotate
- skew
- opacity
- color

css基礎

css