css基础知识

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布局可以更好的操作行和列