本章内容为CSS的一些面试题，博主自己以前整理的基础面试题，如有整理不对的地方，请各位大大指点出来。

介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

什么是盒子模型？

把所有的网页元素都看成一个盒子，它具有： 
content，padding，border，margin 
四个属性，这就是盒子模型。
 
盒子模型有两种形式：标准盒子模型，怪异盒子模型（IE盒模型）
 
首先，两种模式可以利用box-sizing属性进行自行选择：
　　标准模式：box-sizing:content-box;
　　怪异模式：box-sizing:border-box;
 
两种模式的区别：
　　标准模式会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。盒子的大小并不会被padding所撑开。
 
　　例：
　　 .box{ 
           box-sizing:border-box; //没有添加时，按照标准模式计算， 添加时按照怪异模式解析 
           width:200px; 
           height:200px; 
           border:2px solid black; 
           padding:50px; 
           margin:50px; 
     } 
 
标准模式：盒子总宽度/高度 = 内容区宽度 /高度+padding+border + margin。效果：


怪异模式：盒子总宽度/高度 = width/height + margin。效果：

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式设计集百中创建页面的图片排版大小，可以度智能地根据用户行为以及使用的设备问环境（系统答平台、屏幕尺寸、屏幕定向等）进行相对应的布局。

**基本原理：**通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明viewport：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

兼容 IE 需要 JS 进行辅助

CSS选择符有哪些？哪些属性可以继承？

CSS 选择符有哪些？
1.id选择器（#id）
2.类选择器（.class）
3.标签选择器（div，h1，p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[title]）
9.伪类选择器（a:hover，li:nth-child）
 
可继承的样式
1.字体系列属性 font，font-family，font-weight，font-size，font-style，font-variant，font-stretch，font-size-adjust
2.文本系列属性 text-indent，text-align，line-height，word-spacing，letter-spacing，text-transform，direction，color
3.元素可见性 visibility
4.表格布局属性 caption-side，border-collapse，border-spacing，empty-cells，table-layout
5.列表布局属性 list-style-type，list-style-image，list-style-position，list-style
6.生成内容属性 quotes
7.光标属性 cursor
8.页面样式属性 page，page-break-inside，windows，orphans
9.声音样式属性 speak，speak-punctuation，speak-numeral，speak-header，speech-rate，volume，voice-family，pitch，pitch-range，stress，richness，azimuth，elevation

浏览器是怎样解析CSS选择器的？

浏览器会从右往左解析css选择器
（从右往左的匹配在第一步就排除了大量的不符合条件的最右节点；而从左向右匹配规则的性能都浪费在了失败查找上面）
**

CSS优先级算法如何计算？ 

优先级算法如何计算？
1.优先级就近原则，同权重情况下样式定义最近者为准；
2.载入样式以最后载入的定位为准；
3.!important > id > class > tag；
4.important 比 内联优先级高，但内联比id要高；

为什么要初始化CSS样式。

为什么要初始化css样式
1.浏览器差异
不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异
2.提高编码质量
如果不初始化，整个页面做完会很糟糕，重复的css样式很多
 
 
最简单的初始化方法是：（不建议）

* {padding: 0; margin: 0;}
复制代码

 
淘宝样式 样式初始化

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
复制代码

 
腾讯QQ官网 样式初始化

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
a{color:#2d374b;text-decoration:none} 
a:hover{color:#cd0200;text-decoration:underline} 
em{font-style:normal} 
li{list-style:none} 
img{border:0;vertical-align:middle} 
table{border-collapse:collapse;border-spacing:0} 
p{word-wrap:break-word}
复制代码

 
新浪官网 样式初始化

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} 
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";} 
 
ul,ol{list-style-type:none;} 
select,input,img,select{vertical-align:middle;} 
 
a{text-decoration:none;} 
a:link{color:#009;} 
a:visited{color:#800080;} 
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
复制代码

 
网易官网 样式初始化

html {overflow-y:scroll;} 
body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;} 
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;} 
table,td,tr,th{font-size:12px;} 
li{list-style-type:none;} 
img{vertical-align:top;border:0;} 
ol,ul {list-style:none;} 
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;} 
address,cite,code,em,th {font-weight:normal; font-style:normal;}
复制代码

CSS3新增伪类有那些？

1.      p:first-of-type  选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
   2)      p:last-of-type   选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
   3)      p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
   4)      p:only-child     选择属于其父元素的唯一子元素的每个 <p> 元素。
   5)      p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
   6)      :enabled :disabled 控制表单控件的禁用状态。
   7)      :checked         单选框或复选框被选中。

::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。

单冒号（:）用于CSS3伪类
双冒号（::）用于CSS3为元素（伪元素由双冒号和伪元素名称组成）
CSS3中为了和伪类区分，所以伪元素就是用双冒号来表示了

