找工作总是会遇到很多专业性的问题，接下来就为大家整理了关于web前端面试时需要掌握的技巧，今天给大家带来的是CSS相关问题的解析，帮大家可以轻松度过面试顺利拿到offer。

　　display:none和visibility:hidden的区别?

　　display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

　　visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

　　CSS中link和@import的区别是?

　　1) link属于HTML标签，而@import是CSS提供的;

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

　　3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

　　4) link方式的样式的权重 高于@import的权重。

　　position的absolute与fixed共同点与不同点

　　共同点：1.改变行内元素的呈现方式，display被置为block;2.让元素脱离普通流，不占据空间;3.默认会覆盖到非定位元素上

　　不同点：absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

　　介绍一下CSS的盒子模型?

　　1)有两种，IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;

　　2)盒模型：内容(content)、填充(padding)、边界(margin)、 边框(border)。

　　CCS定位机制是什么?

　　CSS有三种基本定位机制：标准文流(Normal flow)，浮动(Floats)和定位(Absolute positioning)。

　　标准文档流

　　从左到右，从上到下，输出文档内容。有会计元素(从做导游撑满页面，独占一行，触碰到页面边缘时自动换行的元素，div,ul,li,dl,dt,p)和行级元素组成(能在同一行内显示并且不会改变html文档结构，如span,input)

　　浮动

　　设置为浮动的元素将会往左或者往右漂移，知道遇到阻碍-其他元素或者父级元素的边框。浮动元素不在标准文档流中占空间，但会随其后的浮动元素造成影响

　　定位

　　设置为定位的元素将从标准文档流中删除，不占据空间，然后通过top，left，right，bottom属性对其相对父元素进行定位。

　　CSS常见新特性

　　新的元素选择器

　　E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:last-child, E:first-of-type, E:only-child, E:only-of-type, E:empty, E:checked, E:enabled, E:disabled, E::selection, E:not(s)

　　@font-face

　　iconfont是指使用字体文件取代图片文件，来展示图标和一些特殊字体等元素。它使用CSS3中的@font-face属性，它允许加载自定义字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。它有很多优势: 首先它的体积要比图片小得多; 特定的属性(颜色,大小,透明)等修改起来就像是操作字体一样简单;iconfont具有矢量性, 放大缩小不会失真。

　　border-radius

　　又称圆角属性，通常使用该属性将图片圆角化，如头像。

　　word-wrap & text-overflow

　　word-wrap属性用来指出浏览器在单词内进行断句，防止字符串太长而找不到它的自然断句点时产生的溢出。