????傳送門????

寒冬期前端準備總結(jié)---JS篇
寒冬期前端準備總結(jié)---瀏覽器篇
寒冬期前端準備總結(jié)---服務器和網(wǎng)絡篇
[寒冬期前端準備總結(jié)---CSS篇]
寒冬期前端準備總結(jié)---框架篇
寒冬期前端準備總結(jié)---算法篇

• css優(yōu)先級

!important > 內(nèi)聯(lián) > id > class > 屬性 > 標簽 > 偽類 > 通配符（*）> 瀏覽器默認
行內(nèi)、（內(nèi)聯(lián)、鏈接會被后面的覆蓋）

max-width可以覆蓋掉width：!important

• 盒模型

content  padding  border  margin
box-sizing:border-box/content-box
background-color: 包含content  padding
* 注意background的顏色

• flex布局

副作用：子元素的float、clear、vertical-align失效

容器屬性
* flex-direction：主軸方向（row/column/row-reverse/column-reverse）
* flex-wrap：一條軸線排不下，如何換行（默認nowrap/wrap/wrap-reverse）
* flex-flow：flex-direction和flex-wrap的簡寫（默認row nowrap）
* justify-content：項目在主軸上的對齊方式（flex-start/flex-end/center/space-between/space-around）
* align-items：項目在交叉軸上的對齊方式（flex-start/flex-end/center/baseline/stretch）
* align-content：定義有多根軸線時，各軸線的對齊方式（flex-start/flex-end/center/space-between/space-around/stretch）

項目屬性
* order：項目的排列順序，數(shù)字越小越靠前
* flex-grow：項目的放大比例，數(shù)值，默認為0不放大，有數(shù)字時根據(jù)比例放大填滿軸線剩余空間
* flex-shrink：項目的縮小比例，數(shù)值，默認為1空間不足時等比例縮小
* flex-basis：項目在分配多余空間之前，項目在主軸上占據(jù)的空間，默認為auto即項目本身的大小，填入數(shù)值時同width作用
* align-self：允許單個項目自定義對齊方式，默認為auto繼承父align-items，會覆蓋align-items

• 單位

* px：pixel像素，相對于顯示器屏幕分辨率而言
* em：相對長度單位，參考為父元素的font-size
* rem：root em。CSS3新增相對單位，相對于html根元素的font-size來計算
* vw/vh：相對于視口（viewport）計算，單位長度為視口長寬的1/100，例如瀏覽器的寬度為200px，則1vw為2px

• 層疊上下文z-index

* z-index的屬性值僅在定位元素（除static值的position）上有效果

* 判斷元素在z軸上的堆疊順序不僅僅是直接比較兩個元素的z-index大小，由元素的層疊上下文、和層疊等級共同決定
* 先判斷是否在一個層疊上下文中，不同上下文：判斷所處的層疊上下文的層疊等級，相同上下文：根據(jù)層疊順序判斷
* 層疊順序（background/border -> z-index<0 -> block塊級盒子 -> float浮動盒子 -> inline/inline-block盒子 -> z-index:auto/0 -> z-index>0）

• 響應式布局

同一個頁面在不同屏幕尺寸下有不同的布局。自適應布局需要開發(fā)多套頁面用于不同客戶端

實現(xiàn)方案
* 使用媒體查詢：@media screen and (min-width: 375px)
* 百分比布局：css百分比
* rem布局：css3的新單位，響應式需要通過js來動態(tài)控制根元素的font-size大小
* 視口單位vw、vh
* 圖片響應式：大小自適應、根據(jù)屏幕大小選擇合適的分辨率

meta標簽的viewport移動端適配
* 布局視口：代碼層面頁面的寬度，會出現(xiàn)移動端頁面水平滾動條的情況
* 視覺視口：用戶通過屏幕看到的頁面區(qū)域
* 理想視口：類似于瀏覽器視圖
??<meta name="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,  maximum-scale=1.0,minimum-scale=1.0”>

附：移動設備忽略將頁面中的數(shù)字識別為電話號碼的方法
    meta標簽 content屬性設置‘telephone=no’

• CSS預處理和后處理

* 預處理：將一份擴展語法的css編譯成純CSS，例如less
* 后處理：純CSS編譯，例如autoPrefixer自動添加前綴（PostCSS框架）

• 相鄰兩個inline-block中間的間隔

原因：英文單詞之間的空隙（英文排版問題）

解決：
* inline-block元素標簽之間的空格刪除
* 父級font-size設置為0
* 子元素letter-spacing設置為0

- 設置寬高比16:9的區(qū)域方案
.parent {
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}
.child {
    width: 100%;
    height: 100%;
}

• div的屬性 contenteditable設置為true, 模擬textarea

• BFC

 塊級格式化上下文（Block Formatting Context）盒模型布局中的一種渲染方式，獨立的渲染區(qū)域，解決盒子“塌陷”的問題，內(nèi)部樣式不會影響到外部元素

觸發(fā)BFC的方式（任一條件）：
* body根元素
* 浮動元素：float除none以外的值
* 絕對定位元素：position（absolute、fixed）
* 行內(nèi)塊元素：display（inline-block）
* 表格單元格元素：display（table-cell、table、table-row等）
* 彈性布局和網(wǎng)格布局：display（flex、grid）
* overflow不為visiable的塊級元素

BFC特性
* 內(nèi)部box會在垂直方向上放置，內(nèi)部相鄰的塊級盒子的垂直margin會產(chǎn)生折疊
* 形成BFC的區(qū)域不與外部的float盒子重疊（overflow：hidden）
* 計算高度時，內(nèi)部浮動元素也參與計算

BFC應用
* 阻止margin重疊：對相鄰的兩個子盒子中的一個設置BFC，例如外層包裹一個overflow: hidden的div
* 清除內(nèi)部浮動，父元素設置BFC，計算的高度包含float元素
* 阻止元素被浮動元素覆蓋：水平兩個元素float時，水平重疊的問題，將其中一個元素設置BFC

• 未知寬高的居中

// 1 子元素寬度自適應
.parent {
    position: relative
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

// 2 子元素寬度自適應
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

// 3 子元素寬度填充父元素
.parent {
    display: table;
    text-align: center;
}
.child {
    display: table-cell;
    vertical-align:middle;
}

// 4 偽元素 子元素寬度自適應
// ::after 在元素內(nèi)部的最后加入的元素 vertical-align已行內(nèi)元素的基線作為標準垂直對齊
.parent {
    text-align:center;
}
.parent::after {
    content: ‘’;
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
.child {
    display: inline-block;
    vertical-align: middle;
}

• position定位

* static 默認正常流（normal flow）
* relative 相對定位：相對自身之前的文檔流 top，正常流的位置依然存在
* absolute 絕對定位：相對于除了static定位之外的第一個父元素定位，正常流的位置不存在
* fixed 固定定位：相對于視圖窗口的