如何实现垂直居中（内容上下空白一样高）？
如果父元素的高度不写，你只需要padding:10px 0 即可垂直居中子元素。
如果父元素高度已定，使用以下方法。
重点：能不写高度就不写高度。
1、table标签自带功能
2、把div变为table内容即可垂直居中。
<div class = 'table'>
<div class = 'td'>
<div class = 'child'>儿子</div>
</div>
</div>
.table{
display:table;
border:solid 1px black;
height:100px
}
.td{
display:table-cell;
vertical-align:middle
}
.child{
border:solid 1px green;
}
3、margin-top -50%
4、translate -50%
5、absolut margin auto
5、flexgird
7、100%高度的after before 加 inline block
CSS选择器优先级
1、选择题越具体，其优先级越高
比如 id和class id更具体，
2、相同优先级，后面覆盖前面的
3、属性后面加！important的优先级越高（少用）
css选择器优先级最高到最低顺序为：
1.id选择器(#myid)
2.类选择器(.myclassname)
3.标签选择器(div,h1,p)
4.子选择器(ul < li)
5.后代选择器(li a)
6.伪类选择(a:hover,li:nth-child)
1、CSS 选择器是什么： 通俗的讲 CSS 选择器 用来对选定的页面元素进行样式修改。
2、什么是 css 选择器优先级:css选择器优先级是基于不同种类选择器组成的匹配规则。 在css规格文档中有其计算规则。
3、css 选择器的优先级:!important> 行内样式 > ID 选择器 > 类、伪类、属性选择器> 标签、伪元素选择器> 通配符、子类选择器、兄弟选择器
如何清除浮动(应试题，基本没人用浮动了)
为什么清除浮动：
由于内部元素浮动，脱离文档流。外层父元素无法正常包裹内部元素。
1、通过伪元素
给父元素加.clearfix
.clearfix:after{
content:'';
display:block:
height:0
clear:both;
}
2、通过BFC
父元素
overflow:hidden
或
float:left
或
position：absolute
或
display：inline-block
都可以触发BFC
缺点overflow:hidden，可能会使内部本应正常显示的元素被裁剪掉。
两种和模型的区别？
区分题：先说1再说2相同点、不同点。
第一种盒模型是content-box，
width指定的是content区域，而不是实际宽度，公式为
实际宽度=width=padding+border（你写width = 100px可能实际占120px）
第二种盒模型是border-box.weidt指定的是左右边框外侧的距离
实际宽度 = width
相同点都是用来指定宽度，不同点是border-box更好用
盒模型 box-sizing：
content-box 内容盒 内容就是盒子的边界。 width = 内容宽度
border box 边框盒 边框才是盒子的边界 width=内容宽度+padding+border
height同理
问：请说一下CSS盒模型？
答：
CSS盒模型分两种，一种是content box一种 border box。
区别content box宽度只包含content， border box 宽度包含到 border，包括padding、 content、border。如果没有padding和border那他俩宽度是一样的。
一般用border box 因为更好用一些。
