** 其实CSS十分强大，可以做出很多酷炫的效果，能够灵活地使用它也是一门技巧，好吧，奈何我是小菜鸡，这里只是记录我学习过程中的一些基础东西，干巴爹！~ **
1. 两种盒模型
-
W3C标准盒子模型：宽度 = 内容的宽度（content），padding、border、margin都不算在里面。
-
IE盒子模型：宽度 = 内容宽度（content + padding + border）
补充：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
2. box-sizing属性
它是用来控制元素的盒子模型的解析模式，默认为content-box（W3C盒子模型）。
- box-sizing: content-box，是W3C盒子模型。
- box-sizing: border-box，是IE盒子模型。
3. CSS选择符有哪些？
- id选择器（ #myid ）
- 类选择器（ .myclassname ）
- 标签选择器（ div, h1, p ）
- 相邻选择器（ h1 + p ）
- 子选择器（ ul > li ）
- 后代选择器（ li a ）
- 通配符选择器（ * ）
- 属性选择器（ a[rel = "external"] ）
- 伪类选择器（ a:hover, li:nth-child ）
4. CSS的优先级
选择器按优先级先后排列：!important > 内联 > id > class = 属性 = 伪类 > 标签 = 伪元素 > 通配符（*）
- !important声明： 1, 0, 0 ,0
- id选择器: 0, 1, 0, 0
- 类选择器：0, 0, 1, 0
- 属性选择器： 0, 0, 1, 0
- 伪类选择器： 0, 0, 1, 0
- 标签选择器: 0, 0, 0, 1
- 伪元素选择器: 0, 0, 0, 1
- 通配符选择器： 0, 0, 0, 0
5. 为什么要初始化CSS？
- 浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
- 提高编码质量。如果不初始化整个页面，做完的东西是会很糟糕，重复的CSS样式很多。去掉标签的默认样式如：margin和padding，其他浏览器默认解析字体大小，字体设置。
6. 伪类和伪元素有什么区别？
- 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号。
- 伪类的操作对象是文档树中已有的元素。伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。
- 伪元素则创建了一个文档数外的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
7. CSS样式导入的方式以及区别？
- 链接样式：
<link href="styles.css" rel="stylesheet" type="text/css" /> - import方式：
@import "index.css";
区别：
- link除了能引用样式外，还可以引用图片等资源文件，import只可以引用样式文件。
- 兼容性：link不存在兼容性问题，import在IE5以上支持。
- 在样式表文件中，import可以引用其他样式表，而link不行。
- link是与页面载入时同时加载，@import是在页面加载完后进行加载。
- link支持js去控制样式更改，@import不支持。
8. 页面中隐藏一个元素的方法
- display: none;
特点：元素不可见，不占据空间，无法响应点击事件。 - visibility: hidden;
特点： 元素不可见，占据页面空间，无法响应点击事件。适用于那些元素隐藏后不希望页面布局发生变化的场景。 - opacity: 0;
特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件。 - width: 0; height: 0; overflow: hidden;
特点： 元素不可见，不占据页面空间，无法响应点击事件。将元素的margin, border, padding, height和width等影响元素盒模型的属性设置成0，元素内有子元素或内容，还应设置overflow: hidden来隐藏其子元素。 - position: absolute; top: -9999px; left: -9999px;
特点： 通过将元素的 top 和 left 设置成足够大的负数，使它在屏幕上不可见。不占据空间，无法点击。
9. display: none 与 visibility: hidden 区别?
- display: none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间，也就是说该元素不但被隐藏了，而且原本占用的空间也会从页面布局中消失。
- visibility: hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，也就是说该元素虽然被隐藏了，但仍然会影响布局。
10. 文字截断，也就是超出打点...
white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis;
实际上，text-overflow属性仅用于决定当文本溢出时是否显示省略标记，并不具备样式定义的功能，要实现溢出时产生省略号的效果，应该在定义两个样式：强制文本在一行内显示（white-space:nowrap）和溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示为省略号效果。
