1、css盒子模型
一个css盒子从外到内可以分成四个部分∶margin（外边距），border （边框），padding（内边距），content（内容）。
默认情况下，盒子的 width 和 height 属性只是设置 content（内容）的宽和高。
盒子真正的宽应该是∶内容宽度+左右填充+左右边距+左右边框。
盒子真正的高应该是∶内容高度+上下填充+上下边距+上下边框
2、Css3新增的特性
3、css 选择器
id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等
4、Css选择器优先级
-
带有!important 标记的样式属性的优先级最高;
-
样式表的来源不同时，优先级顺序为∶内联样式> 内部样式>外部样式> 浏览器用户自定义样式> 浏览器默认样式
-
样式选择器的类型不同时，优先级顺序为∶id 选择器 >class 选择器>标签选择器;
-
同一元素引用了多个样式时，排在后面的样式属性的优先级高;
-
标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级比较低，至少比标签选择器的优先级低;
5、px，rem，em 的区别
-
px，绝对长度单位，像素 px是相对于显示器屏幕分辨率来说的
-
em，相对长度单位，相对于当前对象内文本的字体尺寸。em 的值并不是固定的，会继承父级元素的字体大小。
-
rem，相对于html根元素的 font-size。
如果想要在 1920 * 1080 px 设计稿中 1rem = 100px（基准值），在100vw（设备视口总宽度）的屏幕中 1rem = a（文档根元素html的字体大小）
1080 / 100 = 100vw / a
=> a = 100vw / (1080 / 100)
=> a = 100vw / 10.8
html
font-size calc((100vmin / 10.8))
flex 布局
移动端适配
- 百分比 如果屏幕尺度跨度太大，相对设计稿过大或者过小的屏幕不能正常显示，在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。
- rem
- vh/vw方案
- vw : 1vw 等于 视口宽度 的 1%
- vh : 1vh 等于 视口高度 的 **1% **
- vmin : 选取 vw 和 vh 中 最小 的那个
- vmax : 选取 vw 和 vh 中 最大 的那个
- rem+vw/vh方案
- 媒体查询
