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

（1）有两种，IE 盒子模型、W3C 盒子模型；

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

（3）区 别：IE 的 content 部分把 border 和 padding 计算了进去；

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

* 1.id 选择器（# myid）

2. 类选择器（.myclassname）

3. 标签选择器（div, h1, p）

4. 相邻选择器（h1 + p）

5. 子选择器（ul > li）

6. 后代选择器（li a）

7. 通配符选择器（*）

8. 属性选择器（a[rel = “external”]）

9. 伪类选择器（a:hover, li:nth-child）

* 可继承的样式：font-size font-family color, UL LI DL DD DT;

* 不可继承的样式：border padding margin width height ;

3，CSS 优先级算法如何计算？

* 优先级就近原则，同权重情况下样式定义最近者为准;

* 载入样式以最后载入的定位为准;

优先级为:

!important > id > class > tag

important 比 内联优先级高

4，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> 元素。

:after 在元素之前添加内容, 也可以用来做清除浮动。

:before 在元素之后添加内容

:enabled

:disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

5，如何居中 div？如何居中一个浮动元素？如何让绝对定位的 div 居中？

给 div 设置一个宽度，然后添加 margin:0 auto 属性

div{
width:200px;
margin:0 auto;
}

居中一个浮动元素

确定容器的宽高 宽 500 高 300 的层

设置层的外边距

.div {
width:500px ;
height:300px;// 高度可以不设
margin: -150px 0 0 -250px;
position:relative; // 相对定位
background-color:pink; // 方便看效果
left:50%;
top:50%;
}

让绝对定位的 div 居中

div{

  position: absolute;
  width: 1200px;
  background: none;
  margin: 0 auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

}

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

block 象块类型元素一样显示。

none 缺省值。象行内元素类型一样显示。

inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。

list-item 象块类型元素一样显示，并添加样式列表标记。

table 此元素会作为块级表格来显示

inherit 规定应该从父元素继承 display 属性的值

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

absolute 生成绝对定位的元素，相对于值不为 static 的第一个父元素进行定位。

fixed（老 IE 不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。

relative 生成相对定位的元素，相对于其正常位置进行定位。

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。

inherit 规定从父元素继承 position 属性的值。

8，CSS3 有哪些新特性？

新增各种 CSS 选择器（: not(.input)：所有 class 不是“input”的节点）

圆角（border-radius:8px）

多列布局（multi-column layout）

阴影和反射（Shadow\Reflect）

文字特效（text-shadow、）

文字渲染（Text-decoration）

线性渐变（gradient）

旋转（transform）

增加了旋转, 缩放, 定位, 倾斜, 动画，多背景

transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

9，用纯 CSS 创建一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）

demo {

width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}

10，一个满屏 品 字布局 如何设计?

简单的方式：

上面的 div 宽 100%，

下面的两个 div 分别宽 50%，

然后用 float 或者 inline 使其不换行即可

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

行框的排列会受到中间空白（回车 \ 空格）等的影响，因为空格也属于字符, 这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为 0，就没有空格了。

12，为什么要初始化 CSS 样式。

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

– 当然，初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法：* {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;}

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

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

1、若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；

2、否则, 则由这个祖先元素的 padding box 构成。

如果都找不到，则为 initial containing block。

补充：

1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉 padding 的部分）

2. absolute: 向上找最近的定位为 absolute/relative 的元素

3. fixed: 它的 containing block 一律为根元素(html/body)，根元素也是 initial containing block

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

（W3C CSS 2.1 规范中的一个概念, 它是一个独立容器，决定了元素如何对其内容进行定位, 以及与其他元素的关系和相互作用。）

一个页面是由很多个 Box 组成的, 元素的类型和 display 属性, 决定了这个 Box 的类型。

不同类型的 Box, 会参与不同的 Formatting Context（决定如何渲染文档的容器）, 因此 Box 内的元素会以不同的方式渲染, 也就是说 BFC 内部的元素和外部的元素不会互相影响。

创建规则：

根元素

浮动元素（float 不是 none）

绝对定位元素（position 取值为 absolute 或 fixed）

display 取值为 inline-block,table-cell, table-caption,flex, inline-flex 之一的元素

overflow 不是 visible 的元素

作用：

可以包含浮动元素

不被浮动元素覆盖

阻止父子元素的 margin 折叠

15，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{}

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现