聊聊CSS盒模型以及CSS选择器
Part 1 :盒模型(box model)
"every element in web design is a rectangular box."
在一个文档中，每个元素都被表示为一个矩形的盒子。在CSS中，使用标准盒模型(也可叫做框模型)描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。
每个盒子有四个边：外边距边(margin), 边框边(border), 内填充边(padding) 与 内容边(content)。
例子 要设置上 下 右 左边距值为0.25em 1em 0.5em 0.5em.也就是说右边和下边的值相同。
h1 {margin: 0.25em 1em 0.5em;}
2-设置边框边(border)
边框 (border) 是围绕元素内容和内边距的一条或多条线,CSS border 属性允许你规定元素边框的样式(border-style)、宽度(border-style)和颜色(border-color)。
| 属性名称 | 属性用途 | 使用方法 |
|---|---|---|
| border-width | 为边框指定宽度 | 指定长度值(px, em)或使用 3 个关键字之一 (thin 、medium（默认值） 和 thick) |
| border-style | 设置边框样式 | 10 个不同的非 inherit 样式 |
| border-color | 设置边框颜色 | 使用border-color属性 |
同样，border属性的值也采用了 top-right-bottom-left 的顺序
3-设置内填充边(padding)
CSS padding 属性定义元素边框与元素内容之间的空白区域,padding 属性接受长度值或百分比值，但不允许使用负值。
可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位(em/ ex / px)或百分比.
| 属性名称 | 属性用途 |
|---|---|
| padding-top | 设置元素的上内边距 |
| padding-right | 设置与元素右内边距 |
| padding-bottom | 用于设置元素的下内边距 |
| padding-left | 设置元素的左内边距 |
4-设置内容边(content)
内容区域content area 是包含元素真实内容的区域。它通常包含背景、颜色或者图片等，位于内容边界的内部，它的大小为内容宽度 或 content-box宽及内容高度或content-box高。
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
关于伪元素:"CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree."
即伪元素用于创建一些不在文档树中的元素，并为其添加样式。更多详情以后会专门整理~
A-content与:before 伪元素配合使用：
该伪元素允许创作人员在元素内容的最前面插入生成内容
B-content与:after伪元素配合使用，在元素之后添加内容
例如:如何使用 :before 在元素内容之前插入图像
<!DOCTYPE html >
<html>
<head>
<style type="text/css">
h1:before {content:url(/logo_white.gif)}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
</body>
</html>
CSS3中新增的盒模型计算方式：box-sizing
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
语法:box-sizing: content-box|border-box|inherit;
| 值 | 描述 |
|---|---|
| content-box | 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 |
| border-box | 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
| inherit | 规定应从父元素继承 box-sizing 属性的值。 |
CSS3中新增的边框属性
- border-radius:创建圆角边框
- box-shadow:向矩形添加阴影
- border-image:使用图片来绘制边框
Part2:选择器（Selectors）
CSS选择器用于选择你想要的元素的样式的模式。
选择器的类别:
类选择器,id选择器,属性选择器 ,派生选择器 ，后代(包含)选择器,子元素选择器,相邻兄弟选择器
1-类选择器:允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用.
语法: * 选择器名称{样式}
用法:
- 独立使用
- 多类选择器:通过把多个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。
- 结合元素选择器来使用。
eg.若希望只有段落显示为红色文本：
p.important {color:red;}
eg.假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作：
.important.warning {background:silver;}
2-id选择器:可以为标有特定 id 的 HTML 元素指定特定的样式。
语法:# 选择器名称 {样式}
用法:
- 独立使用
- 与派生选择器一起使用:
eg.
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
3-属性选择器 :可以为拥有指定属性的 HTML 元素设置样式
语法 :元素名称[指定属性]{样式}
用法:
-
单个属性值
eg:把包含标题（title）的所有元素变为红色
*[title] {color:red;} -
根据具体属性值选择
eg.将指向 Web 服务器上某个指定文档的超链接变成红色
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;} -
子串匹配属性选择器
| 类型 | 描述 |
|---|---|
| [abc^="def"] | 选择 abc 属性值以 "def" 开头的所有元素 |
| [abc$="def"] | 选择 abc 属性值以 "def" 结尾的所有元素 |
| [abc*="def"] | 选择 abc 属性值中包含子串 "def" 的所有元素 |
eg.
- 特定属性选择类型
eg.选择 lang 属性等于 en 或以 en- 开头的所有元素
*[lang|="en"] {color: red;} - 根据部分属性值选择
eg.选择 class 属性中包含 important 的元素
p[class~="important"] {color: red;}
4-派生选择器：依据元素在其位置的上下文关系来定义样式
语法:元素名{样式}
5-后代(包含)选择器:可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
语法:在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。
eg.希望只对 h1 元素中的 em 元素应用样式
h1 em {color:red;}
上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中.
6-子元素选择器:缩小范围，只选择某个元素的子元素
eg.选择只作为 h1 元素子元素的 strong 元素
h1 > strong {color:red;}
语法解释:子选择器使用了大于号（子结合符）。
子结合符两边可以有空白符，这是可选的。
7-相邻兄弟选择器:可选择紧接在另一元素后的元素，且二者有相同父元素
语法:相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。与子结合符一样，相邻兄弟结合符旁边可以有空白符。
eg.要增加紧接在 h1 元素后出现的段落的上边距
h1 + p {margin-top:50px;}
选择器分组
可以将任意多个选择器分组在一起，对此没有任何限制。
例如，如果想把很多元素显示为灰色，可以使用类似如下的规则：
body, h2, p, table, th, td, pre, strong, em {color:gray;}
提示：通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。
选择器的优先级
浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。
优先级是如何计算的？
优先级就是分配给指定的CSS声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。
而当优先级与多个CSS声明中任意一个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。
当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
1、无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然，IE 6不支持这个属性，于是它也成为一种hack被很多人所熟知，真正使命被人淡忘。
2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。
3、第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:3px;}。
4、第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px;} 会覆盖 div{margin:6px;}
5、第五级由一个或多个 类型选择器定义。如 div{margin:6px;} 覆盖 *{margin:10px;} 。