css定义的权重

div{}														/*权重为1*/
.class1{}												/*权重为10*/
#id1{}													/*权重为100*/ 
#id1 div{}											/*权重为100+1=101*/
.class1 div{}										/*权重为10+1=11*/
.class1 .class2 div{}						/*权重为10+10+1=21*/
li:hover {
    color: blue !important;     /*权重大于所有*/
}
复制代码

口诀
从0开始，一个行样式+1000，一个id+100,一个属性选择器，class或者伪类+10，一个元素或者伪元素+1

相同的权重：以后面出现的选择器为最后规则
不同的权重，权重值高则生效

css权重规则
1、包含更高权重选择器的一条规则拥有更高的权重
2、ID选择器（#id）的权重比属性选择器([id="id"])高
3、带有上下文关系的选择器比单纯的元素选择器权重高
4、与元素近的规则生效
5、最后定义的这条规则会覆盖上面与之冲突的规则。
6、无论多少个元素组成的选择器，都没有一个class选择器权重高。
7、通配器选择器权重是0，被继承的css属性也带有权重，权重也是0

css多列等高如何实现？

1、使用flex布局(IE9以下版本不支持flex属性)
父标签 display:flex
子标签 flex:1
2、流体布局
给每一列添加相对应用的容器，并进行相互嵌套
3、使用内外边距相抵消
父标签 overflow:hidden
子标签 float:left/right

margin和padding分别适合什么场景使用？

margin：
需要在border外侧添加空白时
空白处不需要背景时
上下相连的两个盒子之间的空白，需要相互抵消时
padding：
需要在border内侧添加空白时
空白处需要背景时
上下相连的两个盒子之间的空白，希望等于两者之和时

display有哪些值？说明他们的作用。

1、none：元素不显示，且不保留位置
2、inline：默认属性，内联元素，前后无换行符
3、block：块级元素，前后有换行符
4、inline-block：行内块元素，既是内联元素，又可以设置宽高等属性

position的值relative和absolute定位原点是？

relative（相对定位）：定位原点是元素本身所在位置； absolute（绝对定位）：定位原点是离自己这一级元素最近的一级 position 设置为 absolute 或者 relative 的父元素的左上角为原点的

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位 static 默认值。没有定位，元素出现在正常的流中 inherit 规定从父元素继承 position 属性的值

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

浮动的行内变成块级元素，绝对定位的行内也会变成块级元素。绝对定位时浮动失效，top,bottom,left,right能改变位置。相邻普通流块级垂直方向margin叠压。浮动，inline-block，绝对定位不会和垂直方向其他元素margin叠压。BFC不会和子元素margin叠压。(absolute,fixed都是绝对定位)

display 属性规定元素应该生成的框的类型。 position 属性规定元素的定位类型。 Float也是是一种布局方式，它定义元素在哪个方向浮动。

总的来说，可以把它看作是一个类似优先级的机制， "position:absolute" 和 "position:fixed" 优先级最高，有它存在的时候，浮动不起作用，'display' 的值也需要调整； 其次，元素的 'float' 特性的值不是 "none" 的时候或者它是根元素的时候，调整 'display' 的值； 最后，非根元素，并且非浮动元素，并且非绝对定位的元素，'display' 特性值同设置值。

position:fixed;在android下无效怎么处理？

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
复制代码

device-width指的是设备的物理宽度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放

absolute的containing block(容器块)计算方式跟正常流有什么不同？

absolute 会向上级查找第一个 position 且属性不为 static 或者 fixed 的元素，再根据其元素的display属性进行判断

若为 inline 行级元素，则 containing block(容器块) 为能够包含其元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形； 若为 block 块级元素，则为该元素内的 padding bpx 如果都找不到，则为 initial containing block(容器块)。

1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉 padding 的部分）
2. absolute: 向上找最近的定位为 absolute/relative 的元素
3. fixed: 它的 containing block(容器块) 一律为根元素(html/body)，根元素也是 initial containing block(容器块)

CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

区别： 在Chrome下，visibility: collapse都与visibility: hidden没有什么区别，即仍会占用空间 在火狐浏览器、Opera里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置，不占用空间。 在IE即使设置了visibility: collapse，还是会显示元素。

li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，<li>换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。

方法一

<li>全写在一排

<li></li><li></li>
复制代码

方法二

将<ul>内的字符尺寸直接设为0 (在Safari浏览器依然出现间隔空白)

ul{font-size:0px;}
复制代码

方法三

将<ul>内的字符尺寸直接设为0 (在Safari浏览器依然出现间隔空白)

ul{letter-spacing: -5px;}
ul li{letter-spacing: normal;}
复制代码

CSS3有哪些新特性？

