收藏
1、什么是CSS浮动
浮动：float：left、right、none
作用：想要从上往下排列的元素变成从左到右或从右到左排列。
如果子元素有浮动，那么父元素一定要设置高度；浮动之后脱离文档流，不占据原来的位置；子元素浮动，如果子元素的宽度的和大于父元素的宽度，那么子元素就会往下去排列；
2、绝对定位和相对定位怎么理解
绝对定位：absolute
参照物：相对于浏览器额可视窗口或者最近的有定位的（非static）父级元素来定位
特点：给元素设置绝对定位后，元素会脱离文档流，不占据原来的位置，下面的元素可以往上走
相对定位：relative
参照物：元素本身的位置
特点：移动之后还占据着原来的位置，不脱离文档流
3、块元素和行内元素的区别是什么
（1）块级元素：独占一行，可以设置宽高，块级元素可以作为所有内联元素的容器和部分块级元素的容器，常用的块级元素有：div,p,dl,dt,dd,ol,ul,fieldset,h1-h6,p,from,table,tr,td
（2）行内元素：不独占一整行，不可以设置宽高，宽高由内容撑开，行内元素也遵循盒子模型，但是margin-top、margin-bottom、padding-top、padding-bottom是没有效果的。常用的行内元素：a、span、i、b、em、br、sub、u
行内块元素：img、input、textarea
注意：当元素浮动（float）时会转化成行内块元素特点。
4、Href 和 src的区别
href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。
5、Css如何实现盒子水平垂直居中
6、常见的浏览器内核和前缀有哪些？ 微信的浏览器内核是什么
Chrome(谷歌浏览器) ： WebKit内核 -webkit-
Safari(苹果浏览器) ： WebKit内核 -webkit-
Firefox(火狐浏览器) ： Gecko内核 -moz-
IE(IE浏览器) ： Trident内核 -ms-
Opera(欧朋浏览器) ： Presto内核 -o-
微信的浏览器内核：X5内核是腾讯基于开源Webkit优化的浏览器渲染引擎
7、CSS3有哪些新特性？
1）选择器 2）CSS3 边框（Borders）（圆角边框，添加阴影框） 3）CSS3 背景（background-clip、background-size） 4）CSS3 渐变（线性渐变、径向渐变） 5）CSS3 文本效果（text-overflow、text-shadow） 6）CSS3 字体 7）CSS3 转换和变形（transform） 8）CSS3 过渡（transition） 9）CSS3 动画（animation） 10）CSS3 多媒体查询 11）CSS3伸缩布局盒模型(弹性盒)
8、::before 和 :after中双冒号和单冒号 有什么区别？
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）
双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，
比如:first-line、:first-letter、:before、:after等，
而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
想让插入的内容出现在其它内容前，使用::before，否者，使用::after；
在代码顺序上，::after生成的内容也比::before生成的内容靠后。
如果按堆栈视角，::after生成的内容会在::before生成的内容之上
9、怎么让Chrome支持小于12px 的文字
针对谷歌浏览器内核，加webkit前缀，用transform:scale()这个属性进行缩放！
<style>
p{
-webkit-transform:scale(0.8);
}
</style>
<p>
测试
</p>10、CSS优化、提高性能的方法有哪些？
加载性能：
1）css压缩：将写好的css进行打包压缩，可以减少很多的体积；
2） css单一样式：当需要下边距和左边距的时候，
很多时候选择：margin: top 0 bottom 0;
但 margin-bottom: bottom;margin-left: left;执行的效率更高；
3） 减少使用 @import, 而建议使用link, 因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载;
选择器性能：
CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
**避免使用通配规则**
如*{} 计算次数惊人！只对需要用到的元素进行选择
**尽量少的去对标签进行选择，而是用class**
如：#nav li{},可以为li加上nav_item的类名，如下选择.nav_item{}
**不要去用标签限定ID或者类选择符**
如：ul#nav,应该简化为#nav
**尽量少的去使用后代选择器，降低选择器的权重值**
后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素
**考虑继承**
了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则
渲染性能：
1.慎重使用高性能属性：浮动、定位；
2.尽量减少页面重排、重绘；
重排按照css的书写顺序：
·位置：positon、top、left、z-index、float、dispay
·大小：width、height、margin、padding
·文字系列： font、line-height、color、letter-spacing
·背景边框：background、 border
·其它：anmation、transition
重绘:border、outline、background、box-shadow,能使用background-color,就尽量不要使用background;
3.去除空规则：｛｝；
4.属性值为0时，不加单位；
5.属性值为浮动小数0.**，可以省略小数点之前的0；
6.标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后；
7.不使用@import前缀，它会影响css的加载速度；
8.充分利用css继承属性，减少代码量；
9.抽象提取公共样式，减少代码量；
10.选择器优化嵌套，尽量避免层级过深；
11.css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用;
12.将css文件放在页面最上面
可维护性、健壮性：
1 将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用,提高css的可维护性；
2 继上一条，oocss也是提高css性能的途径之一，通过定义可复用的、语义化良好的基础类，然后添加到html中，这也是很多ui框架都在使用的一种方法，例如：class=”btn btn-active btn-blue”；
3 样式与内容分离：讲css代码定义到外部css中；
4 容器与样式分离；