这段时间感受了一下秋招提前批的风浪，属实有点爽。在被拷打的同时，逐步积累经验，接下来总结一下面试中常考的一些css题目。 首先，提供一个万能公式（面对一些题目时可以套）：1.是什么 2.原理 3. 应用场景
一、说说对css盒子模型的理解
- 是什么
当浏览器在渲染一个html容器时，会根据某一个标准来绘制出一个矩形，该矩形包含content、padding、margin、border。
-
有哪些盒模型
-
标准盒模型
设置宽高时，指的是content的宽高；设置padding、margin、border时，盒子总面积增大
width=content
总宽度=content+padding+margin+border
-
IE盒模型
设置宽高时，指的是content+padding+border的宽高；设置margin、border时，盒子总面积增大
width=content+padding+border
总宽度=content+padding+margin+border
-
-
切换方法
-
标准盒模型
设置box-sizing: content-box;
-
IE盒模型
设置box-sizing: border-box;
-
二、说说css中的选择器有哪些？优先级是怎么样？
- id
- class
- 标签
- 后代选择器
- 子集选择器
- 兄弟选择器
- 群组选择器
- 伪类选择器
- 伪元素选择器
- 属性选择器
主要优先级：important > 内联样式 > id > class > 标签
三、说说em、px、rem、vw、vh的区别
-
是什么
都是css中的单位，这些单位灵活使用可用于做不同的适配
-
区别
-
em：
em是相对单位，1em=父元素的font-size
-
px
px是绝对单位，1px=1/96英寸
-
rem
rem是相对单位，1rem=html元素的font-size
-
vw
vw是相对单位，1vw=视口宽度的1%
-
vh
vh是相对单位，1vh=视口高度的1%
-
四、css中有哪些隐藏容器的方式？区别是什么？
opacity:0 有文档流，无法绑定事件
display:none 无文档流，无法绑定事件
width:0 height:0 无文档流，无法绑定事件
visibility:hidden 无文档流，可以绑定事件
clip-path(截取) 有文档流，无法绑定事件
五、谈谈你对BFC的理解
BlockFormattingContext 块级格式化上下文
-
bfc是css一种兼做块级格式化上下文的容器，它拥有一些特殊的渲染规则 - 规则：
- bfc 容器中的子元素依然是按照正常容器的渲染规则
- bfc 容器在计算高度时会将里面浮动的子容器的高度也计算在内、
- bfc容器中子容器的margin-top 不会和自己的margin-top重叠
-
触发条件
-
overflow:hidden || auto || overlay || scroll
-
float:left || right
-
display:inline-block || flex || inline-flex || grid || inline-table
-
position:absolute || fixed
-
-
应用场景
- 清除浮动
- 防止marigin重叠
六、你有哪些方法可以实现元素的水平垂直居中
- 已知父子容器宽度：margin
- 已知子容器宽高: absolute + transform
- 未知子容器宽高：flex，absolute + translate , absolute + margin, grid , tabel
七、如何实现两栏 / 三栏布局
-
flex+ order
-
圣杯 / 双飞翼
-
grid
grid-template-rows: 200px 1fr 200px
-
tabel
-
absolute
八、说说弹性盒子
-
flex 属性可以将一个容器变成弹性容器，可以简便，响应式的实现页面布局， 有主轴和交叉轴之分，默认x为主轴
-
属性：
- 父容器: flex-direction,flex-wrap,justify-content,align-items,align-content
- 子容器： order,flex-grow,flex-shrink,flex-basis,align-self
-
应用场景
- 居中问题
- 多栏布局
- 响应式布局