2.3 高级选择器（接读书笔记01）
1、层叠
层叠给每个规则分配一个重要度，重要次序如下：
- 标有！important的用户样式
- 标有！important的作者样式
- 作者样式
- 用户样式
- 浏览器/用户代理应用的样式
2、特殊性
规则的特殊性由选择器的数字值之和计算。总结如下：
- 用style属性编写的规则总是>>>>其他规则
- 具有ID选择器的规则>>>>无ID选择器的规则
- 具有类选择器的规则>>>>只有类选择器的规则
- 若两个规则特殊性相同，后定义的规则>>>>前定义的规则
tips：
- 若遇到没有起作用的CSS规则，可尝试在选择器中添加一个父元素的ID，提高其特殊性。
- 尽量保持一般性样式非常一般，特殊性样式尽可能特殊。
- 可在主体标签上使用类标识页面类型，ID标识特定页面。
3、继承
应用样式元素的后代会继承样式的某些属性，比如颜色和字号。
直接应用于元素的任何样式会覆盖继承的样式，继承而来的样式的特殊性为空。
2.4规划、组织和维护样式表
1、对文档应用样式
对外部样式表附加到网页上有两种方法：1、链接它们 。 2、导入它们：
/* 两种方法都放在html的<head>中 */
/* 1.链接 */
<link href="/css/basic.css" rel="stylesheet" type="text/css"/>
/* 2.导入 */
<style type="text/css">
<!--
@import url("/css/advanced.css"); /*通过@import引用css的样式内容 */
-->
</style>从另一个样式表导入样式表：从HTML页面链接基本样式表，然后将复杂的样式表导入这个样式表。
@import url(/css/layout.css);注意：
- 导入样式表比链接样式表慢
- 使用结构良好的单一CSS文件可以显著提高下载速度
- 当CSS文件非常长时，可以在每个样式的注释头添加特定的标志，便于搜索样式
设计代码结构
为了便于维护，最好将样式表分为几大块，使用风格统一的大注释块分隔每个部分。文档结构次序如下：
/* @group general styles */- 一般性样式
- 主体样式
- reset样式
- 链接
- 标题
- 其他元素
/* @group helper styles */- 辅助样式
- 表单
- 通知和错误
- 一致的条目
/* @group page structure */- 页面结构
- 标题、页脚和导航
- 布局
- 其他页面结构元素
/* @group page components */- 页面组件
- 各个页面
/* @group overrides */- 覆盖
tips: 代码分隔越细致、越合理、越容易理解与搜索。
自我提示
复杂的大型项目中，在CSS文件中添加临时注释，例如颜色表。
关键字可用来区分重要的注释：
- @todo：某些东西需要在以后修改、复查
- @bugfix：代码或特定浏览器遇到的问题
- @workaound：不完善的权宜之计
删除注释和优化样式表
注释会使CSS文件显著加大。减小文件大小可通过：
- “搜索并替换”删除注释
- CSS优化器
- 启用服务器压缩（最好方式）
第三章 可视化格式模型
3.1 盒模型概述
盒模型由元素的内容（width,height），内边距(padding)，边框(border)，外边距(margin)组成。
外边距叠加
当两个或多个垂直外边距相遇时，它们将形成一个外边距，高度为较大者。
tips：只有普通文档流中快框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。
3.2 定位概述
1、可视化格式模型
行内框
行内框在一行中水平排列。
水平各边距可以调整水平间距，垂直边距不起作用。
修改行内框尺寸的唯一方法是修改行高或水平边框、内边距或外边距。
块级框
从上到下一个个垂直排列，框之间的垂直距离由框的垂直外边距计算。
display属性
- display:inline-block： 让元素像行内元素一样水平依次排列，框的内容仍符合块级框。
- display:none：这个框及其所有内容不再显示。
2、相对定位
相反移动，占据空间
通过设置垂直或水平位置，让这个元素“相对于”它的起点移动。它原本的空间仍保留，移动元素会覆盖其他框。
例如：将top设置为20像素，框出现在原位置顶部下面20像素的地方。
3、绝对定位
位置相对于已定位的祖先或初始包含快，不占空间
绝对定位的元素与文档流无关，不影响普通流中的框。若扩大绝对定位的框，周围的框不会重新定位，会发生重叠。
固定定位
固定元素的包含块是视口（viewport），能够创建总是出现在窗口中相同位置的浮动元素。使元素在页面滚动时一直出现在屏幕上的固定位置。
4、浮动
不占空间
- 浮动框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘。
- 浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
- 若包含块太窄，无法容纳水平排列的浮动元素，则其他浮动块会下移，直到有够的空间的地方。
- 若浮动元素高度不同，则下移时可能会被卡住，如下图：
行框
浮动元素后面有一个文档流中的元素时，元素框的文本内容受到浮动框的影响，形成：行框围绕浮动框，实际中可创建浮动框使文本可以围绕图像。
清理
clear
若要阻止行框围绕在浮动框外边，需要对包含这些行框的元素应用clear属性。
clear属性的值可以是left,right,both或none，表示框的哪些边不应该挨着浮动框。
可用于容器包围浮动元素：添加一个进行清理的空元素。clear:both。常常有现成的元素可以应用clear。
overflow
定义在包含的内容对于指定的尺寸太大的情况下元素应怎样，默认会溢出进入相邻空间。
应用值：hidden或auto
作用：自动清理包含的任何浮动元素。