1.如何解决盒子塌陷问题
i.在父盒子添加一个新元素，并设置clear:both;
ii.为父元素设置overflow:hidden；或者overflow:auto；
iii.为父元素添加伪类after 并设置clear：both;（推荐）
iiii.给盒子固定的高和宽
iiiii.给父盒子也添加浮动
2.脱离文档流
position定位
float浮动
fixed定位
3.使用定位实现元素的绝对居中
设置 left:50%;top:50%;margin-left:-width/2;marigin-top:-height/2;
4.flex
flex-direction 主轴方向
flex-wrap 控制换行
justify-content 主轴对齐 start end center space-between space-around
项目位于主轴起点 项目位于主轴终点 居中 两端对齐且项目之间间隔相等 同上，但左右两端相较于父类有间隔
align-items 交叉单行对齐 start end center baseline(根据文字) stretch
align-content 交叉多行对齐 start end center space-between space-around stretch
(以上均在父容器设置)
order 设置项目的排列顺序 数值越小越靠前
flex-grow 设定项目放大比例
flex-shrink 设定项目缩小比例
flex-basis 设定伸缩基准值 以上三种缩写形式 flex: grow shrink basis;
align-self 可以设置单个项目在交叉轴上的排列方式 属性值与align-item一样
5.transiton 过渡
属性值顺序为：property参与过渡的属性 duration过渡时间 timing-function过渡的样式 delay 过渡前的延迟
过渡样式：ease 逐渐变慢 linear匀速 ease-in加速 ease-out减速 ease-in-out 先加速再减速
6.z-index失效的原因
i使用该属性时，元素没有定位
ii在有定位的情况下，该元素的z-index没有生效，是因为该元素的子元素后来居上，盖住了该元素
解决方式：将盖住该元素的子元素的z-index设置为负数，而该元素不设z-index属性.
7.居中方式
1.table-cell
2使用弹性布局的justify-content：center和align-items：center；
3使用定位实现元素的绝对居中 设置 left:50%;top:50%;margin-left:-width/2;marigin-top:-height/2;
4.绝对定位和0
5.translate
8.如何让每行多余文字显示省略号
给父盒子设置以下属性：
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
9.css选择器
通用选择器
标签选择器
类选择器
id选择器
后代选择器（空格）与子代选择器（>）
交集选择器（#） 并集选择器（,#）
伪类选择器
！important将优先级提到最高
选择器优先级：
！important>行内选择器>id选择器>伪类选择器>元素选择器>继承或者*
10.img和background的区别
1.
是一个块状元素，它是一个图片，占位
need-to-insert-img
background-image是背景图片，不占位
2.background-image只能设置background-position设置初始位置,background-attachment定义背景图是固定还是随滚轮滚动,background-repeat,设置图片是否平铺
11.块级元素与行内元素
常见块级元素：form，select，textrea，h1-h6，table，button，hr，p，ol，ul等
常见行内元素：span，input，a，em，strong，b，br，img，input，select等
块级元素特点：
1.每个块级元素独占一行
2.元素的宽高等属性可以设置
3.元素的宽度不设置，默认为父元素的宽度
行内元素特点：
1.行内元素排在一行，排不下就换行
2.行内元素设置width，height无效，宽度随元素的内容变化
3.行内水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果
行内元素还分为替换元素和非替换元素：
替换元素：浏览器根据元素的标签和属性，来决定其具体显示内容的元素，宽高可以设置
非替换元素：内容直接表现出来
12css三大特性
层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突样式，层叠性只要是解决样式冲突的问题
层叠性原则：
样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠
继承性
子标签继承父标签的某些样式，文本颜色，字号等
恰当的使用继承可以优化我们的代码降低css样式的复杂性
子元素可以继承父元素的样式
优先级
当同一个元素指定多个选择器，就会产生优先级
如果选择器相同，执行层叠性
如果选择器不同，则根据权重
