1、盒子模型
盒子模型分为 ： 标准盒子模型 、IE盒子模型
- 标准盒子模型
- 盒子宽度（width）= 内容（content）的宽度
- 总宽度为：盒子宽度（width）+内边距（padding）+边框（border）+ 外边距（margin）
- IE盒子模型，也叫作怪异盒子模型
- 盒子宽度（width）= 内容（content）+ 内边距（padding）+边框（border）的宽度
- 总宽度为：盒子宽度（width）+ 外边距（margin）
2、box-sizing属性
- 用来控制元素的盒子模型的解析器，默认为：content-box（W3C标准的盒子模型）
- content-box：W3C标准的盒子模型，设置宽高为内容（content）的宽高
- border-box：IE传统盒子模型，设置的宽高为内容（content）+ 内边距（padding）+边框（border）的宽高
3、css选择器
- id选择器
- class选择器
- 标签选择器
- （ul>li）子选择器
- （li a）后代选择器
- （*）通配符选择器
- （a:hover）伪类选择器
- css选择器优先级排序为：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
4、link和@import的区别
- link是xhtml标签，除了加载css文件，还可以定义ref连接属性，@import只能加载css文件
- link标签引入的css文件同时被加载，@import引入css文件将在页面加载完毕后才加载
- link无兼容问题，@import只能在IE5以上识别
5、a标签的4个伪类
a:link{}：向未被访问的链接添加样式a:visited{}：向已访问的链接添加样式a:hover{}：当鼠标悬浮在元素上时，向元素添加样式a:active{}：向已经被激活的元素添加样式，即鼠标按下时的样式- 顺序不能乱：LVHA
6、常见的伪元素
p::before{content:"hello"}p::after{content:"hello"}- 伪元素必须设置content值，否则不起作用
7、伪类
- 在已有的元素处于莫个状态时，为其添加相对应的样式，这个状态是根据用户的行为而动态变化的，我们称之为伪类
8、伪元素
- 创建一些不存在文档树中的元素，为其添加相对应的样式，我们称之为伪元素，CSS2中的伪元素用一个冒号:，CSS3中的伪元素用两个冒号::，用来区分伪类和伪元素
9、伪类和伪元素的区别
- 伪类在已有的元素中添加额外的样式
- 伪元素在自己虚拟的元素中添加样式
10、margin塌陷问题
- 当文档流中，父元素的高度默认是被子元素撑开的，也就是说，子元素有多高，父元素就有多高，但当子元素设为浮动之后，子元素会完全脱离文档流。此时，子元素无法撑开父元素的高度，导致父元素高度塌陷
- 解决办法：用父元素触发BFC就能解决margin塌陷问题，或者给父元素添加border边框
- BFC（Block Formatting Context），块级格式化上下文
- 触发BFC的条件：
- 1、
position:absolute;//绝对定位 - 2、
display:inline-block;//既有block元素可以设置宽高，又有inline元素默认不换行的特性，还有vertical-aligin:center;垂直对齐的属性 - 3、
float:left/right; - 4、
overflow:hidden;//溢出隐藏
11、margin合并
- 块级元素的上/下边距有时直接接触/相邻时，会取margin最大的值，合并为一个外边距，这种行为叫做margin合并
- 注意浮动元素和绝对定位元素不会发生margin合并
- 解决方案：
- 1、父元素中添加border边框
- 2、父元素用padding替换margin
- 3、把父元素添加BFC
12、flex布局和grid布局的区别
- flex是一维布局，grid是二维布局，也就是grid布局可以更好的操作行和列
