# 精通CSS: 高级Web标准解决方案 ## CSS选择器 选择器的特殊性分成4个成分等级: 1000, 100, 10和1. - 如果样式是行内样式, 那么值为1000 - ID选择器的值为100 - 类, 伪类和属性选择器的值是10 - 类型选择器和伪元素选择器是1 例如: | 选择器 | 特殊性 | |------------|-----------| |style = ""| 1000 | |#wrapper #content {} | 200 | |#content .datepicker{} | 110 | |div#content | 101 | |#content{} | 100 | |p.comment .datepicker{} | 21| |p.comment{} | 11 | |div p{} | 2 | |p{} | 1 | |a[target] | 11 | ## 盒子模型 ### 总述 在CSS中, width和height指的是内容区域的宽度和高度. 增加内边距, 边框和外边距不会影响内容区域的尺寸, 但是会增加元素框的尺寸. 在IE6中, 在混杂模式下使用的是自己的非标准盒子模型. 它的width和height包括的内边距和边框. ### 外边距叠加 在垂直方向的2个元素的外边距会发生叠加, 最终只保留大的元素外边距. 外边距叠加存在如下3种情况: 1. 当一个元素出现在另一个元素上面时, 第一个元素的底部外边距和第二个元素的顶部外边距发生叠加. 2. 当一个元素包含在另一个元素时(假设没有内边距或者边框将外边距分隔开), 它们的顶和/底部外边距也会发生叠加. 3. 外边距升值可以与自身发生叠加. 假设有一个空元素, 它有外边距, 但是没有内边距和边框. 此时, 顶外边距与底外边距就碰到一起了, 它们会发生叠加. 只有在普通文档流中的垂直外边距才会发生叠加. 行内框, 浮动框或绝对定位框之间的外边距都不会叠加. ## 定位概述 CSS中有三种定位机制: 普通流, 浮动流, 绝对定位. 除非专门指定, 否则所有的框都在普通流中. 普通流中的元素的位置是由元素在HTML中的位置决定的. ### 普通流 大多数的框是由显式定义的元素形成的, 但是, 在将一些文本添加到一个块级元素(比如div)的开头时, 这些文本也会被当成块级元素对待, 它们被称为: 匿名块. 如 ```html <div> Some text <p> hello world </p> </div> ``` ### 相对定位 如果对一个元素进行相对定位, 它将出现在它所在的位置上. 然后, 可以通过设置垂直或者水平位置(top, left, bottom, right), 让这个元素"相对于"它的起点移动. 在使用相对定位时, 无论是否移动, 元素仍然占据原来的空间, 因此, 移动元素会导致它覆盖其他框. ### 绝对定位 相对定位实际上被看起普通流定位模型的一部分, 因为元素的位置是相对于它在普通流中的位置的. 绝对定位使元素的位置与文档流无关, 因此不占据空间. 绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素确定的. 如果元素没有祖先已定位, 则相对于起始元素(html元素). ### 固定定位 是绝对定位的一种, 只相对于viewport进行定位. ### 浮动 浮动的框可以左右移动, 直到它的外边缘碰到包含框或另一个浮动框的边缘. 因为浮动框不在文档的普通流中, 所以文档的普通流中的块框表现得就像浮动框不存在一样. - 行框和清理 如果浮动的元素后面有一个文档流中的元素, 那么这个元素的框会表现得浮动元素根本不存在一样, 但框的文本内容会收到浮动元素的影响, 会移动留出空间. 即浮动元素旁边的行框被缩短, 从而给浮动元素留出空间, 因为行框围绕浮动框. - 清除浮动 1. 在浮动元素后添加一个空的div, 给div设置`clear:both` 2. 给浮动的父元素设置一个`parent::after`伪类, 设置样式清除浮动. ```css .parent::after{ content:'.'; display: block; height: 0; clear: both; visibility: hidden; } ```