前端開發學習, CSS是基礎的部分,比較易懂好學.今天給大家分享一些小技巧.
20個有用的CSS小技巧，來幫你把CSS技能提高到高級水平 [Github上有8000多個star]。包括Flexbox、REM、:not()選擇器、負的nth-child等。
01、使用CSS復位
CSS復位可以在不同的瀏覽器上保持一致的樣式風格。您可以使用CSS reset 庫Normalize等，也可以使用一個更簡化的復位方法：
02、繼承box-sizing
03、為 body 元素添加行高
04、使用 :not() 選擇器來決定表單是否顯示邊框
05、垂直居中任何元素
06、使用負的 nth-child 來選擇元素
07、逗號分隔列表
08、使用 SVG 圖標
09、使用 “形似貓頭鷹” 的選擇器
10、使用 max-height 來建立純 CSS 的滑塊
11、創造格子等寬的表格
12、利用 Flexbox 去除多餘的外邊距
13、給 “默認” 鏈接定義樣式
14、一致垂直節奏
15、固定比例盒子
16、為破碎圖象定義樣式
17、用 rem 來調整全局大小；用 em 來調整局部大小
18、隱藏沒有靜音、自動播放的影片
19、使用選擇器:root來控制字體彈性
20、為更好的移動體驗，為表單元素設置字體大小
支持情況
這些技巧適用於最新版的 Chrome, Firefox, Safari, Opera, Edge, 以及 IE11
分享到:
閱讀更多 WEB前端交流 的文章
