1、viewport视口
width设置viewport宽度；device-width设备宽度；initial-scale初始缩放比例；
minimum-scale允许用户最小缩放比例;maximum-scale允许用户最大缩放比例；user-scaleable是否允许手动缩放
2、图片格式
webp、png、jpeg、gif、svg
3、css精灵图
将多个小图片拼接到一个图片中，通过backgroudo-position和元素尺寸调节显示图片
4、BFC块级格式化上下文
一块独立渲染区域，内部的元素渲染不会影响边界之外的元素
float不为none
position取值为absolute或fixed
display
overflow不为visible
5、css新特性
新增各种css选择器
圆角border-radius
线性渐变
旋转、缩放
6、外边距重叠（外边距塌陷）
概念：两个块级元素的上外边距和下外边距会合并为一个外边距
两个相邻外边距都是正数时，折叠结果时两者之间较大的值
两个相邻外边距都是负数时，折叠结果时两者绝对值的较大值
两个外边距一正一负时，折叠结果时两者的相加的和
7、水平居中
元素为行内元素，text-align:certer;
元素为设置了宽度的块级元素,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
文本系统：text-indent、text-align、line-height、word-spaceing、color
其他：visibility、list-style、cursor
10、隐藏元素的方法
display:none；不占据位置，不会响应绑定的监听事件
visibility:hidden；占据位置，不会响应绑定的监听事件
opacity:0；元素透明度为0，占据空间，能够响应元素绑定的监听事件
position:absolute;通过绝对定义将元素移除可视区域
z-index:负值，使其他元素遮盖住该元素
clip/clip-path:使用元素裁剪的方法来实现元素的隐藏；占据位置，不会响应绑定的监听事件文章来源：https://www.toymoban.com/news/detail-820926.html
transform:scale(0,0)；将元素缩放为0，元素占据位置，不会响应绑定的监听事件文章来源地址https://www.toymoban.com/news/detail-820926.html
到了这里，关于今日前端十个知识点——CSS篇（一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
