）inherit：
规定应该从父元素继承display属性的值。
display:
inline-block什么时候会显示间隙？
（携程）
移除空格、使用margin负值、使用font-size:
0、letter-spacing、word-spacing
4、介绍一下CSS的盒子模型？
1）有两种，IE盒子模型、标准W3C盒子模型；IE的width包含了content，border和padding；
2）盒模型：
内容（content）、填充（padding）、边界（margin）、边框（border）。
5、CSS选择符有哪些？
哪些属性可以继承？
优先级算法如何计算？
CSS3新增伪类有哪些？
1）id选择器（#myid）
2）类选择器（.myclassname）
3）标签选择器（div，h1，p）
4）相邻选择器（h1+p）
5）子选择器（ul>li）
6）后代选择器（lia）
7）通配符选择器
8）属性选择器（a[rel="external"]）
9）伪类选择器（a:
hover,li:
nth-child）
可继承的样式：
font-sizefontfamilycolor,ULLIDLDDDTtext-indent（一些font类和text类都可以继承）
不可继承的样式：
borderpaddingmarginwidthheight
优先级就近原则，同权重情况下样式定义最近者为准载入样式以最后载入的定位为准;
载入样式以最后载入的定位为准;
优先级为:
!
important>id>class=伪类>tag；important比内联优先级高，内联比id优先级高
继承得到的样式的优先级最低。
6、CSS3新特性以及新增伪类举例：
新增各种CSS选择器（:
not（.input）：
所有class不是“input”的节点）
圆角（border-radius:
8px）
多列布局（multi-columnlayout）
阴影和反射（box-Shadow\Reflect）
文字特效（text-shadow、）
文字渲染（Text-decoration）
线性渐变（gradient）
旋转（transform）
transform:
rotate（9deg）scale（0.85,0.90）translate（0px,-30px）skew（-9deg,0deg）Animationrgba;//旋转，缩放，定位，倾斜，动画多背景增加了更多的css选择器
p:
first-of-type选择该p元素是其父元素的首个
元素；
p:
last-of-type选择该p元素是其父元素的最后
元素；
p:
only-of-type选择该p元素是其父元素唯一的
元素，还是可以有其他的元素，只要p元素只有一个；
p:
only-child选择该p元素是其父元素的唯一子元素；
p:
nth-child（n）选择属于其父元素的第n个p子元素（排序的时候是和其他子元素一起的排序中选取第几个元素，不是单独p元素排序）；p:
nth-child（odd）匹配所以奇数行;p:
nth-child（even）匹配所有偶数行，元素的第一个子元素索引为“1”。
p:
nth-child（3n+1）三层循环中的第一行，可以是数字，关键词或公式：
使用公式（an+b）。
描述：
表示周期的长度，n是计数器（从0开始），b是偏移值。
:
after在元素之后添加内容,也可以用来做清除浮动。
:
before在元素之前添加内容
:
enabled
:
disabled控制表单控件的禁用状态。
:
checked单选框或复选框被选中。
7、position的值relative和absolute定位原点是？
absolute
生成绝对定位的元素，相对于值不为static的第一个父元素进行定位。
fixed（老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
生成相对定位的元素，相对于其正常位置进行定位。
static
默认值。
没有定位，元素出现在正常的流中（忽略top,bottom,left,rightz-index声明）。
inherit
规定从父元素继承position属性的值。
8、position的absolute与fixed共同点与不同点
A：
共同点：
1）.改变行内元素的呈现方式，display被置为block；
2）.让元素脱离普通流，不占据空间；
3）.默认会覆盖到非定位元素上;
B：
不同点：
absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。
当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。
9、请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。
在传统的布局方式中，block布局是把块在垂直方向从上到下依次排列的；而inline布局则是在水平方向来排列。
弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：
弹性布局适合于移动前端开发，在Android和ios上也完美支持
10、用纯CSS创建一个三角形的原理是什么？
把上、左、右三条边隐藏掉（颜色设为transparent）
div#demo{
width:
0;
height:
0;
border-width:
20px!
important;
border-style:
solid;
border-color:
transparenttransparentredtransparent;
}
注：
IE6下将边框设置为transparent并不会透明，会产生阴影，可设置为border-style:
dasheddashedsoliddashed;
用CSS3transfrom旋转45度实现
-webkit-transform:
rotate（45deg）;
-moz-transform:
rotate（45deg）;
-ms-transform:
rotate（45deg）;
-o-transform:
rotate（45deg）;
transform:
rotate（45deg）;
11、常用的csshack的技巧？
条件HACK：
--[if符号（gt,gte,lt,lte,!
）IE版本（6,7...）]Html/Css-->
属性级HACK：
_：
选择IE6及以下。
连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线更为合适。
*选择IE7及以下。
诸如：
（+）与（#）之类的均可使用，不过业界对（*）的认知度更高
\9：
选择IE6+
\0：
选择IE8+和Opera15以下的浏览器
e.g.
.bb{
background-color:
#f1ee18;/*所有识别*/
.background-color:
#00deff\9;/*IE6、7、8识别*/
*background-color:
#a200ff;/*IE6、7识别*/（+和#也可）
_background-color:
#1e0bd1;/*IE6识别*/
}
选择符级HACK：
在选择符前面加*，+构成选择符级HACK。
12、li与li之间有看不见的空白间隔是什么原因引起的？
有什么解决办法？
行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决方法：
（1）浮动li中float：
left；
（2）在ul中用font-size：
0（谷歌不支持）；可以使用letter-space：
-3px；
13、CSS里的visibility属性有个collapse属性值是干嘛用的？
在不同浏览器下以后什么区别？
当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。
（1）谷歌浏览器中，使用collapse值和使用hidden没有区别。
（2）火狐，opera和IE，使用collapse值和使用display：
none没有什么区别。
14、position跟display、margincollapse、overflow、float这些特性相互叠加后会怎么样？
display属性规定元素应该生成的框的类型；
position属性规定元素的定位类型；
float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：
position：
absolute/fixed优先级最高，有他们在时，float浮动不起作用，display值需要调整。
注：
浮动或者absolute定位的元素，只能是块元素或表格。
15、对BFC规范（块级格式化上下文：
blockformattingcontext）的理解？
BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。
在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。
（W3CCSS2.1规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。
）
一个页面是由很多个Box组成的,元素的类型和display属性,决定了这个Box的类型。
不同类型的Box,会参与不同的FormattingContext（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。
定位方案：
（1）普通流（normalflow）按照html中的先后位置至上而下布局，行内元素水平排列，当前行被占满后换行，块级元素会被渲染为完整的新行。
（2）浮动（floats）。
元素首先按照普通流位置出现，然后根据浮动的方向尽可能的向左向右偏移，与印刷的文本环绕相似。
（3）绝对定位（absoluteposition）。
绝对定位中，元素会整体脱离普通流BFC正是属于普通流，因此对兄弟元素也不会造成什么影响。
具有BFC的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器没有的一些特性。
浮动元素，绝对定位元素，display，overflow会触发BFC。
特性：
（1）会阻止外边距折叠。
（2）会包含浮动元素。
（3）阻止元素被浮动元素覆盖。
16、css定义的权重
以下是权重的规则：
标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：
/*权重为10+1=11*/
.class1div{
}
/*权重为10+10+1=21*/
.class1.class2div{
}
如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现
17、设置元素浮动后，该元素的display值是多少？
请解释一下为什么会出现浮动和什么时候需要清除浮动？
清除浮动的方式
设置元素浮动后，display：
block。
IE出现双边框的原因：
浮动元素的浮动方向与margin的方向一致会出现双边框。
解决bug：
（1）给浮动元素添加一个display：
inline
（2）给IE6写一个hack，其值为正常值的一半。
浮动元素脱离文档流，不占据空间。
浮动元素碰到包含它的边框或者浮动元素的边框停留。
为什么会出现浮动:
出现浮动之后，我们可以很好的进行页面布局。
浮动元素引起的问题：
（1）在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长撑开以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。
这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
（2）与浮动元素同级的非浮动元素会跟随其后。
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除浮动的方式：
1）使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签
both;">
（缺点：
不过这个办法会增加无意义标签使HTML结构看起来不够简洁。
）
2）使用overflow。
给包含浮动元素的父标签添加css属性overflow:
auto;zoom:
1;zoom:
1用于兼容IE6。
||overflow:
hidden。
3）使用after伪对象清除浮动。
该方法只适用于非IE浏览器。
具体写法可参照以下示例。
使用中需注意以下几点。
该方法中必须为需要清除浮动元素的伪对象中设置height:
0，否则该元素会比实际高出若干像素；
清除浮动是为了清除使用浮动元素产生的影响。
浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
4）、父级div定义height；
5）、父级div也一起浮动；
6）、父级div定义display:
table；
7）、常规的使用一个class；
.clearfix:
before,.clearfix:
after{
content:
".";
display:
table;
}
.clearfix:
after{
clear:
both;
}
.clearfix{
*zoom:
1;
}
8）、SASS编译的时候，在浮动元素的父级div定义伪类:
after
&:
after,&:
before{
content:
".";
visibility:
hidden;
display:
block;
height:
0;
clear:
both;
}
解析原理：
1）display:
block使生成的元素以块级元素显示,占满剩余空间。
2）height:
0避免生成内容破坏原有布局的高度。
3）visibility:
hidden使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互。
4）通过content:
"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的content:
".",有些版本可能content里面内容为空,是不推荐这样做的,firefox直到7.0content:
”"仍然会产生额外的空隙。
5）zoom：
1触发IEhasLayout。
通过分析发现，除了clear：
both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：
0，line-height：
0。
zoom:
1的清楚浮动原理?
清除浮动，触发hasLayout。
Zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。
解决ie下比较奇葩的bug。
譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。
来龙去脉大概如下：
当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。
Zoom属是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。
然而，zoom现在已经被逐步标准化，出现在CSS3.0规范草案中。
目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？
可以通过css3里面的动画属性scale进行缩放。
18、使用CSS预处理器吗？
喜欢那个？
预处理器：
less，sass等等（给css像其他程序语言一样，加入一些编程元素，让css能像其他程序语言一样做一些预定的处理，然后就有了css预处理器）喜欢Sass，less，stylus。
Sass是采用Ruby语言编写的一款CSS预处理语言
$color:
red
.test{
color：
$color;
}
/*执行结果：
*/
.test{
color：
red;
}
（1）Sass语法
$font-stack:
Helvetica,sans-serif//定义变量
$primary-color:
#333//定义变量
body
font:
100%$font-stack
color:
$primary-color
（2）CSS语法
$font-stack:
Helvetica,sans-serif;
$primary-color:
#333;
body{
font:
100%$font-stack;
color:
$primary-color;
}
/*编译出来的CSS*/
body{
font:
100%Helvetica,sans-serif;
color:
#333;
}
19、CSS优化、提高性能的方法有哪些？
关键选择器（keyselector）。
选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）；
如果规定拥有ID选择器作为其关键选择器，则不要为规则
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
-
资深
前端
工程师
总结
面试
知识点
大全
CSS
冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
资深前端工程师总结前端面试知识点大全CSS篇.docx
