CSS基础

介绍一下CSS的盒模型

一个盒模型包括内容(content)、填充(padding)、边框(border)、边界(margin)，
HTML中每一个标签都有它自己的盒模型属性

CSS选择符有哪些？

1）上下文选择符（空格、>、+、~、*）
2）ID和类选择符
3）属性选择符
4）结构化伪类（first-child、last-child、nth-child(odd) 等等）

CSS选择符优先级算法如何计算？

计算特指度 I-C-E

1、选择符中有一个ID，就在I的位置上+1
2、选择符中有一个类，就在C的位置上+1
3，选择符中有一个标签名，就在E的位置上+1
例子：
p 0-0-1 特指度=1
p.largetext 0-1-1 特指度=11
p#largetext 1-0-1 特指度=101
body p#largetext 1-0-2 特指度=102
body p#largetext ul.mylist 1-1-3 特指度=113
body p#largetext ul.mylist li 1-1-4 特指度=114

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

千万别以为只有 block、inline、none、inline-block

display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group |run-in |box | inline-box | flexbox | inline-flexbox | flex | inline-flex

重要且常用的：
none、inline、block、
inline-block：指定对象为内联块元素。 主要的用处是用来处理行内非替换元素的高宽问题的
行内非替换元素，比如span、a等标签，正常情况下是不能设置宽高
table-cell：指定对象作为表格单元格。类同于html标签<td>
flex：弹性布局 推荐阮一峰老师的文章
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

position有那些值？说明他们的作用

position的值relative和absolute定位原点是？
对BFC规范(块级格式化上下文：block formatting context)的理解？

display:inline-block 什么时候会显示间隙？

display:inline-block布局的元素在chrome下会出现几像素的间隙，
原因：因为我们在编辑器里写代码的时候，同级别的标签不写在同一行以保持代码的整齐可读性，即inline-block布局的元素在编辑器里不在同一行，即存在换行符，因此这就是著名的inline-block“换行符/空格间隙问题”

解决办法：
把li标签写到一行，不要在编辑器里敲回车换行
.把li的标签改成这样的写法

<li>
    <span>...</span>
</li><li>
    <span>...</span>
</li>

如何让一个元素垂直居中

http://blog.csdn.net/newfishcoder/article/details/53727131

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

relative：自身原来的位置
absolute：最近的设置了定位上下文的父元素的左上角

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

内容区域宽高为0，设置一个边框的宽度，其他边框设置为透明或者白色

为什么要初始化CSS样式?

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

visibility属性有那些值 作用分别是什么？

visible——默认值，可见
hidden——将元素隐藏，但是给元素保留了原来所占的空间
collapse——当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。
如果此值被用在其他的元素上，会呈现为 “hidden”。

inherit—— 继承父元素的visibility属性

为什么需要清除浮动？ 清除浮动的方式?

浮动会造成父元素包含框高度塌陷

清除浮动的方式：

1. 父元素定义高度
2. 结尾处加空div，clear：both
3. 结尾处加br标签，clear：both
4. 父元素加伪类：after
5. 父元素定义overflow：hidden或auto
6. 父元素也浮动，但是需要定义宽度
7. 父元素定义display：table