什么是盒模型？
css盒模型是css技术的⼀种思维模式。每个盒模型由内容（content），填充（padding），边框（border），外边距（margin）组成
css盒模型有两种：IE盒模型和w3c标准盒模型
IE盒模型（border-box）：（属性width，height包含content、border和padding）
W3C标准盒模型（content-box）：（属性width，height只包含内容content，不包含border和padding。）
如何实现元素垂直居中
1.如果是行内块就用verticle-align:middle实现CSS垂直居中
2.给⽗元素display:flex;⽽⼦元素align-self:center
3.line-height
4.定位：给margin加负数
左侧⼀个导航栏宽度固定，右侧内容根据⽤户浏览器窗⼝宽度进⾏⾃适应，这个功能怎么实现？
⾸先把这个问题分步解决，需要攻克以下两点：
1）让两个div并排到⼀⾏
div属于块级元素，在⽂档标准流中单独占据⼀⾏。要想多个div在⼀⾏，就可以想办法让div脱离标准流，⽐如使⽤浮动（float）或者定位
2）让⼀个div宽度固定，另个div占据剩下宽度的空间
对⾃适应宽度的div处理⽅法是不去设置它的width属性，浏览器会⾃动计算后让它占⼀⾏，接下来给他设置margin-left属性把第一点中左侧固定列空间空出即可。
css的单位
px：像素单位，1px就是一个像素点
em：相对长度单位，是根据当前对象父元素内文本的字体尺寸来进行转变的单位
rem：是css3中新增加的一个单位属性，是根据页面的根节点的字体大小进行转变的单位。
css中rem和em有什么区别
rem是根据html根节点来计算的，而em是根据父级元素的字体计算的
css的选择器有哪些？
元素选择器，id选择器，类选择器，这三个是比较常见的，除此之外还有复合选择器，关系选择器，属性选择器，伪类选择器，伪元素选择器
css哪些属性可以继承？
1、字体系列属性 font：组合字体 font-family：规定元素的字体系列 font-weight：设置字体的粗细 font-size：设置字体的尺寸 font-style：定义字体的风格
2、文本系列属性 text-indent：文本缩进 text-align：文本水平对齐 line-height：行高 color：文本颜色
3、元素可见性：visibility
4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
5、列表属性：list-style
6、生成内容属性：quotes
7、光标属性：cursor
BFC是什么？
块级格式上下文
概念
BFC是Web页面的CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
一个BFC区域只包含该上下文元素直接创建的所有子元素，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素
如何触发？
只要元素满足下面任一条件即可触发 BFC 特性：
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
BFC的实际应用
- 解决margin塌陷和margin合并的问题
- 解决浮动元素高度无法撑开的问题
- 阻止标准流元素被浮动元素覆盖
清除浮动的方案
- 可以利用clear样式清除浮动
- 父元素添加overflow:hidden方法
- 利用after伪类
CSS的响应式布局方案
- 百分比布局
第一个就是通过百分比布局的方法可以使得浏览器中组件的宽和高随着浏览器的变化而变化，从而就可以实现响应式的效果
- 媒体查询布局
第二个就是通过@media 媒体查询的方式给不同大小的屏幕编写不同的样式来实现响应式的布局。
- rem 布局
第三个是rem布局，通过修改 html 中 font-size 的字体大小来控制 rem 的大小，从而实现响应式布局
- vw、vh 响应式布局
第四个是通过vw vh的方式，只需要把px转换为vw和wh，转换好后，vw和wh是自动应视口宽的，所以就达到了响应式开发的效果。
