首页 > 代码库 > 读书总结——CSS权威指南
读书总结——CSS权威指南
几个月前读了这本书——《CSS权威指南》，之前用css都是在w3school上看的，或者按F12看别人的代码，这是我完整的读的第一本关于css的书，感觉还是收获挺大的，最近要总结一下自己的知识，所以又重新看了一遍，又本着温故知新、边看边写的想法写了这篇文章，希望能对自己或别人有些帮助。
第一章 HTML 标记与文档结构
主要介绍了HTML及其标记
1.标签分为闭合标签与自闭合标签
闭合标签格式：<标签名>文本内容</标签名>
e.g.
<h1>Words by Dogsworth</h1>
自闭合标签格式：<标签名 属性_1="属性值" 属性_n="属性值" />
e.g.
<img src="images/cisco.jpg" alt="My dog Cisco">
闭合标签与自闭合标签的区别在于，闭合标签包含的是会显示的实际内容，而自闭合标签只是给浏览器提供一个对要显示内容的引用。浏览器会在HTML 页面加载的时候，额外向服务器发送请求，以取得自闭合标签引用的内容。
2.标题与段落
一般来说，我们每个网页都会有标题（<title>)，以及用上许多的段落标签（<h1>,<h2>...），特别是<title>，搜索引擎对它很敏感，要言简意赅，不要什么废话，其次是<h1>，搜索引擎也会将其视为仅次于<title>标签的另一个搜索关键词的来源。
3.HTML模板
按照HTML5语法编写的最简单的HTML页面的模板可以写成这样：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>An HTML Template</title></head><body><!-- 这里是网页内容 --></body></html>
4.块级元素和行内元素
文档流：HTML元素会按照它们各自在标记中出现的先后顺序，依次从页面上方“流向”下方。
块级元素会相互堆叠在一起沿页面向下排列，每个元素分别占一行。而行内元素则会相互并列，只有在空间不足以并列的情况下才会折到下一行显示。
第二章 CSS工作原理
1.css规则
选择符 { 属性: 值; }
e.g.
p { color: red; }添加css的三种方法：
a.行内样式：写在HTML标签的style属性里
e.g.
<p style="color:red;"> By adding inline CSS styling to this paragraph, you override the default styles.</p>
b.嵌入样式：写在HTML文档的head元素中的的<style>标签里面
e.g.
<head><!-- 其他head 元素（如meta、title）放在这里 --><style type="text/css">h1 { font-size: 16px;}p { color: blue;}</style></head>
c.链接样式：把样式集中写在一个单独的文件里
这个文件就叫样式表。样式表其实就是一个扩展名为.css 的文本文件。可以在任意多个HTML 页面中链接同一个样式表文件，每个页面中只需加入类似下面的这一行代码即可
<link href="styles.css" rel="stylesheet" />
2.关于选择符
a.上下文选择符：标签1 标签2 { 声明 }
e.g.
article p { font-weight: bold;}上面的例子表示的是只有是article后代的p元素才会应用后面的样式。
b.子选择符：标签1 > 标签2 { 声明 }
e.g.
section > h2 { font-style: italic;}上面的例子表示的是只有是section的子元素p（而非所有后代元素）才会应用后面的样式。
c.紧邻同胞选择符：标签1 + 标签2 { 声明 }
e.g.
h2 + p { font-variant: small-caps;}上面的例子表示的是只有紧跟在h2元素后面的同胞元素p才会应用后面的样式。
d.一般同胞选择符：标签1 ~ 标签2 { 声明 }
e.g.
h2 ~ a { color: red;}上面的例子表示的是在h2元素后面的同胞元素p才会应用后面的样式。
e.通用选择符：[标签] * { 声明 }
e.g.
p * { color:red;}上面的例子表示的是元素p包含的所有元素都会应用后面的样式。
3.ID和类选择符
类选择符：.类名 { 声明 } 表示在html中class="类名"的元素会应用其中的声明。
多类选择符：.类名1.类名2 { 声明 } 表示在html中class="类名1 类名2"的元素会应用其中的声明。
比较：.类名1 .类名2 { 声明 } 和上面相比，类名1、类名2之间多了一个空格，此时意义就大不一样了，表示在html中class="类名1"的后代元素中class="类名2"的子元素会应用其中的声明。
4.属性选择符
标签名[属性名]
e.g.
img[title] { border: 2px solid blue;}上面的例子表示的是带有title属性的img元素都会应用后面的样式。
5.属性值选择符
标签名[属性名="属性值"]
e.g.
img[title="red flower"] { border: 4px solid green;}上面的例子表示的是带有title属性值为red flower的img元素都会应用后面的样式。
6.伪类
伪类这个叫法源自它们与类相似，但实际上并没有类会附加到标记中的标签上。伪类分两种：
UI（User Interface，用户界面）伪类：会在HTML 元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS 样式。
结构化伪类：会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用CSS 样式。
a.UI伪类
如链接伪类（:link, :visited, :hover, :active），:focus，:target
b.结构化伪类
如:first-child 和:last-child，:nth-child
7.伪元素
伪元素就是你的文档中若有实无的元素。
如:first-letter，:first-line，:before 和:after
8.样式的来源
a.浏览器默认样式表
b.用户样式表
c.作者链接样式表（按照它们链接到页面的先后顺序）
d.作者嵌入样式
e.作者行内样式
9.层叠规则
a.找到应用给每个元素和属性的所有声明；
b.按照顺序和权重排序
c.按特指度排序
特指度的计算：I（id） - C（class） - E（element）
e.顺序决定权重
如果两条规则都影响某元素的同一个属性，而且它们的特指度也相同，则位置最靠下（或后声明）的规则胜出
第三章 定位元素
1.盒模型
所谓盒模型，就是浏览器为页面中的每个html元素生成的矩形盒子，而HTML页面实际上就是由一堆盒子组成的。
盒子模型主要适用于块级元素，如图：
对于一个盒子的宽度：
a.没有显式地设置元素的width属性（也就是为auto）
此时该元素应该会填充满父元素空间，此时父元素width为：(margin * 2) + (border * 2) + (padding * 2) + content
b.显式地设置元素的width属性
此时该元素content的宽度就是你设置的width，而元素占据的总宽度为：(margin * 2) + (border * 2) + (padding * 2) + width
好了，其实我们上面说的是W3C标准的盒模型，但还有一种盒模型，称之为IE盒模型
IE盒模型的不同之处：该元素(content + padding + border)的宽度才是设置的width，这样元素占据的总宽度变为：(margin * 2) + width
如图：
对于这两种不同的盒模型，W3C在CSS3中加入了一个属性来控制选择哪种模型
box-sizing: content-box | border-box | inherit;
content-box：默认属性，表示应用标准盒模型
border-box：表示应用IE盒模型
inherit：表示从父元素继承这个属性
2.浮动与清除
请参考我写的另一篇文章《清除浮动的简要介绍》
3.定位
CSS布局的核心是position属性
position: static | relative | absolute | fixed;
static：默认属性，一般不设置，会按照正常的文档流进行布局
relative：相对定位，相对的是它原来在文档流中的位置进行定位，可以使用top、right、bottom和left属性来改变它的位置
absolute：绝对定位，更重要的是它已经脱离正常的文档流了，它会相对于它的定义上下文（如果它的祖先元素的position属性有为relative的，那这个祖先元素就是它的定位上下文，如果没有，那它的定位上下文就是body）进行定位，同样可以使用top、right、bottom和left 属性来改变它的位置
fixed：固定定位，也已经脱离正常的文档流了，与绝对定位很像，但不同之处在于，固定定位元素的定位上下文是视口，使用top、right、bottom和left属性可以改变它的位置