1、viewport視口
width設(shè)置viewport寬度；device-width設(shè)備寬度；initial-scale初始縮放比例；
minimum-scale允許用戶最小縮放比例;maximum-scale允許用戶最大縮放比例；user-scaleable是否允許手動縮放
2、圖片格式
webp、png、jpeg、gif、svg
3、css精靈圖
將多個小圖片拼接到一個圖片中，通過backgroudo-position和元素尺寸調(diào)節(jié)顯示圖片
4、BFC塊級格式化上下文
一塊獨立渲染區(qū)域，內(nèi)部的元素渲染不會影響邊界之外的元素
float不為none
position取值為absolute或fixed
display
overflow不為visible
5、css新特性
新增各種css選擇器
圓角border-radius
線性漸變
旋轉(zhuǎn)、縮放
6、外邊距重疊（外邊距塌陷）
概念：兩個塊級元素的上外邊距和下外邊距會合并為一個外邊距
兩個相鄰?fù)膺吘喽际钦龜?shù)時，折疊結(jié)果時兩者之間較大的值
兩個相鄰?fù)膺吘喽际秦摂?shù)時，折疊結(jié)果時兩者絕對值的較大值
兩個外邊距一正一負時，折疊結(jié)果時兩者的相加的和
7、水平居中
元素為行內(nèi)元素，text-align:certer;
元素為設(shè)置了寬度的塊級元素,margin:auto;
使用flex布局，justify-content:center
8、盒模型
標準盒模型：width和height只包含了content
IE盒模型：width和height包含了border、padding和content
box-sizing：content-box(默認)表示標準盒模型
box-sizing：border-box表示IE盒模型
9、有繼承性的屬性
字體系列：font-family、font-weight、font-size、font-style
文本系統(tǒng)：text-indent、text-align、line-height、word-spaceing、color
其他：visibility、list-style、cursor
10、隱藏元素的方法
display:none；不占據(jù)位置，不會響應(yīng)綁定的監(jiān)聽事件
visibility:hidden；占據(jù)位置，不會響應(yīng)綁定的監(jiān)聽事件
opacity:0；元素透明度為0，占據(jù)空間，能夠響應(yīng)元素綁定的監(jiān)聽事件
position:absolute;通過絕對定義將元素移除可視區(qū)域
z-index:負值，使其他元素遮蓋住該元素
clip/clip-path:使用元素裁剪的方法來實現(xiàn)元素的隱藏；占據(jù)位置，不會響應(yīng)綁定的監(jiān)聽事件文章來源：http://www.zghlxwxcb.cn/news/detail-820926.html
transform:scale(0,0)；將元素縮放為0，元素占據(jù)位置，不會響應(yīng)綁定的監(jiān)聽事件文章來源地址http://www.zghlxwxcb.cn/news/detail-820926.html
到了這里，關(guān)于今日前端十個知識點——CSS篇（一）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
