一、Web标准
Web标准的构成：结构、表现、行为
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，比如HTML |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，比如CSS |
| 行为 | 行为是指网页模型的定义及交互的编写，比如JS |
Web标准提出的最佳体验方案：结构、样式、行为相分离
简单理解就是将结构写到HTML文件中，表现写到CSS文件中，行为写到JS文件中
二、HTML
1. HTML语法规范
1.1 基本语法概述
- HTML标签是由尖括号包围的关键词，例如
- HTML标签通常是成对出现的，例如，我们成为双标签。标签对中的第一个标签是开始标签，第二个是结束标签
- 有些特殊的标签必须是单个标签，比如
(也可以写成
)，我们称之为单标签
1.2 标签关系
双标签关系可以分为两类：包含关系和并列关系
2. HTML基本结构标签
每个网页都会有一个基本的结构标签（也称骨架标签），页面内容也是在这些基本标签上书写的
HTML页面也称 为HTML文档
| 标签名 | 定义 | 说明 |
|---|---|---|
| HTML标签 | 页面中最大的标签，我们也称为根标签 | |
| 文档的头部 | 注意在head标签中，我们必须要设置的标签是title | |
| 文档的标题 | 让页面拥有一个属于自己的网页标题 | |
| 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
<!DOCTYPE>文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页
<!DOCTYPE html>
这句代码的意思是：当前页面采取的是HTML5版本来显示网页
注意：
- <!DOCTYPE>声明位于文档中的最前面的位置，处于标签之前
- <!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签
lang 语言种类
用来定义当前文档显示的语言
- en定义语言为英语
- zh-CN定义英语为中文
简单来说，定义为en就是英文网页，定义为zh-CN就是中文网页
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文
字符集
字符集(Character Set)是多个字符的集合，以便计算机能够识别和存储各种文字
在标签内，可以通过标签的charset属性来规定HTML文档应该使用哪种字符编码
<meta charset="UTF-8" />
charset常用的值有：GB2312（简体中文），BIG5（繁体中文），GBK（简繁体中午）和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符
注意：上面语法是必须要写的代码，否则可能引起乱码。一般情况下，统一使用"UTF-8"编码，尽量统一写成标准的"UTF-8"，不要写成"utf8"或"UTF8"
3. 标签
标题标签：
到段落标签：
换行标签：
文本格式化标签：
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | 或者 | 更推荐使用标签，语义更强烈 |
| 倾斜 | 或者 | 更推荐使用标签，语义更强烈 |
| 删除线 | 更推荐使用 |
|
| 下划线 | 或者 | 更推荐使用 |
<div>和<span>标签：它们没有语义，就是一个盒子，用来装内容
注意：
- <div>标签用来布局，但是一行只能放一个<div>，可以理解为一个大盒子
- <span>标签用来布局，一行上可以有多个<span>，可以理解为一个小盒子
图像标签：
<img src="图像URL" />
图像标签的其他属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片的路径 | 必须属性 |
| alt | 文本 | 图像显示不出来时用文字替换 |
| title | 文本 | 鼠标放到图像上，提示的文字 |
| width | 像素 | 设置图像宽度 |
| height | 像素 | 设置图像高度 |
| border | 像素 | 设置图像边框粗细 |
超链接标签：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，必须属性，当为标签应用href属性时，它就具有了超链接功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值，当前页面打开，_blank为在新窗口中打开 |
注释标签：
特殊字符：
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2（上标2） | ² |
| ³ | 立方3（上标3） | ³ |
4. 表格
表格标签：
<table>
<tr>
<th>表头单元格</th>
</tr>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
- <table></table>是用于定义表格的标签
- <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
- <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
- <th></th>表示HTML表格中表头的部分（内容会加粗居中）
表格的相关属性：
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left, center, right | 规定表格相对周围元素的对齐方式 |
| border | 1或"" | 规定表格单元是否拥有边框，默认为""，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
表格结构标签：
<thead>标签 表格的头部区域
<tbody>标签 表格的主体区域
合并单元格的方式：
- 跨行合并：rowspan=“合并单元格的个数”
- 跨列合并：colspan=“合并单元格的个数”
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sXoXMbo3-1611576368277)(C:\Users\Hello World\AppData\Roaming\Typora\typora-user-images\image-20201227234422339.png)]
5. 列表
列表最大的特点就是整齐、整洁、有序
列表可以分为三大类：无序列表、有序列表和自定义列表
无序列表的基本语法格式：
<ul>
<li>列表项1</li>
<li>列表项2</li>
...
</ul>
- 无序列表的各个列表项之间没有顺序级别之分，是并列的
- <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或文字的做法是不被允许的
- <li></li>之间相当于一个容器，可以容纳所有元素
- 无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置
有序列表的基本语法格式：
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义
<ol>
<li>列表项1</li>
<li>列表项2</li>
...
</ol>
自定义列表的基本语法格式：
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
<dl>中只能放<dt>和<dd>，而<dt>和<dd>里可以放任意元素
6. 表单
6.1. 表单域
表单域是一个包含表单元素的区域
在HTML标签中，标签用于定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| actioon | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
6.2. 表单控件
6.2.1. input输入表单元素
<input type="属性值" />
type属性的属性值及其描述：
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮（多数情况下，用于通过JS启动脚本） |
| checkbox | 定义复选框 |
| file | 定义输入字段和"浏览"按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮。重置按钮会清除表单中的所有数据 |
| submit | 定义提交按钮。提交按钮会把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为20字符 |
<input>标签的其他属性：
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义input元素的名称 |
| value | 由用户自定义 | 规定input元素的值 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中字符的最大长度 |
- name和value是每个表单元素都有的属性值，主要给后台人员使用
- name是表单元素的名字，单选按钮和复选框都要有相同的name值
- checked属性主要针对单选按钮和复选框，主要作用是一打开页面，就可以默认选中某个表单元素
6.2.2 <label>标签
<label>标签为input元素定义标注（标签）
<label>标签用于绑定一个表单元素，当点击
<lable for="sex">男</lable>
<input type="radio" name="sex" id="sex" />
<label>标签中的for属性应当与相关元素的id属性相同
6.2.3. select 下拉表单元素
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
- <select>中至少包含一对<option>
- 在<option>中定义selected="selected"时，当前项即为默认选中项
6.2.4. textarea文本域元素
<textarea rows="3", cols="20">
文本内容
</textarea>
- 通过<textarea>标签可以轻松地创建多行文本输入框
- cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS来改变大小
三、CSS
1. 选择器分类
选择器分为基础选择器和复合选择器两个大类
1.1. 基础选择器
- 基础选择器是由单个选择器组成的
- 基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器
1.1.1. 标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按照标签名称分类，为页面中某一类标签指定统一的CSS样式
标签名 {
属性1: 属性值1;
属性2: 属性值2;
...
}
1.1.2. 类选择器
类选择器可以单独选择一个或者某几个标签
.类名 {
属性1: 属性值1;
...
}
1.1.3. id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义
#id名 {
属性1: 属性值1;
...
}
注意：id属性只能在每个HTML文档中出现一次，即如果一个id已经被一个标签调用了，另一个标签就不能调用
1.1.4. 通配符选择器
在CSS中，通配符选择器用"*"定义，它表示选取页面中所有元素（标签）
* {
属性1: 属性值1;
...
}
- 通配符选择器不需要调用，自动就给所有的元素使用样式
- 特殊情况下才使用
1.2. 复合选择器
1.2.1. 后代选择器
后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发送嵌套时，内层标签就成为外层标签的后代。
元素1 元素2 {
样式声明}
上面语法表示选择元素1里面的所有元素2（后代元素）
元素1是父级，元素2是子级，最终选择的是元素2
元素2可以是儿子也可以是孙子，只要是元素1的后代就行
比如：
ol li a {
color: red;
}
最终选择a
元素1和元素2可以是任意基础选择器
1.2.2. 子选择器
子元素选择器（子选择器）只能选择某元素的最近一级的子元素，可以理解为亲儿子选择器
元素1>元素2 {
样式声明}
上述语法表示选择元素1里面所有直接后代元素2
1.2.3. 并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明
并集选择器是各种选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分
元素1, 元素2 {
样式声明}
1.2.4. 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第n个元素
伪类选择器书写最大的特点就是用冒号表示
1.2.4.1. 链接伪类选择器
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接（鼠标按下未弹起的链接）*/
链接伪类选择器注意事项：
- 为了确保生效，请按照LVHA的顺序声明:link - :visited - :hover - :active
- 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式
1.2.4.2. :focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对于表单元素来说
input:focus {
}
2. CSS字体属性
2.1. 字体系列
CSS使用font-family属性定义文本的字体系列
2.2. 字体大小
CSS使用font-size设置字体大小
p {
font-size: 20px;
}
- 谷歌浏览器默认的文字大小是16px
- 可以给body指定整个页面文字的大小，但是需要注意一点，标题标签比较特殊，需要单独指定文字大小
2.3. 字体粗细
CSS使用font-weight属性设置文字粗细
| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗的） |
| bold | 定义粗体（加粗的） |
| 100~900 | 400等同于normal，而700等同于bold，注意这个数字后面不跟单位 |
2.4. 文字样式
CSS使用font-style属性设置文本的风格
| 属性值 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 |
| italic | 浏览器会显示斜体的字体样式 |
2.5. 字体复合属性
字体属性可以把以上文字样式综合来写，这样可以更节约代码
body {
font: font-style font-weight font-size/line-height font-family;
}
- 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
- 不需要设置的属性可以省略（取默认值），但是必须保留font-size和font-family属性，否则font属性将不起作用
3. CSS文本属性
3.1. 文本颜色
color属性用于定义文本颜色
| 颜色表示 | 属性值 |
|---|---|
| 预定义的颜色值 | 比如：red, green, blue |
| 十六进制 | 比如：#FF0000 |
| RGB代码 | 比如rgb(255,0,0)或rgb(100%, 0%, 0%) |
3.2. 对齐文本
text-align 属性用于设置元素内文本内容的水平对齐方式
| 属性值 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
3.3. 装饰文本
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等
| 属性值 | 描述 |
|---|---|
| none | 默认值，没有装饰线（最常用） |
| underline | 下划线，链接a自带下划线（常用） |
| overline | 上划线（几乎不用） |
| line-through | 删除线（不常用） |
3.4. 文本缩进
text-indent属性用来指定文本第一行的缩进，通常是将段落的首行缩进
div {
text-indent: 10px;
}
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值
p {
text-indent: 2em;
}
em是一个相对单位，就是当前元素(font-size)一个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小
3.5. 行间距
line-height属性用于设置行间的距离（行高），可以控制文字行与行之间的距离
4. CSS引入方式
4.1. CSS的三种样式表
按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类：
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（链接式）
4.2. 内部样式表
内部样式表（内嵌样式表）是写到html页面内部，是将所有CSS代码抽取出来，单独放到一个
<style>
div {
color: red;
font-size: 12px;
}
</style>
4.3. 行内样式表
行内样式表（内联样式表）是在元素标签内部的style属性中设置CSS样式，适合修改简单样式
4.4. 外部样式表
样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用
引入外部样式表分两步：
- 新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件
- 在HTML页面中，使用标签引入这个文件
<link rel="stylesheet" href="css文件路径">
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接文档是一个样式表文件 |
| href | 定义所链接外部样式表文件的URL |
5. Emmet语法
5.1. 快速生成HTML结构语法
- 生成标签 直接输入标签名 按tab键即可
- 如果想要生成多个标签，加上*就可以了，比如div*3可以快速生成3个div
- 如果有父子级关系的标签，可以直接用>，如ul>li
- 如果有兄弟关系的标签，用+就可以，比如div+p
- 如果生成带有类名或id名字的，直接写 .类名或 #id名 再按tab键即可（默认是div的，如果要别的，可以p.demo）
- $可以自增数字
- 如果想要在生成的标签内部写内容可以用{}
5.2. 快速生成CSS样式
5.3. 快速格式化代码
shift+alt+F
6. CSS的元素显示模式
6.1. 块元素
- 自己独占一行
- 高度、宽度、外边距以及内边距都可以控制
- 宽度默认是容器的100%
- 是一个容器，里面可以放行内或块级元素
注意：
- 文字类的元素内不能使用块级元素
- p标签主要用于存放文字，因此p里面不能放块级元素
- 同理，h1~h6都是文字类块级标签，里面也不能放其他块级元素
6.2. 行内元素
- 相邻行内元素在一行上，一行可以显示多个
- 高、宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
注意：
- 链接中不能放链接
- 链接<a>中可以放块级元素，但是给<a>转换下块级模式最安全
6.3. 行内块元素
<img /> <input /> <td>，这些标签同时具有块元素和行内元素的特点
行内块元素的特点：
- 和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙，一行可以显示多个（行内元素特点）
- 默认宽度就是它本身内容的宽度（行内元素特点）
- 高度、行高、外边距以及内边距都可以控制（块级元素特点）
6.4. 元素显示模式转换
把行内元素转换为块级元素：
display: block;
把块级元素转换为行内元素
display: inline;
把元素转换为行内块元素
display: inline-block;
6.5. 单行文字垂直居中
让文字的行高等于盒子的高度
7. CSS的背景
7.1. 背景颜色
background-color属性定义了元素的背景颜色
取值可以是transparent（透明）也可以是具体的颜色值
一般情况下，元素背景颜色默认值是transparent
7.2. 背景图片
background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者超大的背景图片，优点是便于控制位置（精灵图也是一种运用场景）
background-image: none | url(url);
7.3. 背景平铺
如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性
background-repeat: repeat | no-repeat | repeat-x | repeat-y
默认情况下背景图片是平铺的
页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色
7.4. 背景位置
利用background-position属性可以改变图片在背景中的位置
background-position: x y;
参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位
方位名词有：top | center | bottom | left | center | right
精确单位可以是像素或百分比
7.4.1. 参数是方位名词
- 如果指定的两个词都是方位名词，则两个值前后顺序无关，比如left top和top left效果一样
- 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
7.4.2. 参数是方位名词
- 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
- 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
7.4.3. 参数是混合单位
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
7.5.背景图像固定（背景附着）
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
我们可以利用background-attachment制作视差滚动
background-attachment: scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动（默认值） |
| fixed | 背景图像固定 |
7.6. 背景属性复合写法
没有特定的书写顺序，一般习惯约定的顺序是：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
7.7. 背景颜色半透明
CSS3为我们提供了背景颜色半透明的效果：
background: rgba(0, 0, 0, 0.3);
最后一个参数是alpha透明度，取值范围在0~1之间
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
CSS3新增属性，IE9+版本浏览器才支持
8. CSS的三大特性
CSS的三大特性是：层叠性、继承性、优先级
8.1. 层叠性
8.2. 继承性
子标签会继承父标签的某些样式，如文本颜色和字号（text-, font-, line- 这些元素开头的可以继承，以及color属性）
8.3. 优先级
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
| 选择器 | 选择器权重 |
|---|---|
| 继承或者* | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器，伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式style="" | 1,0,0,0 |
| !important 重要的 | 无穷大 |
div {
color: pink!important;
}
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
浏览器给 a 链接默认制定了一个样式
权重虽然会叠加，但是永远不会有进位
如果是复合选择器，则会有权重叠加，需要计算权重
9. 盒子模型
9.1. 边框（border）
border可以设置元素的边框。边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色
border: border-width || border-style || border-color
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框的颜色 |
border-style的参数
| 参数 | 解释 |
|---|---|
| none | 无边框，border-color将被忽略，border-width计算值为0，除非边框轮廓为图像，即border-image |
| hidden | 隐藏边框。IE7及以下尚不支持 |
| dotted | 点状轮廓。IE6下显示为dashed效果 |
| dashed | 虚线轮廓 |
| solid | 实线轮廓 |
| double | 双线轮廓，两条单线与其间隔的和等于指定的border-width值 |
| groove | 3D凹槽轮廓 |
| ridge | 3D凸槽轮廓 |
| inset | 3D凹边轮廓 |
| outset | 3D凸边轮廓 |
边框的简写：
border: 1px solid red; 没有顺序
边框分开写法：
border-top: 1px solid red; /*只设定上边框，其余同理*/
border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框
border-collapse: collapse;
- collapse单词是合并的意思
- border-collapse: collapse;表示相邻边框合并在一起
border-collapse还有个参数是separate，它表示边框独立
注意，边框会影响盒子的实际大小
对此，我们有两种解决方案：
- 测量盒子大小的时候不量边框
- 如果测量的时候包含了边框，则需要width/height减去边框宽度
9.2. 内边距（padding）
padding属性用于设置内边距，即边框与内容之间的距离
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
padding属性（简写属性）可以有一到四个值
| 值的个数 | 表达意思 |
|---|---|
| padding: 5px; | 一个值，代表上下左右都有5像素内边距 |
| padding: 5px 10px; | 2个值，代表上下内边距是5像素，左右内边距是10像素 |
| padding: 5px 10px 20px; | 3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素 |
| padding: 5px 10px 20px 30px; | 4个值，上是5像素，右是10像素，下是20像素，左是30像素，顺时针 |
当我们给盒子指定padding值后，发生了2件事情：
- 内容和边框有了距离，添加了内边距
- padding影响了盒子的实际大小
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子
解决方案：
如果要想保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小
9.3. 外边距（margin）
margin属性用于设置外边距，即控制盒子和盒子之间的距离
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
margin的简写方式代表的意义跟padding完全一致
外边距可以让块级盒子水平居中，但是必须满足两个条件：
- 盒子必须指定宽度（width）
- 盒子左右的外边距都设置为auto
.header {
width: 960px;
margin: 0 auto;
}
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align: center
外边距合并
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块级元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值
解决方案：
- 可以为父元素定义上边框
- 可以为父元素定义上内边距
- 可以为父元素添加overflow: hidden
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前需要先清除下网页元素的内外边距
以下给出解决方案（同时也是CSS的第一行代码）
* {
margin: 0;
padding: 0;
}
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了
10. 案例里的一些小知识点
10.1. 求掉li前面的项目符号（小圆点）
li {
list-style: none;
}
11. CSS3新增样式
11.1. 圆角边框
border-radius属性用于设置元素的外边框圆角
border-radius: length;
参数值可以为数值或百分比的形式
radius 半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果
- 如果只提供一个，将用于全部的于四个角。
- 如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
- 如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
11.2. 盒子阴影
CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值 |
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊的距离 |
| spread | 可选，阴影尺寸 |
| color | 可选，阴影的颜色 |
| inset | 可选，将外部阴影（outset）改成内部阴影 |
rgba(0, 0, 0, .3)
注意：
- 默认的是外阴影（outset），但是不可以写这个单词，否则会导致阴影无效
- 盒子阴影不占空间，不会影响其他盒子排列
11.3. 文字阴影
在CSS3中，我们可以使用text-shadow属性将阴影应用于文本
text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值 |
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊的距离 |
| color | 可选，阴影的颜色 |
12. 浮动
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
选择器 {
float: 属性值}
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
12.1. 浮动的特性
- 脱离标准普通流的控制（浮），移动到指定的位置（动），俗称脱标
- 浮动的盒子不再保留原先的位置
- 如果多个盒子都设置了浮动，则它们会按照属性值
一行内显示并顶端对齐排列（注意：浮动的元素是互相贴靠在一起的，不会有缝隙，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐） - 浮动元素会具有行内块元素特性（任何元素都可以添加浮动）
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小由内容来决定
- 浮动的盒子中间是没有缝隙紧挨在一起的
为了约束浮动元素的位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
网页布局的第二准则：先设置盒子大小，再设置盒子位置
12.2. 浮动布局注意点
浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
一个元素浮动了，理论上其余的兄弟元素也要浮动
一个盒子里有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题
浮动的盒子只会影响盒子后面的标准流，不会影响前面的标准流
12.3. 清除浮动
由于父级盒子很多情况下不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响到下面的标准流盒子。
清除浮动的本质是清楚浮动元素造成的影响，如果父盒子本身有高度，则不需要清除浮动，清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了
选择器 {
clear: 属性值;
}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清楚左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| none | 同时清除左右两侧浮动的影响 |
额外标签法
额外标签法也称为隔离法
在浮动元素的末尾添加一个空的标签（要求是块级元素），比如：
<div class="box">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
<div class="sanmao">三毛</div>
<div class="simao">四毛</div>
<div class="clear"></div>
</div>
.clear {
clear: both;
}
父级添加overflow
可以通过给父级添加overflow属性，将其值设置为hidden、auto或scroll来清除浮动，但是会无法显示溢出的部分
:after 伪元素法
:after 方法是额外标签法的升级版，也是给父元素添加
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7专有，解决低版本不兼容问题 */
*zoom: 1
}
双伪元素清除浮动
也是给父元素添加
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom: 1;
}