1）选择器
2）阴影
3）形状转换（2D <-> 3D）
4）变形
5）动画（过渡动画、帧动画）
6）边框
7）多重背景
8）反射
9）文字
10）颜色函数（rgba/hsl/hsla）
11）滤镜（filter）
12）弹性布局
13）多列布局
14）栅格布局
15）盒模型
16）Web字体
17）媒体查询
复制代码

请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

Flexbox意为"弹性布局"，用来为盒状模型提供最大的灵活性。 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流 可以很方便的用来做局中，能对不同屏幕大小自适应。在布局上有了比以前更加灵活的空间

拓展：Flex 布局一览

移动端的布局用过媒体查询吗？

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。

<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">
复制代码

CSS : @media only screen and (max-device-width:480px) {/css样式/}
复制代码

试写出大于1024并小于1360屏幕的媒体查询关键CSS代码

@media (min-width: 1024px) and (max-width: 1360px){
	/*样式区*/
}
复制代码

rem布局的优缺点

优点 相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示 rem 始终相对 html 大小，顺应不同网页字体大小展现，只需要在根元素确定参考值，可以使包裹文字的元素随着文字的缩放而缩放。 更能适应缩进/已字体单位padding或margin浏览器设置字体尺寸等情况（rem相对于字体大小，会同步改变）

缺点 在移动端使用时，rem+js只是宽度自适应了，高度没有做到自适应。 IE6-8无法支持。

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

css hack 不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程，就叫CSS Hack。

常见的兼容性问题

1、浏览器默认的margin和padding不同。 解决方案是加一个全局的*{margin:0;padding:0;}来统一。

2、png24位的图片在iE6浏览器上出现背景 解决方案是做成PNG8.

3、Chrome 中文界面下默认会将小于 12px 的文本 强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。 （可通过加入 CSS 属性transform: scale(0.75,0.75); 解决）

4、IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 解决方案是在float的标签样式控制中加入 display:inline;将其转化为行内属性。

5、在ie6，ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的。 解决方案是加上overflow:hidden或设置line-height为更小的高度。

6、min-height在IE6下不起作用。 解决方案是添加 height:auto !important;height:xxpx;其中xx就是min-height设置的值。

7、透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6;

8、a(有href属性)标签嵌套下的img标签，在IE下会带有边框。 解决办法是加上a img{border:none;}样式。

9、input边框问题。 去掉input边框一般用border:none;就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效。

10、ie6的默认CSS样式，涉及到border的有border-style:inset;border-width:2px;浏览器根据自己的内核解析规则，先解析自身的默认CS再 解析开发者书写的CSS，达到渲染标签的目的。IE6对INPUT的渲染存在bug，border:none;不被解析，当有border-width或border-colo r设置的时候才会令IE6去解析border-style:none;。 解决方案是用:border:0或border:0 none;或border:none:border-color:transparent;，推荐用第三种方案。

常用的hack技巧

/* CSS属性级Hack */
color:red; /* 所有浏览器可识别*/
_color:red; /* 仅IE6 识别 */
*color:red; /* IE6、IE7 识别 */
+color:red; /* IE6、IE7 识别 */
*+color:red; /* IE6、IE7 识别 */
[color:red; /* IE6、IE7 识别 */color:red9; /* IE6、IE7、IE8、IE9 识别 */color:red; /* IE8、IE9 识别*/color:red9; /* 仅IE9识别 */color:red ; /* 仅IE9识别 */color:red!important; /* IE6 不识别!important*/-------------------------------------------------------------/* CSS选择符级Hack */*html #demo { color:red;} /* 仅IE6 识别 */*+html #demo { color:red;} /* 仅IE7 识别 */body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */:root #demo { color:red9; } : /* 仅IE9识别 */--------------------------------------------------------------/* IE条件注释Hack */<!--[if IE]>此处内容只有IE可见<![endif]-->
<!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->
<!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->
<!--[if !IE 7]>此处内容只有IE7不能识别，其他版本都能识别，当然要在IE5以上。<![endif]-->
<!--[if gt IE 6]> IE6以上版本可识别,IE6无法识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if lt IE 7]> 低于IE7的版本才能识别，IE7无法识别。 <![endif]-->
<!--[if lte IE 7]> IE7以及IE7以下版本可识别<![endif]-->
<!--[if !IE]>此处内容只有非IE可见<![endif]-->

复制代码

对BFC规范(块级格式化上下文：block formatting context)的理解？

BFC的定义： BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。（BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。）

BFC的用处 避免外边距重叠 清除浮动 阻止元素被浮动元素覆盖

如何触发BFC呢？

1. float属性值不为: none
2. position属性值为: absolute || fixed
3. display属性值为: inline-block || flex
4. overflow属性值不为: visible

BFC布局规则

1. 浮动的元素会被父级计算高度（父级触发了BFC）
2. 非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）
3. margin不会传递给父级（父级触发了BFC）
4. 两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）