【面试题】CSS
1. 两种盒模型的区别
标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin
可以通过box-sizing属性来修改盒子模型
2. 什么是BFC，如何触发，使用场景
BFC概念：
块级格式化上下文 (Block Fromatting Context)
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响
并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
特点：垂直的沿着其父元素的边框排列；外边距重叠；
如何开启BFC：
- 根元素
- float属性不为none
- position为absolute或fixed
- display为table-cell,table-caption, inline-block, inline-flex, flex
- overflow不为visible
使用场景：
- 解决外边距重叠
- 高度塌陷问题，利用bfc清除浮动
3. position有哪些属性
- static定位(普通定位)
- relative定位(相对定位)
- absolute定位(绝对定位)
- fixed定位(固定定位)
4. flex布局如何使用
6个容器属性：
- flex-direction：决定主轴的方向
- flex-wrap：控制换行
- flex-flow：上面两个的简写，默认row nowrap
- justify-content：定义项目在主轴的对齐方式
- align-items：定义了项目在交叉轴的对齐方式
- align-content：定义了多根轴线的对齐方式
6个项目属性：
- order：自定义项目顺序，默认为0
- flex-grow：自定义放大比例，默认为0
- flex-shirk：自定义缩小比例，默认为1
- flex-basis：分配多余空间之前，项目占据的主轴空间，默认为auto
- flex：上面三个属性的简写，默认值（0 1 auto）
- align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
5. CSS选择器及优先级
优先级：标签选择器 --> 类选择器 --> id选择器 --> 行内样式 --> !important
- 第一等：行内样式，权值为1000。
- 第二等：ID选择器，如：#content，权值为0100。
- 第三等：类，伪类，属性选择器，如.content，权值为0010。
- 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
- 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
- 继承的样式没有权值。
6. 如何隐藏元素
7. 如何清除浮动
- 直接给父级加高度
- 开启BFC
- br标签清除浮动
- 空标签清除浮动
- 伪元素清除浮动