前端面试之CSS部分
一、介绍一下CSS的盒子模型，低版本IE的盒子模型有什么不同？
（1）有两种， IE 盒子模型、标准 W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
（3）区 别： IE的content部分包含了 border 和 pading;
二、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
选择符：
- id选择器（ # myid）
- 类选择器（.myclassname）
- 标签选择器（div, h1, p）
- 相邻选择器（h1 + p）
- 子选择器（ul > li）
- 后代选择器（li a）
- 通配符选择器（ * ）
- 属性选择器（a[rel = "external"]）
- 伪类选择器（a: hover, li: nth - child）
可继承的样式： font-size font-family color, ul li dl dd dt;
不可继承的样式：border padding margin width height ;
优先级就近原则，同权重情况下样式定义最近者为准; 载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比内联优先级高
CSS3新增伪类举例：
- p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
- p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
- p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
- p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
- p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
- :enabled :disabled 控制表单控件的禁用状态。
- :checked 单选框或复选框被选中。
三、列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
display的值：
block 像块类型元素一样显示。
none 缺省值。像行内元素类型一样显示。
inline-block 像行内元素一样显示，但其内容象块类型元素一样显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
定位原点：
- absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
- fixed （老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。
- relative：生成相对定位的元素，相对于其正常位置进行定位。
- static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
- inherit： 规定从父元素继承 position 属性的值。
四、CSS3有哪些新特性
CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform），transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜增加了更多的CSS选择器 多背景 rgba
五、对BFC规范的理解
W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。
六、 css定义的权重
/*以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：*/
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
/*如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现*/
七、实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。
<div style="height:1px;overflow:hidden;background:red"></div>
八、描述一下CSS中的渐进增强, 优雅降级之间的区别?
- 优雅降级指为现代浏览器制作网站,然后保证为某些老版本的浏览器提供基于可用的体验.新特性在老版本浏览器中会降级, 且一般会有一个分界点, 声明不支持哪些老版本的浏览器. 有些时候也会警告用户更换其浏览器.
- 渐进增强与优雅降级相反. 渐进增强一开始就针对低版本浏览器构建页面,然后再针对高级浏览器增加特效和其他交互效果.渐进增强关注内容本身.
九、清除浮动有几种方法?
1.给父级元素定义高度；
2.给父级元素添加overflow:hidden属性；
3.在浮动元素最后添加一个空的块级元素,并给该块级元素添加{clear:both;}；
4.给父级元素添加伪元素,代码如下
.clearfix.after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
十、水平垂直居中的方式有几种?
1.将margin-left和margin-right设置为auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.child{
margin: 0 auto;
width:50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Demo</div>
</div>
</body>
</html>
2.采用absolute + transform的方式(绝对定位+水平移动)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.parent{
position : relative;
}
.child{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Demo</div>
</div>
</body>
</html>
3.采用inline-block + text-align + table-cell + vertical-align(单元格方式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.parent{
display:table-cell;
vertical-align:middle;
text-align:center;
width:200px; /*如果使用该方法,父盒子得设定宽度*/
}
.child{
display:inline-block;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Demo</div>
</div>
</body>
</html>
十一、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
.bb{
background-color:red;/*所有识别*/
background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
* IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性。
解决方法:统一通过getAttribute()获取自定义属性。
* IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
* 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
十二、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
十三、为什么要初始化CSS样式。
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
十四、请解释一下为什么需要清除浮动？
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
十五、什么是外边距合并？
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
w3school介绍网址：w3school介绍网址
十六、margin和padding分别适合什么场景使用？
margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。
margin用于布局分开元素使元素与元素互不相干；
padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段距离
十七、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
双冒号是在当前规范中引入的，用于区分伪类和伪元素。新的在CSS3中引入的伪元素不允许再支持旧的单冒号的写法。
