CSS是前端三要素之一，透過使用CSS樣式設定頁面的格式，可將頁面的內容與表現形式分離。對於每一個參加杭州Web前端學習的人來說，CSS是他們必須要掌握的技能之一，不僅要牢記理論知識，還要熟練應用。
1、文字居中相容
正常處理文字上下居中的手段是讓元素height和line-height相等，但是安卓環境下當字型大小<14px/0.7rem的時候會出現居中失效的情況。
解決方法：
1）判斷系統環境（安卓/IOS）分別作微調；
2）font-size、height、width全部放大為2倍，利用transform進行縮放
2、圖片自適應佔位方式
當圖片未正確載入，或載入完成前，由於圖片高度為0，其容器會因為沒有內容，導致容器無法撐高而塌陷，而如果載入較慢則會再圖片載入完成後出現閃爍的情況。
CSS中，當padding-top/bottom值為百分比時，其值都是以其父元素的寬度為參照物件。因此對於寬高比例固定的情況，可以利用padding-top/bottom用於圖片自適應佔位，解決頁面閃爍的問題。
如果僅設定值padding-top/bottom為百分比，會出現一個問題，就是該方法容器的max-height屬性會失效，就無法限制容器的最大高度了。因此，可以給容器新增一個偽元素的子元素用於撐起內容，該子元素擁有一個padding-top:100%，同時給容器一個max-height嘗試限制容器的高度，最後內容用絕對定位的方式新增即可。
3、使用currentColor來簡化CSS
設定border-color、background-color等顏色的時候，可以使用currentColor[與當前元素的字型顏色相同]來簡化CSS。
.div{
color: rgba(0,0,0,.85);
font-weight: 500;
text-align: left;
padding: 20px;
border: solid 1px currentColor;
}
4、曲線陰影的實現
多個陰影重疊，就是正常陰影+曲線陰影。
正常情況下，有個矩形有正常的陰影，作為主投影，這時候再定義一個有一定弧度圓角的圓角矩形，然後放在正常矩形的下面，並露出一點點底部有弧度的陰影，這樣的話就可以形成曲線投影的效果。
5、翹邊陰影的實現
利用:before和:after，加上絕對定位的性質，可以形成一個矩形，這個時候結合CSS3的傾斜屬性skew和旋轉屬性rote。就可以形成一個有旋轉角度的平行四邊形，這個時候再和原來的矩形重疊，則可產生翹邊效果。
CSS是前端三要素之一，透過使用CSS樣式設定頁面的格式，可將頁面的內容與表現形式分離。對於每一個參加杭州Web前端學習的人來說，CSS是他們必須要掌握的技能之一，不僅要牢記理論知識，還要熟練應用。
1、文字居中相容
正常處理文字上下居中的手段是讓元素height和line-height相等，但是安卓環境下當字型大小<14px/0.7rem的時候會出現居中失效的情況。
解決方法：
1）判斷系統環境（安卓/IOS）分別作微調；
2）font-size、height、width全部放大為2倍，利用transform進行縮放
2、圖片自適應佔位方式
當圖片未正確載入，或載入完成前，由於圖片高度為0，其容器會因為沒有內容，導致容器無法撐高而塌陷，而如果載入較慢則會再圖片載入完成後出現閃爍的情況。
CSS中，當padding-top/bottom值為百分比時，其值都是以其父元素的寬度為參照物件。因此對於寬高比例固定的情況，可以利用padding-top/bottom用於圖片自適應佔位，解決頁面閃爍的問題。
如果僅設定值padding-top/bottom為百分比，會出現一個問題，就是該方法容器的max-height屬性會失效，就無法限制容器的最大高度了。因此，可以給容器新增一個偽元素的子元素用於撐起內容，該子元素擁有一個padding-top:100%，同時給容器一個max-height嘗試限制容器的高度，最後內容用絕對定位的方式新增即可。
3、使用currentColor來簡化CSS
設定border-color、background-color等顏色的時候，可以使用currentColor[與當前元素的字型顏色相同]來簡化CSS。
.div{
color: rgba(0,0,0,.85);
font-weight: 500;
text-align: left;
padding: 20px;
border: solid 1px currentColor;
}
4、曲線陰影的實現
多個陰影重疊，就是正常陰影+曲線陰影。
正常情況下，有個矩形有正常的陰影，作為主投影，這時候再定義一個有一定弧度圓角的圓角矩形，然後放在正常矩形的下面，並露出一點點底部有弧度的陰影，這樣的話就可以形成曲線投影的效果。
5、翹邊陰影的實現
利用:before和:after，加上絕對定位的性質，可以形成一個矩形，這個時候結合CSS3的傾斜屬性skew和旋轉屬性rote。就可以形成一個有旋轉角度的平行四邊形，這個時候再和原來的矩形重疊，則可產生翹邊效果。