css基础知识
css用来解决规则声明所产生的冲突
层叠三大规则：1.样式表来源 2.选择器优先级 3.源码位置
写css建议：1.选择器尽量少用id
2.尽量不用！important （级别最高）
3.自己的样式加载在库样式的后面
继承：
大部分能继承的与文本相关
可以用inherit从父元素继承
盒模型：
浏览器根据视觉格式化模型(visual formatting model),将所有元素表示为盒子模型,css通过盒模型做layout
任意盒子的display
外部显示类型(display-outside):规定了该盒子如何与同一格式上下文中的其他元素一起显示。
内部显示类型(display-inside):规定了该盒子内部的布局方式。比如display: flex;其外部显示是block，参与BFC; display: inline-flex，则外部显示是inline，参与IFC。他们内部的盒子都参与弹性盒子布局。
产生外边距塌陷：
两个兄弟元素之间相邻的上下外边距
父子元素之间相邻的上下外边距
内容为空元素自己上下外边距相邻
消除外边距塌陷：
在两个相邻的上下边距之间增加border、padding或者内联元素，使之不相邻;
在父子元素重叠时，除了上述方法，还可以设置父元素为BFC,使得父子不在同级BFC中
line box的高度为所包含的位置最高的元素的顶部和位置最低的元素的底部的距离
弹性盒子
Flexible Box Layout是为了提供更加高效灵活的布局方式，在即便是宽高未知的情况下，也能排列和分割一个盒子内部的布局。而且在不同布局方向(横向/纵向)的调整更为灵活。
网格布局
Grid布局可以定义由行和列组成的二维布局，然后将元素放置到网格中。元素可以只占其中一个单元格，也可以占据多行或多列。
大面积用grid
小面积用flex
编写z-index（层叠上下文）的建议:
1.使用css变量或者预处理语言的变量，管理z-index的值
⒉将预设间隔设置10或100，方便后续的插入
响应式设计遵循原则：
优先选用流式布局，如百分比、flex、grid等
使用响应式图片，匹配尺寸，节省带宽
使用媒体查询为不同的设备类型做适配
给移动端设备设置简单、统一的视口
使用相对长度，em、rem . vw做为长度度量
Dpi：每英寸多少点
Ppi：每英寸多少像素
Rem：根元素的字体大小
