这是我参与更文挑战的第5天，活动详情查看: 更文挑战
CSS 一直都是前端开发人员比较忽略的模块，也是后端开发人员比较害怕的地方，就面试方面而已，考察一个前端开发人员的基本功厉不厉害，问一问基础的原理就知道，不可小视的CSS。
1，对比一下block, inline, inine-block的区别?
（1）block 块级元素的特点：
1，一个块级元素独占一行
2，元素的宽，高，顶部，底部边距都是可控制修改的, margin, padding都可控制
3，元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
（2）inline 内联元素的特点：
1，内联元素和其他的元素都在一行上，直到一行排列不下，才会新换一行
2，元素的高度、宽度及顶部和底部边距都是不可设置，width,height属性无效
水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；
竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果
3，元素的宽度就是它包含的文字或图片的宽度，不可改变
（3）inline-block 内联块状元素：
1，同时具备内联元素、块状元素的特点，元素在同一行上显示
2，元素的宽，高，顶部，底部边距都是可控制修改的
总结：常用的block元素和inline元素汇总
block元素： div, p, h1...h6, ol,ul,dl, table, from, blockquote, address,hr
HTML5新增的： header, footer, asider, section
inline元素：span, a, button, textarea, select, strong, small, lable,br, em,
inline-block元素： img, input
2，对比一下position,float, 以及static,relative,absolute的区别
CSS有三种基本的定位机制：文档流，浮动，和绝对定位，简称三类模型，分别是：普通流模型，浮动模型和定位模型。
一般HTML元素分为两种：块级元素和行内元素。像div,p这些元素属于块级元素，像span, strong,等属于行内元素。块级元素是从上到下一行一行的排列，默认一个块级元素会占用一行，跟在后面的元素会另起一行排列，行内元素会在一行中水平布置，从前到后的排列
（1）position, float的区别
文档流：在css中有一个z-index属性，它决定页面元素在z轴的高度，默认情况下，所有的页面元素均位于z-index:0 这一层，而这一层顺序排列的元素就叫做文档流。只有，float和position都是通过改变文档流来实现不同的定位。
- float 是浮动定位，设置后，对应的模块都会脱离文档流, 定义元素的浮动方向，浮动的元素会生成一个块级框，在一行并排显示。有时候可以用display:inline-block代替实现float相同的效果。
- position是给元素定位,有多种定位方式，
（2）float和position的属性
position: static
是默认的方式，所有的元素在默认的情况下都是static
position: relative
相对定位，相对于原来该元素在普通文档流中的位置重新定位，依旧在文档流中占据位置，没有脱离文档流，
position: absolute
绝对定位，根据最近的设置了relative|absolute的父元素进行定位。如果它的父元素都没有设置position:relative|absolute定位的元素，就根据根元素进行定位。
position:fixed
脱离文档流，固定元素到窗口的位置，行内元素的display会变成block,覆盖到非定位元素上。
float: left|right|none|both
float元素，智能横行浮动，不能纵向浮动，完全脱离文档流，元素的display变成block,
浮动元素的后一个元素会围绕着该浮动元素进行排列，所以要进行clear清除
总结；设置了position:relative和position:absolute都会让元素浮动起来，都会改变正常情况下的文档流，不同的是：position:relative会保留自己在z-index:0层的位置，left, top,right,bottom的值都是相对于自己在z-index:0层的位置。 而position:absolute会完全脱离文档流，不再z-index:0层保留占位符，其left,top,right,bottom的值是相对于自己最近一个设置了position:relative|absolute的祖先元素（父元素），如果祖先元素全都没有设置，那么就相对于body元素。float也能改变文档流，不同的是，float不会让元素浮到另一个元素上面，因为它仍然让元素在z-index:0层排列 ，只能通过float:left|right来控制元素在同一层左浮动，右浮动，改变了正常的文档流排列，并且影响周围的和下一个元素。position:absolute和float都会隐式的改变元素display类型，让元素以inline-block的方式显示，可以设置长宽。position:relative却不会隐式的改变display类型。
3，说说浏览器的渲染机制
1，DOM树：首页浏览器把获取到的HTML源码解析成一个DOM树，HTML中的每一个tag(标签元素)都是这个DOM树上的一个节点，它的根节点就是document对象，这个DOM树里面包含了所有的HTML标签。
2，样式结构体：浏览器把所有的样式解析成样式结构体，在解析的过程中，会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式
3，构建：然后DOM 树和样式结构体组合构建render tree, render tree不同与DOM 树，它可以识别样式，构建完成的render tree 每一个节点（node） 都有自己的样式（style）, 浏览器可以根据构建完成的render tree开始绘制页面，
4，布局：构建render tree 完成之后，开始布局，从根节点开始递归调用，计算每一个元素的大小，位置，精准的给出每一个元素的坐标，
5，绘制：布局完成之后，遍历渲染树，绘制渲染每一个节点的元素
4，说说什么是回流，什么重绘？
回流：元素的大小或者位置发生改变，添加或删除元素，元素的内容发生变化，等等，
都会导致页面布局发生变化，此时会触发重新布局，导致页面重新渲染，通常在第四步骤发生，重新布局。
重绘： 元素样式的改变，但高度，大小，位置都不变，即：只改变自身样式，不会影响到其他元素，通常在第五步骤发生，重新绘制
常见的： color, background-color, visibility
特点；回流必将引起重绘，重绘不一定回流，每个页面至少需要一次回流和重绘
5，如何减少回流和重绘？
1，现在的浏览器会使用队列来储存多次修改，批量执行来优化重排过程，进行优化，以此减少回流和重绘的次数，达到优化效果
2，代码层次：
- 不要1个1个改变元素的样式属性，最好直接改变className，但className是预先定义好的样式，不是动态的，如果你要动态改变一些样式，则使用cssText来改变
- 先display:none 隐藏元素，然后对该元素进行所有的操作，最后再显示该元素。因对display:none的元素进行操作不会引起回流、重绘。
- 使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流，改变了布局
- 避免频繁操作样式，避免用JS频繁操作DOM
6，问你几个小技巧，如何让Chrome支持小于12px的文字？
font-size:12px;
-webkit-transform:scale(0.8);
7，说说CSS中选择器的优先级和权重大小？
通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式 < !important
!important 无限，优先级最高。
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
8，面试官最喜欢问题，如何让div水平垂直居中?
1, 方案一： 如果已知容器的高度和宽度
div{
position: absolute;
width:500px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px;
}
这里使用了绝对定位position:absolute，使用left和top设置对象距离上和左为50%，但如果设置50%，实际上盒子是没有实现居中效果.因为当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置
当然也可以用transform
div{
position: absolute;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2,方案二，利用 flex 布局实际使用时应考虑兼容性
.container{
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div{
width: 100px;
height: 100px;
}
9，为什么要清除浮动？清除浮动的方式?
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，
而高度的塌陷使我们页面后面的布局不能正常显示,影响到后面元素的正常位置
后续还会持续更新，把大家面试常常遇到的总结一下
