1.概述
1.1 简介
CSS（Cascading Style Sheets），层叠样式表。不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS3 现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发中。
1.2 语法
CSS 规则由两个主要的部分构成：①选择器；②声明（一条或多条）。
为了让CSS可读性更强，建议每行只描述一个属性，实例：
p
{
color:red;
text-align:center;
}
1.3 注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束，实例：
/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
1.4 应用方式
1.4.1 内部样式（内联样式）
在页面头部通过 style 标签定义。
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 内部样式 */
p{
color:blue;
}
</style>
</head>
1.4.2 行内样式
使用 HTML 标签的 style 属性定义。
<body>
<div style="color:red;">hello</div>
</body>
1.4.3 外部样式（外联样式）
使用单独的 .CSS 文件定义，然后在页面中使用 link标签 或 @import指令 引入。
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- link标签 -->
<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">
<!-- @import指令 -->
<style>
/* @import "style/hello.css" */
@import url(style/hello.css);
</style>
</head>
2.CSS
2.1 CSS三大特性
2.1.1 继承性
子元素有默认继承父元素样式的特点（部分继承）。常见的继承属性：color、font-style、font-weight、font-size、font-family、text-indent、text-align、line-height…
（1）如何判断是否可以继承？ 通过调试工具查看。
（2）继承的优点？ 在一定程度上减少代码。
（3）继承的常见应用场景
给 <ul> 设置 list-style:none 属性，从而去除列表 <li> 默认的小圆点样式；
给 <body> 标签设置统一的 font-size，从而统一不同浏览器默认文字大小；
（4）继承失效的情况
如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
- a 标签的
color和 h 系列标签的font-size会继承失效。这两个，其实属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了。 - div 的高度不能继承，但是 width 有类似于继承的效果。
2.1.2 层叠性
（1）给同一个标签设置不同的样式，此时样式会层叠叠加共同作用在标签上。
（2）给同一个标签设置相同的样式，样式会层叠覆盖，最终写在最后的样式会生效。
示例：设置相同的 background 背景颜色，最后一个生效。
<div class="box"></div>
.box{
background:red;
background:green; // 最后生效绿色
}
注意：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
2.1.3 优先性
不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式。优先级公式：
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
注意
① !important 写在属性值的后面，分号的前面。例子:
{ color : red !important ; }
② !important 不能提升继承的优先级。
③实际开发中不建议使用 !important。
2.2 选择器
2.2.1 标签选择器（元素选择器）
使用HTML标签作为选择器的名称。
<p>黄色</p>
<style>
p {
color: yellow;
}
</style>
2.2.2 class选择器
使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器，以标签的class属性作为样式应用的依据
<p class="green">绿色</p>
<style>
.green {
color: green;
}
</style>
2.2.3 id选择器
使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配。以标签的id属性作为样式应用的依据，一对一的关系
<div id="part1">红色</div>
<style>
#part1 {
color:red;
}
</style>
2.2.4 子代选择器
子代选择器可以选择当前元素的所有儿子元素。定义的时候用 > 隔开。
<div>
<h1>橙色</h1>
</div>
<style>
div>h1 {
color: orange;
}
</style>
2.2.5 后代选择器
标签元素除了并列书写还可以嵌套书写，后代选择器就是用于选择嵌套标签元素的一种选择器。定义的时候用 空格 隔开。
<p class="part">
<a href="http://www.baidu.com/">灰色</a>
</p>
<style>
.part a {
color: gray;
}
</style>
2.2.6 相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。定义的时候用 + 隔开。
<div>
<p>DIV 内部段落。</p>
</div>
<p>DIV 之后的第一个 P 元素。黄色</p>
<p>DIV 之后的第二个 P 元素。</p>
<style>
div + p {
background-color: yellow;
}
</style>
2.2.7 后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。定义的时候用 ~ 隔开。
<div>
<p>DIV 内部段落。</p>
</div>
<p>DIV 之后的第一个 P 元素。黄色</p>
<p>DIV 之后的第二个 P 元素。黄色</p>
<style>
div ~ p {
background-color: yellow;
}
</style>
2.2.8 交集选择器
选择的元素必须同时满足多个条件才可以被选择，交集选择器就是干这个的。定义的时候用 标签名.ID名/类名 。
<p class="part">段落</p>
<h1 class="part">标题</h1>
<style>
p.part {
color: red;
}
</style>
2.2.9 并集选择器
多种元素共享某种属性，这时候就可以使用并集选择器。定义的时候用 , 隔开。
<p>段落</p>
<h1>标题</h1>
<a href="https://www.baidu.com/" class="link">打开百度，你就知道！</a>
<button id="click">我是按钮</button>
<style>
p, h1, .link, #click {
color: red;
}
</style>
2.2.10 通配符选择器
通配符选择器可以匹配任何标签，我们常用于统一页面样式。
<style>
* {
color: red;
}
</style>
2.2.11 伪类选择器
（1）anchor伪类
<a href="https://www.baidu.com/">打开百度，你就知道！</a>
<style>
a:link {
color:#FF0000;} /* 未访问的链接样式 */
a:visited {
color:#00FF00;} /* 已访问的链接样式 */
a:hover {
color:#FF00FF;} /* 鼠标划过链接样式 */
a:active {
color:#0000FF;} /* 已选中的链接样式 */
</style>
注意：推荐使用顺序为link、visited、hover、active
（2）input伪类
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :focus | input:focus | 选择元素输入后具有焦点 |
| :checked | input:checked | 选择所有选中的表单元素 |
| :disabled | input:disabled | 选择所有禁用的表单元素 |
| :enabled | input:enabled | 选择所有启用的表单元素 |
| :in-range | input:in-range | 选择元素指定范围内的值 |
| :out-of-range | input:out-of-range | 选择元素指定范围外的值 |
| :invalid | input:invalid | 选择所有无效值的元素 |
| :valid | input:valid | 选择所有有效值的元素 |
| :optional | input:optional | 选择没有"required"属性的元素素 |
| :required | input:required | 选择含有"required"属性的元素 |
| :read-only | input:read-only | 选择只读属性的元素 |
| :read-write | input:read-write | 选择可写属性的元素 |
（3）其他伪类
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :not(selector) | :not§ | 选择所有p元素以外的元素 |
| :empty | p:empty | 选择所有没有子元素的p元素 |
| :first-child | p:first-child | 选择所有p元素的第一个子元素 |
| :first-of-type | p:first-of-type | 选择的每个p元素是其父元素的第一个p元素 |
| :last-child | p:last-child | 选择所有p元素的最后一个子元素 |
| :last-of-type | p:last-of-type | 选择每个p元素是其父元素的最后一个p元素 |
| :nth-child(n) | p:nth-child(2) | 选择所有p元素的父元素的正数第二个子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素正数的第二个为p的子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素的父元素的倒数第二个子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
| :only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
| :only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
| :first-letter | p:first-letter | 选择每个p元素的第一个字母 |
| :first-line | p:first-line | 选择每个p元素的第一行 |
| :before | p:before | 在每个p元素之前插入内容 |
| :after | p:after | 在每个p元素之后插入内容 |
2.2.12 属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
实例1：
<input type="text" value="文本框">
<input type="button" value="按钮">
<style>
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}
</style>
实例2：title属性中有hello的标签字体变蓝。
<h2>将会适用:</h2>
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>
<h2>将不适用:</h2>
<p title="student">Hi CSS students!</p>
<style>
[title~=hello] {
color: blue;
}
</style>
2.2.13 子串匹配属性选择器
下面为您介绍一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为“子串匹配属性选择器”。很多现代浏览器都支持这些选择器，包括 IE7。
| 类型 | 描述 |
|---|---|
| [abc^=“def”] | 选择 abc 属性值以 “def” 开头的所有元素 |
| [abc$=“def”] | 选择 abc 属性值以 “def” 结尾的所有元素 |
| [abc*=“def”] | 选择 abc 属性值中包含子串 “def” 的所有元素 |
如果希望对指向 baidu 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：
<style>
a[href*="baidu.com"] {
color: red;
}
</style>
2.3 盒模型
盒模型是网页布局的基础，html 里的每个标签都可以认为是一个方块，方块中又包含着方块，如同盒子一层层的包裹着，这就是盒模型。
⭐盒模型包含这五个属性：width 宽度、height 高度、border 边框、padding 内边距、margin 外边距。
盒模型分为IE盒模型和W3C标准盒模型：
2.3.1 IE盒模型（怪异盒模型）
属性 width，height 不仅内容content，还包含 border 和 padding。也就是在代码中设置 { width : 200px } 时，指的是上图中的 content + border + padding 的宽度。
2.3.2 W3C标准盒模型（标准盒模型）
属性 width，height 只包含内容content，不包含 border 和 padding。也就是代码中写了：{ width : 200px } 时，指的是上图中蓝色部分 content 的宽度。
①在编写页面代码时应尽量使用标准的W3C模型(需在页面中声明DOCTYPE类型)，这样可以避免多个浏览器对同一页面的不兼容。
- 不声明DOCTYPE类型，IE浏览器会将盒子模型解释为IE盒子模型，FireFox等会将其解释为W3C盒子模型。
- 声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。
②可以通过CSS属性【box-sizing】设置元素的盒模型类型，默认值 content-box 。值有：
- content-box，W3C盒模型，即 width = content、height = content；
- border-box，IE盒模型，即 width = content + padding + border ；
- inherit，继承父级。
2.4 显示特性
2.4.1 显示模式
HTML里的元素可分为三种：块级元素、行内元素、行内块元素。
（1）块级元素
⭐️显示特点
①独占一行，宽度默认是容器（父级宽度）的100%；
②高度宽度外边距及内边距都可以控制；
③可以放很多行内或者块元素。
⭐️常见块级元素
div 、hr、p、h1~h6、ul、ol、dl、form、table
⭐️注意
①文字类元素不能用块元素；
②<p>主要放文字，不能放块元素。
（2）行内元素
⭐️显示特点
①相邻元素多个一行；
②宽高直接设置无效（需转换）；
③默认宽度为内容的宽度；
④只能放文本或其他行内元素。
⭐️常见行内元素
span、a、i、em等。
⭐️注意
链接里不能再放链接；
特殊情况<a>里可放块元素，但要给<a>转换块元素最安全。
（2）行内块元素
⭐️显示特点
①相邻行内元素（行内块）在一行，之间有空隙，一行可显示多个；
②可以设置宽高；
⭐️常见行内块元素
input、textarea、button、select等。
⭐️注意
<img>有行内块元素特点，但是Chrome调试工具中显示结果是inline。
2.4.2 显示模式转换
元素的显示和隐藏、以及显示模式的转换，使用 display 属性控制。值有：
| 值 | 含义 | 说明 |
|---|---|---|
| none | 不显示 | |
| inline | 显示为内联元素，行级元素的默认值 | 将块级元素变为行级元素，不再独占一行 |
| block | 显示为块级元素，块级元素的默认值 | 将行级元素变为块级元素，独占一行 |
| inline-block | 显示为内联元素，但是可以设置宽和高 | 在inline基础上允许设置宽度和高度 |
如要把元素转换成块级元素，CSS中给元素设置属性：display:block
如要把元素转换成行内块级元素，CSS中给元素设置属性：display:inline-block
如要把元素转换成行内元素，CSS中给元素设置属性：display:inline
2.5 定位方式
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。普通流的布局是从左往右，自上而下的。CSS 开设了 position 属性，该属性可打破普通流。
通过 position 属性实现对元素的定位，该属性有五个值（4种定位方式）：
| 值 | 含义 | 说明 |
|---|---|---|
| static | 默认值 | 按照常规文档流进行显示 |
| relative | 相对定位 | 相对于标签原来的位置进行的定位 |
| absolute | 绝对定位 | 相对于第一个非static定位的父标签的定位 |
| fixed | 固定定位 | 相对于浏览器窗口进行定位 |
| inherit | 继承 | 规定应该从父元素继承 position 属性的值 |
2.5.1 相对定位（relative）
以自己本身的位置作为参考，可以通过设置垂直或水平位置，让这个元素”相对于”本身位置的起点进行移动。
注意：使用相对定位时，无论是否进行移动，元素仍然占据原来的空间（类比灵魂出窍）。因此，移动元素会导致它覆盖其它框。
示例：div 设置相对定位，向左偏移 30px + 向上偏移 20px。
div{
position: relative;
left: 30px;
top: 20px;
}
2.5.2 绝对定位（absolute）
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
绝对定位相对于离它最近的非 static 定位的父/祖先级元素，如果元素没有已定位的父/祖先元素，则会相对于浏览器窗口进行定位。
div{
position: absolute;
left: 30px;
top: 20px;
}
2.5.3 固定定位（fixed）
固定定位是以浏览器窗口作为参考进行定位的。先设置元素的 position 属性为 fixed，然后再设置偏移量。设置元素为固定定位后，元素会浮动在其他元素上方。
示例：将 div 位置固定在浏览器窗口左上方，设置 div 距离窗口左边 30px，距离顶部 20px。
div{
position: fixed;
left: 30px;
top: 20px;
}
2.6 常用属性
2.6.1 背景
CSS 背景属性用于定义HTML元素的背景。CSS 属性定义背景效果：
| 属性 | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。全写：background: background-color background-image background-repeat background-attachment background-position 。示例：body { background:#ffffff url(‘img_tree.png’) no-repeat right top; } |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
以上属性无需全部使用，按照页面的实际需要使用。
示例：设置背景颜色为红色。
body {
background-color:red;
}
2.6.2 文本
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
2.6.3 字体
CSS字体属性定义字体，加粗，大小，文字样式。
| 属性 | 描述 |
|---|---|
| font | 在一个声明中设置所有的字体属性 |
| font-family | 指定文本的字体系列 |
| font-size | 指定文本的字体大小 |
| font-style | 指定文本的字体样式 |
| font-variant | 以小型大写字体或者正常字体显示文本 |
| font-weight | 指定字体的粗细 |
2.6.4 链接
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。这四个链接状态是：
a:link- 正常，未访问过的链接。a:visited- 用户已访问过的链接。a:hover- 当用户鼠标放在链接上时。a:active- 链接被点击的那一刻。
a:link {
color:#000000;} /* 未访问链接*/
a:visited {
color:#00FF00;} /* 已访问链接 */
a:hover {
color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {
color:#0000FF;} /* 鼠标点击时 */
注意：
a:hover 必须跟在 a:link 和 a:visited 后面
a:active 必须跟在 a:hover 后面
2.6.5 列表
在 HTML中，有两种类型的列表：
- 无序列表
ul- 列表项标记用特殊图形（如小黑点、小方框等） - 有序列表
ol- 列表项的标记有数字或字母
所有的CSS列表属性：
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中。 |
| list-style-image | 将图像设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
示例：移除列表的小标记，以及清除列表默认的内边距和外边距。
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
2.6.6 表格
CSS 表格属性用于定义HTML表格的样式。
| 属性 | 描述 |
|---|---|
| border-collapse | 设置是否把表格边框合并为单一的边框。 |
| border-spacing | 设置分隔单元格边框的距离。 |
| caption-side | 设置表格标题的位置。 |
| empty-cells | 设置是否显示表格中的空单元格。 |
| table-layout | 设置显示单元、行和列的算法。 |
示例：折叠边框。
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
2.6.7 边框
| 属性 | 描述 |
|---|---|
| border | 简写属性，用于把针对四个边的属性设置在一个声明。全写：border:border-width border-style border-color。示例：border:5px solid red; |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中。 |
| border-bottom-color | 设置元素的下边框的颜色。 |
| border-bottom-style | 设置元素的下边框的样式。 |
| border-bottom-width | 设置元素的下边框的宽度。 |
| border-left | 简写属性，用于把左边框的所有属性设置到一个声明中。 |
| border-left-color | 设置元素的左边框的颜色。 |
| border-left-style | 设置元素的左边框的样式。 |
| border-left-width | 设置元素的左边框的宽度。 |
| border-right | 简写属性，用于把右边框的所有属性设置到一个声明中。 |
| border-right-color | 设置元素的右边框的颜色。 |
| border-right-style | 设置元素的右边框的样式。 |
| border-right-width | 设置元素的右边框的宽度。 |
| border-top | 简写属性，用于把上边框的所有属性设置到一个声明中。 |
| border-top-color | 设置元素的上边框的颜色。 |
| border-top-style | 设置元素的上边框的样式。 |
| border-top-width | 设置元素的上边框的宽度。 |
| border-radius | 设置圆角的边框。 |
示例：设置四个边框不同颜色。
<style>
p.box
{
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>
<body>
<p class="box">Four-colored border!</p>
</body>
2.6.8 轮廓
轮廓（outline）指定元素轮廓的样式、颜色和宽度，用作绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
| 属性 | 描述 | 值 |
|---|---|---|
| outline | 在一个声明中设置所有的轮廓属性 | outline-color outline-style outline-width inherit |
| outline-color | 设置轮廓的颜色 | 颜色值 outline-width inherit |
| outline-style | 设置轮廓的样式 | none dotted dashed solid double groove ridge inset outset inherit |
| outline-width | 设置轮廓的宽度 | thin medium thick 宽度值 inherit |
注意：
①outline是不占空间的，既不会增加额外的width或者height（这样不会导致浏览器渲染时出现reflow或是repaint）
②outline有可能是非矩形的（火狐浏览器下）
2.6.9 外边距
CSS margin(外边距)属性定义元素周围的空间。
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
margin 的值：
| 值 | 描述 |
|---|---|
| auto | 设置浏览器边距。这样做的结果会依赖于浏览器 |
| length | 定义一个固定的margin（使用像素，pt，em等） Margin可以使用负值，重叠的内容。 |
| % | 定义一个使用百分比的边距 |
margin 属性：
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
示例：设置一个使用厘米值的文本的顶部margin。
<style>
p.ex1 {
margin-top:2cm;
}
</style>
</head>
<body>
<p>一个没有指定边距大小的段落。</p>
<p class="ex1">一个2厘米上边距的段落。</p>
<p>一个没有指定边距大小的段落。</p>
</body>
2.6.10 填充
CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
值：
| 值 | 描述 |
|---|---|
| length | 定义一个固定的填充（使用像素，pt，em等） |
| % | 定义一个使用百分比的填充 |
属性：
| 属性 | 描述 |
|---|---|
| padding | 使用简写属性设置在一个声明中的所有填充属性 |
| padding-bottom | 设置元素的底部填充 |
| padding-left | 设置元素的左部填充 |
| padding-right | 设置元素的右部填充 |
| padding-top | 设置元素的顶部填充 |
示例：设置在一个声明中的所有填充属性。
p.ex2 {
padding:0.5cm 3cm;
}
2.6.11 溢出内容控制
CSS overflow 属性用于控制内容溢出元素框时显示的方式。该属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
注意：
①overflow 属性只工作于指定高度的块元素上。
②在 Mac 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。
2.6.12 浮动
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边：
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
float 属性值：
| 值 | 描述 |
|---|---|
| left | 向左浮动 |
| right 向右浮动 | |
| none | 正常情况 |
| inherit | 继承 |