link进css，和@import进来的css，有什么区别？

页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载

列举一些css3新特性

媒体查询（可以查询设备的物理像素然后进行自适应操作）
transform，transition，translate,scale,skelw，rotate等相关动画效果
box-shadow,text-shadow等特效
CSS3 @font-face 规则,设计师可以引入任意的字体了
CSS3 @keyframes 规则，可以自己创建一些动画等
2D、3D转换
添加了border-radius，border-image等属性
CSS3 创建多列（column-count规定文本可以以几列的方式布局）

css垂直居中

div.box{
    weight:200px;
    height:400px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

如何清除浮动

.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
  zoom: 1; // 兼容IE
}

如何显示小于12px的字体

p{font-size:10px; transform:scale(0.8);}

用css怎么实现一个三角形？

首先，需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

为什么要初始化css

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

什么是bfc？如何创建bfc？

bfc是边距重叠的解决方案。

bfc使用场景：

上下margin不重叠；
不与浮动元素元素重叠；
使浮动元素的子元素，让其父级高度进行计算

满足下列条件之一就可触发BFC

根元素，即html
float的值不为none（默认）
overflow的值不为visible（默认）
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

浏览器是怎么解析css选择器的

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

.png、jpg、gif、webp 这些图片格式解释一下，分别什么时候用

png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。大多数地方都可以用。

jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。

gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.

webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

style标签写在body后与body前有什么区别？

页面加载自上而下，当然是先加载样式。

写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

一行或多行文本超出隐藏

一行

overflow:hidden; //超出文本隐藏
 
white-space:nowrap; //溢出不换行
 
text-overflow:ellipsis; //溢出省略号显示

多行，但兼容性没有很好

overflow:hidden; //超出文本隐藏

text-overflow:ellipsis; //溢出省略号显示

display:-webkit-box; //将对象作为弹性伸缩盒子

-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式-从上到下垂直排列

-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，数组代表显示的行数,如2,3,4....

前端增长（css）