前端八股CSS：盒模型、CSS权重、+与~选择器、z-index、水平垂直居中、左侧固定，右侧自适应、三栏均分布局

一、盒模型

题目：简述CSS的盒模型

答：盒模型有两种类型，可以通过box-sizing设置
1.标准盒模型（content-box）:默认值，宽度和高度只包含内容区域，不包含内边距、边框和外边距。

2.边框盒模型（border-box）:宽度和高度包括内容区域、内边距和边框，但不包括外边距。

盒模型中元素的总宽度=内容宽度+左右内边距+左右边框+左右外边距
盒模型中元素的总高度=内容高度+上下内边距+上下边框+上下外边距

 二、CSS specificity (权重)

题目：简述下CSS权重

答：CSS权重是用于确定当多个CSS规则应用到同一元素时，哪个规则最终会生效。

权重优先级：
1.!important（最高）

2.内敛样式

3.ID选择器

4.类选择器、伪类选择器、属性选择器

5.标签选择器、伪元素

其中通配符选择器 *，组合选择器 + ~ >，否定伪类选择器 :not() 对优先级无影响

 三、’+’ 与 ’~’ 选择器有什么不同

答：

• + 选择器匹配紧邻的兄弟元素

• ~ 选择器匹配随后的所有兄弟元素

四、z-index 与层叠上下文

• 题目：