前端学习回顾-03

1、CSS 定义

CSS（Cascading Style Sheet) 层叠样式表。
CSS 不是编程语言，亦不是标记语言，而是一门样式表语言。
CSS 是为网页添加样式的代码，借助它可以选择性地为 HTML 元素添加样式。

2、CSS 规则集详解

整个结构称为 规则集（ruleset），通常简称为“规则”。

选择器（Selector）：HTML 元素的名称位于规则集的开始。它选择一个或多个需要添加样式的元素（在本例中为 p 元素）。为不同的元素添加样式需要使用相对应的选择器。
声明（Declaration）：一个单独的规则，用来指定添加样式元素的属性（在本例中为 color: red）。
属性（Properties）：改变 HTML 元素样式的途径（在本例中 color 就是

元素的属性）。
属性值（Property value）：属性与冒号后添加属性值，从指定属性的众多预定选项中选择一个值（在本例中选择 red，除此之外还有多种颜色预选项）。

3、CSS 规则集语法

（1）每个规则集（除去选择器部分）都应该包含在成对的花括号“{ }”中。
（2）在每个规则集中要用分号“；”将各个声明分隔开。
（3）在每个声明中要用冒号“ ：” 将属性与属性值分隔开。

4、CSS 多元素选择

选择多种类型的HTML 元素，并为它们添加一组相同的样式，不同的选择器之间使用逗号“，”进行分隔。
示例，使 p、li、h1 元素的颜色为红色：

p, li, h1 {
    color: red;
}

5、CSS 不同类型的选择器

上述只是介绍了元素选择器，用来选择 HTML 文档中给定的元素。初次之外，CSS 还拥有以下多种神奇的选择器。

选择器名称	所选内容	示例
元素 选择器（也称作 标签 或 类型 选择器）	所有该类型的 HTML 元素	p 选择 <p> 元素
ID 选择器	具有特定 ID 的元素（在一个 HTML 页面中， 每个 ID 只能对应一个元素，一个元素只能对应一个ID）	#my-id 选择 <p id=“my-id”> 元素或 <a id=“my-id”> 元素
类 选择器	具有特定类的元素（在一个 HTML 页面中，一个类可以对应多个元素）	.my-class 选择 <p class=“my-class”> 和 <a class=“my-class”>
属性 选择器	拥有特定属性的元素	img[src 选择 <img src=“myImage.png”> 元素而不是 <img> 元素
伪（Pseudo）类选择器	特定状态下的特定元素（比如鼠标指针悬停）	a:hover 仅在鼠标指针悬停在链接上时选择 <a> 元素

6、CSS 盒子模型

CSS 布局主要基于盒子模型。

（1）padding：即内边距，围绕着内容（在本例中为段落）的空间。
（2）border：即边框，紧挨着内边距的线（当然你一可以将它设置为护城河一样宽）。
（3）margin：即外边距，围绕着边框外部的空间。

注：MDN原文对margin的定义：the space around the outside of the border.

又因 The box model – What is the CSS box model?

以下为笔者个人结论：

margin 应该属于盒子（或者元素）之间的空间，不属于任何一个元素。

盒子（或者元素）所占页面空间计算：content + padding + margin。