上文说到了HTML 一些标准，一些标签的异同，还有一些新的标签的特性。而今天将提到它的好兄弟CSS的一些问题。(其实CSS还是挺难的)

START

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

css.jpg

标准的CSS盒子模型： his width = content width + border width + padding width
比如 ： .box {width:100px;border:10px solid #ccc;padding:10px; margin:10px;}
那么标准的CSS盒子模型BOX总的宽度为 140 = 100 + 210+210；
而对于 IE来说 width 就是 contend width.

---

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

标签，Id和Class，还有伪类
其中 Class， 伪类a 是可以继承，还有 ul li dd dt 标签是可以继承的。

---

• CSS优先级算法如何计算？

原则一： 继承不如指定
原则二： id > .class > 标签选择符
原则三： 越具体 越 强大
CSS 优先级权重算法
元素标签中定义的样式（styles属性)，加1000
每个ID选择符，加100
每个Class，每个属性选择符（如[attribute=]）、每一个伪类 都是加10
每个元素选择符或者伪选择符是加1
然后四个数字累加就是得到CSS定义的优先级选项
然后就是从左到右比较大小，数字大的CSS样式优先级就高。

注意
!important声明的演示优先级是最高的，如果是有冲突那么再进行计算。
如果优先级相同，那么选择最后出现的样式。
继承得到的样式的优先级最低。

---

• CSS3有哪些新特性？

E[att^="val"] ---- 匹配具有att属性，且具有以val开头的E元素
E[att$="val"] ---- 匹配具有attr属性，且具有以val结尾的E元素
E[att*="val"] ---- 匹配具有attr属性，且具含有val的E元素
E：root -------- 匹配文档的根元素。在HTML中，根元素永远是HTML
E:nth-child(n) ----匹配父元素中的第n个子元素E
E:nth-last-child(n)---匹配父元素中倒数第n个结构子元素E
E：nth-of-type(n)--- 匹配同类型中第n个同级兄弟元素E
E： nth-last-of-type(n) ---- 麻痹手好累
E: last-child ----匹配父元素最后一个E元素
E：first-of-type ---匹配同级兄弟元素中的第一个E元素
E:only-child ---匹配属于父元素的唯一子元素E
E：only-of-type ---匹配属于同种类型的唯一元素E
E:empty ----匹配没有任何子元素（包括text节点）的元素E
E:target ----匹配相关URL指向的E元素
E:enabeled-----匹配所有用户界面(form表单)中处于可用状态的E元素
E:disabled----匹配所有用户界面(form表单)中处于可用状态的E元素
E:checked -----选中状态
E:selection -----被选中或者处于高亮状态
E：not（s） ----- 匹配所有不匹配简单选择符（s）的元素E
E~F ----- 匹配E元素之后的F元素

---

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

margin居中
css中首选的让元素水平 居中的方法就是使用 margin的一些属性将margin-left和margin-right属性设置为auto即可。 在实际使用之中，我们可以为这些需要剧中的元素创建一个起容器 作用的div。但是必须特别注意的是，该容器必须指定宽度。

text-align:
text-align:center并且引用到 body元素上即可 HACK!!!!

组合使用以上两种方法

最后一种负外边距解决

Container {

position:absolute;
left:50%;
width:a px;
margin-left:-a/2px; //这里的a 是个数字
}

----
- display有哪些值？说明他们的作用。
>  **常见的**
>inline, block,  inline-block,  none
>
>其中 none 之后，元素是不会保留在显示的空间中，但是`visibility:hidden`还会保留
>
>inline,block,inline-block,他们之间的区别是
>先来感性认识一下猛敲[DEMO](http://jsfiddle.net/qjgcjLm8/)
>
>**inline**
>如果内联对象设置了inline，那么对其设置width和height是没有用的，要让他size有所改变，必须要内容宽高改变，还有padding改变，**而且inline对象并不会单独占用一行**，后面的元素回紧随其后。
>
>**block**
>以block显示的对象是可以设置宽高的，而且它的实际宽高=**内容实际宽高+padding+border**
>它是独占一行的的。
>
>**那万一我既要设置一个元素的宽高，又要它不要独占一行**
>那就要inline-block了
>
>**不常见的**
>list-item
>list-item 此元素会作为列表显示。
>
>run-in此元素会根据上下文作为块级元素或内联元素显示。
>
>compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
>
>marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
>
>table 此元素会作为块级表格来显示（类似table），表格前后带有换行符。
>inline-table 此元素会作为内联表格来显示（类似table），表格前后没有换行符。
>table-row-group 此元素会作为一个或多个行的分组来显示（类似tbody）
table-header-group 此元素会作为一个或多个行的分组来显示（类似thead）
table-footer-group： 此元素会作为一个或多个行的分组来显示（类似tfoot）
table-row 此元素会作为一个表格行显示（类似 tr ）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 colgroup ）。
table-column 此元素会作为一个单元格列显示（类似 col ）
table-cell 此元素会作为一个表格单元格显示（类似 td 和 th）
table-caption 此元素会作为一个表格标题显示（类似 caption【真有面试题问得这么。。。】

---

- position的值relative和absolute定位原点是？
> relative 是以自己原始位置为定位位置
>absolute 是相对于离自己最近有定位父级元素为参照

----

- CSS3有哪些新特性？
> CSS选择器（路径选择）
>Font-face
>Word-wrap  [有break-word的 会自动换行]
>Text-overflow [设置属性为clip的，溢出后就会截去字体，设置属性为ellipsis时就会显示省略符号]

- 请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
> 这里有[张鑫旭大神的讲解](http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex属性，然后弹性盒子模型简介/)
> �也欢迎读者提供。。简化版本 ，我实在无法总结。