1、 display: none;与visibility: hidden;的区别

display: none;会让元素完全从 dom 树中消失，渲染的时候不占据任何空间。
visibility：hidden不会让元素从渲染树 dom 中消失，而且还是会占据一定的空间，只是内容不可见而已。

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

标准盒子模型：
宽度=内容的宽度（content）+ border + padding + margin

低版本IE盒子模型：
宽度=内容宽度（content+border+padding）+ margin

3、box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box

• context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
• border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding +content部分的高/宽

4、CSS选择器有哪些？哪些属性可以继承？

CSS选择器：

1. id选择器(#myid)
2. 类选择器(.myclassname)
3. 标签选择器(div, h1, p)
4. 相邻选择器(h1 + p)。只有p样式显示
5. 子选择器（ul > li）
6. 后代选择器（li a）
7. 通配符选择器（*）
8. 属性选择器（a[rel=”external”]）
9. 伪类选择器（a:hover, li:nth-child）

可继承的属性：font-size, font-family, color

优先级（就近原则）：!important > [ id > class > tag ]

!important 比内联优先级高

伪类和伪元素的区别

伪元素主要是用来创建一些不存在原有dom结构树种的元素，例如：用::before和::after在一些存在的元素前后添加文字样式等，这些被添加的内容会以具体的UI显示出来，被用户所看到的，这些内容不会改变文档的内容，不会出现在DOM中，不可复制，仅仅是在CSS渲染层加入。CSS3中建议使用::表示伪元素，如：div::before。

伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式。例如a元素的:hover,
:active等。CSS3中建议使用:表示伪元素，如：a:hover

5、CSS优先级算法如何计算？

• 元素选择符： 1
• class选择符： 10
• id选择符：100
• 内联样式：1000

注意：通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0

6、CSS3新增伪类有那些?

• p:first-of-type 选择属于其父元素的首个元素(即第一个p）
• p:last-of-type 选择属于其父元素的最后元素
• p:only-of-type 选择属于其父元素唯一的元素（只有一个p时有效果）
• p:only-child 选择属于其父元素的唯一子元素
• p:nth-child(2) 选择属于其父元素的第二个子元素
• :enabled :disabled 表单控件的禁用状态。
• :checked 单选框或复选框被选中。

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

[1] 水平居中：margin：0 auto；

[2] 浮动（上下左右居中）

   .box{
    height: 100px;
    width: 100px;
    float: left;
    position: absolute;
    border: 10px solid #00FFFF;
    background-color: #EE82EE;
    top: 50%;
    left: 50%;
    transform: translateX(-50px) translateY(-50px);
   }
1
2
3
4
5
6
7
8
9
10
11

[3] 绝对定位（上下左右居中）

   .box{
    height: 100px;
    width: 100px;
    position: absolute;
    border: 10px solid #00FFFF;
    background-color: #EE82EE;
    top: 50%;
    left: 50%;
    transform: translateX(-50px) translateY(-50px);
   }
1
2
3
4
5
6
7
8
9
10

   .box{
    height: 100px;
    width: 100px;
    position: absolute;
    border: 10px solid #00FFFF;
    background-color: #EE82EE;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;  
   }
1
2
3
4
5
6
7
8
9
10
11

8、display有哪些值？说明他们的作用?

• inline（默认）–内联。默认宽度为内容宽度，不可设置宽高，同行显示

• inline-block 默认宽度为内容宽度，可以设置宽高，同行显示

• none–隐藏。元素不显示，并从文档流中移除

• block–块显示。默认宽度为父元素宽度，可设置宽高，换行显示

• table–表格显示。 此元素会作为会计表格来显示

• list-item–项目列表。可以设置宽高，同行显示

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

9、position的值？

【1】static（默认）：按照正常文档流进行排列；
【2】relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
Relative：元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。
【3】absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
【4】fixed(固定定位)：所固定的参照对像是可视窗口。
【5】Inherit：继承父元素的position值。

常见的兼容性问题？

• 不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}

• IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。

• 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

• 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

• IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。

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

• 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

外边距合并问题

所谓外边距合并，指的是当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

块级格式上下文

块级上下文：BFC格式化上下文，它是一个独立的渲染区域，让处于 BFC内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响

定位方案

内部的Box会在垂直方向上一个接一个放置。
​ Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。 ​ 每个元素的margin box
的左边，与包含块border box的左边相接触。 ​ BFC的区域不会与float box重叠。
​ BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 ​ 计算BFC的高度时，浮动元素也会参与计算。

满足下列条件之一就可触发BFC

1. 根元素，即html
2. float的值不为none（默认）
3. overflow的值不为visible（默认）
4. display的值为inline-block、table-cell、table-caption
5. position的值为absolute或fixed