1.css盒模型：
盒子的组成：内容content ,内边距padding ,边框border，外边距margin
盒模型的类型：
- 标准盒模型：margin+padding+border+content
- IE盒模型： margin+content(包含了border和padding)
2.css选择器的优先级
！important>行内样式>id>类/伪类/属性>标签>全局选择器
3.隐藏元素的方法有哪些？
- opacity: 0 （依然占位置）
- display：none （不占位置）
- visibility:hidden （不占位置）
- 用position 把元素移到页面外去
- clip-path:circle(0);
4.px、em和rem的区别是什么？
1.px是像素，它是绝对单位不会变化的，不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。
2.em的值不固定，会继承父元素的字体大小，是一个相对单位
3.rem是css3中新增的相对单位，相对于html根元素，可以通过修改根元素字体大小就可以调整所有字体大小，可以避免字体大小逐层复合的连锁反应
注意：任意浏览器的默认字体都是16px
5.重绘与重排(回流)的区别？
重排（回流）：布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小
重绘：计算好盒模型的位置，大小和其他一些属性后，浏览器会根据每个盒模型的特性进行绘制
对DOM的大小、位置进行修改后，浏览器需要重新计算元素的属性就叫做 重排（回流）
对DOM的样式进行修改，比如color，background-color，浏览器不需要计算集合属性的时候，就绘制该元素的新样式，这就叫做重绘
6.让元素水平垂直居中的方法
- 定位+margin 子绝父相， margin:auto; top:0; bottom:0; left:0; right:0;
- 定位+transform 子绝父相， margin:auto; top:50%; left:50%; transform:translate(-50%,-50%)
- flex布局 display:flex; justify-content:center;align-items:center
- grid布局 display:grid; justify-content: center; align-content: center;(justify-content / justify-items 和 align-content / align-items)4种组合
- table布局 将父元素设置 display:table-cell 子元素设置 display: inline-block
7.css哪些属性可以继承，哪些不可以继承？
可以被继承的css属性
- 字体系列属性:font、font-family、font-weight、font-size、fontstyle;
- 文本系列属性:
- 内联元素：color、line-height、word-spacing（设置单词之间的间距）、letter-spacing（设置文本字符间距）、 text-transform(用于设置文本的大小写：uppercase所有字符强制转为大写，lowercase转小写，capitalize首字符强制转为大写);
- 块级元素：text-indent、text-align;
- 元素可见性：visibility
- 表格布局属性：caption-side（标题位置）、border-collapse（设置边框分离还是合并）、border-spacing（边框分离状态下设置边框间距）、empty-cells（定义如何渲染无可视内容的单元格边框和背景）、table-layout（定义用于布局单元格行和列的算法）;
- 列表布局属性：list-style
不可以被继承的css属性
- 1.display：规定元素应该生成的框的类型；
- 2.文本属性：vertical-align、text-decoration(用于设置文本的修饰线外观包括上/下划线，管穿线，删除线，闪烁 );
- 3.盒子模型的属性：width、height、margin、border、padding;
- 4.背景属性：background、background-color、background-image;
- 5.定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、maxwidth、max-height、overflow、clip;
8.css预处理器?
广泛使用的是 less 和 sass 。
9.清除浮动的方法
- 1.给父元素添加overflow:hidden
- 2.使用after清除浮动
- 3.使用before和after双伪元素清除浮动
- 4.给父元素设置高度
- 5.额外标签法，在其后额外添加一个空白标签 ，给其设置clear：both
10.弹性盒子
flex布局 常用属性
1.flex-direction属性决定主轴的方向（即项目的排列方向）。
2.flex-wrap属性定义，如果一条轴线排不下，如何换行。
3.flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4.justify-content属性定义了项目在主轴上的对齐方式。
5.align-items属性定义项目在交叉轴上如何对齐。
6.align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。