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:使用元素裁剪的方法来实现元素的隐藏;占据位置,不会响应绑定的监听事件
transform:scale(0,0);将元素缩放为0,元素占据位置,不会响应绑定的监听事件