1、CSS 盒模型
元素尺寸
CSS 盒模型中最基础的就是设置一个元素的尺寸大小。有三组样式来配置一个元素的尺寸大小，样式表如下：
// 设置元素尺寸div {width: 200px;height: 200px;}
解释：设置元素的固定尺寸。
// 限制元素尺寸div {min-width: 100px;min-height: 100px;max-width: 300px;max-height: 300px;}
解释：这一组主要是应对可能动态产生元素尺寸变大变小的问题，从而限制它最大和最小的值。
// auto 自适应div {width: auto;height: auto;}
解释：auto 是默认值，width 在 auto 下是 100%的值，height 在 auto 下是自适应。
// 百分比方式#a {background: silver;width: 200px;height: 200px;}#b {background: gray;width: 80%;height: 80%;}<div id="a"><div id="b">我是 html5</div></div>
解释：百分比就是相对于父元素长度来衡定的。
元素内边距
CSS 盒模型中可以设置元素内部边缘填充空白的大小，我们称为内边距。样式表如下：
// 设置四个内边距div {padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;}// 简写形式，分别为上 10px、右 10px、下 10px、左 10pxdiv {padding: 10px 10px 10px 10px;}// 简写形式，分别为上 10px，左右 50px，下 200pxdiv {padding: 10px 50px 200px;}// 简写形式，分别是上下 10px，左右 20pxdiv {padding: 10px 20px;}// 简写形式：上下左右均 10pxdiv {padding: 10px;}
元素外边距
CSS 盒模型中可以设置元素外部边缘填充空白的大小，我们称为外边距。样式表如下：
// 设置四个外边距div {margin-top: 10px;margin-bottom: 10px;margin-left: 10px;margin-right: 10px;}// 简写形式，分别为上 10px、右 10px、下 10px、左 10pxdiv {margin: 10px 10px 10px 10px;}// 简写形式，分别为上 10px，左右 50px，下 200pxdiv {margin: 10px 50px 200px;}// 简写形式，分别是上下 10px，左边 20pxdiv {margin: 10px 20px;}// 简写形式：上下左右均 10pxdiv {margin: 10px;}
处理溢出
当设置了元素固定尺寸且内容过大时，就会出现溢出的问题。溢出主要朝两个方向：右侧和底部。我们可以通过 overflow 系列样式来控制它。
溢出处理主要有四种处理值：
// 设置溢出为 auto 值div {overflow-x: auto;}
元素可见性
使用 visibility 属性可以实现元素的可见性，这种样式一般可以配合JavaScript来实现效果。样式表如下：
// 设置元素隐藏，但占位div {visibility: hidden;}// 隐藏表格的行或列，但不占位，Chrome 和 Opera 不支持table tr:first-child {visibility: collapse;};
元素盒类型
CSS 盒模型中的 display 属性，可以更改元素本身盒类型。那么元素有哪些盒类型呢？主要有：1. 块级元素（区块）；2. 行内元素（内联）；3. 行内-块级元素（内联块）；4. 隐藏元素。
块级元素
所谓块级元素，就是能够设置元素尺寸、隔离其他元素功能的元素。比如：<div>、<p>等文档元素。行内元素
所谓行内元素，不能够设置元素尺寸，它只能自适应内容、无法隔离其他元素，其它元素会紧跟其后。比如：<span>、<b>等文本元素。行内-块元素
所谓行内-块元素，可以设置元素尺寸，但无法隔离其他元素的元素。比如<img>。
// 将行内元素转成块级元素span {background: silver;width: 200px;height: 200px;display: block;}// 将块级元素转换成行内元素div {background: silver;width: 200px;height: 200px;display: inline;}// 将块级元素转化成行内-块元素div {background: silver;width: 200px;height: 200px;display: inline-block;}// 将元素隐藏且不占位div {display: none;}
元素的浮动
CSS 盒模型有一种叫浮动盒，就是通过 float 属性建立盒子的浮动方向，样式表如下：
// 实现联排效果#a {background: gray;float: left;}#b {background: maroon;float: left;}#c {background: navy;float: left;}// 实现元素右浮动#c {background: navy;float: right;}// 取消元素的浮动#c {background: navy;float: none;}
刚才的浮动有一个问题：当一个元素盒子被浮动后，下面的元素会自动堆叠处理，导致元素不可见或部分不可见。我们可以使用 clear 属性来处理。
// 两边均不可浮动#c {background: navy;clear: both;}
2、边框和背景
声明边框
边框的声明有三个属性设置，样式表如下：
这三个属性值，只有 border-style 是必须声明，才可以出现边框。而其他两个属性会出现默认值。
// 最简单的边框，边框长度默认 3px，边框颜色为黑色div {border-style: solid;}// 配置完整的边框div {border-style: solid;border-width: 2px;border-color: red;}
如果元素长和高均为 200px 时，四个边框均为 2 时，元素的长高总尺寸均为 204px。
边框样式
边框的样式主要有三种，分别是边框长度取值、边框的颜色和边框的线条类型。颜色是通用的颜色代码，和所有其他颜色取值一下。而长度和线条类型，边框有自己独到的部分。
边框宽度取值表如下：
一般来说，边框为了更加精准，还要计算元素盒子的总尺寸，使用长度值的比较多。而定义边框线条的样式如下样式表：
// solid 实线使用频率最高div {border-style: solid;border-width: 10px;border-color: red;}
如果想对四条边中某一条边单独进行设置，可以使用如下样式表：
// 只设置顶端div {border-top-style: solid;border-top-width: 10px;border-top-color: red;}
如果四条边都一致，那么没必要分写成三句样式，直接通过简写即可：
// 简写形式四条边设置div {border: 10px solid red;}
圆角边框
CSS3 提供了一个非常实用的圆角边框的设置。使用 border-radius 属性，就可以达到这种效果，样式表如下：
// 设置圆角矩形div {border: 10px solid red;border-radius: 10px;}// 四条边分别设置div {border: 10px solid red;border-radius: 10px 20px 30px 40px;}
设置背景
盒模型的尺寸可以通过两种方式实现可见性，一种就是之前的边框，还有一种就是背景。CSS 背景设置的样式表如下：
background-color
div {background-color: silver;}
解释：设置元素的背景颜色。属性值是颜色值。
div b {background-color: transparent;}
解释：默认值为 transparent，为透明的意思。这样<div>内部的元素就会继承<div>的背景色。一般来说这个属性使用频率很低，原因是不需要改变色彩时就默认，需要改变色彩时又是颜色值。
body {background-color: silver;}
解释：在<body>元素下可以设置整个页面的背景色。
background-image
body {background-image: url(loading.gif);}
解释：url 里面是图片的路径，设置整个页面以这个图片为背景，如果图片不足以覆盖，则复制扩展。
div {background-image: none;}
解释：如果多个 div 批量设置了背景，而其中某一个不需要背景，可以单独设置 none值取消背景。
在 CSS3 中，背景图片还设置了比如线性、放射性等渐变方式。
background-repeat
body {background-image: url(loading.gif);background-repeat: no-repeat;}
解释：让背景图片只显示一个，不平铺。
background-position
body {background-image: url(loading.gif);background-repeat: no-repeat;background-position: top;}
解释：将背景图片置于页面上方，如果想置于左上方则值为：top left。
body {background-image: url(loading.gif);background-repeat: no-repeat;background-position: 20px 20px;}
解释：使用长度值或百分数，第一值表示左边，第二个值表示上边。
background-size
body {background-image: url(loading.gif);background-size: cover;}
解释：使用 cover 相当于 100%，全屏铺面一张大图，这个值非常实用。在等比例放大缩小的过程中，可能会有背景超出。
div {background-image: url(loading.gif);background-size: contain;}
解释：使用 contain 表示，尽可能让图片完整的显示在元素内。
body {background-image: url(loading.gif);background-size: 240px 240px;}
解释：长度值的用法，分别表示长和高。
background-attachment
body {background-image: url(loading.gif);background-attachment: fixed;}
解释：fixed 属性会导致背景产生水印效果，拖动滚动条而背景不动。
background-origin
div {width: 400px;height: 300px;border: 10px dashed red;padding: 50px;background-image: url(img.png);background-repeat: no-repeat;background-origin: content-box;}
解释：设置背景起始位置。
background-clip
div {width: 400px;height: 300px;border: 10px dashed red;padding: 50px;background-image: url(img.png);background-repeat: no-repeat;background-origin: border-box;background-clip: padding-box;}
解释：在内边距盒子内部裁剪背景。
background
div {width: 400px;height: 300px;border: 10px dashed red;padding: 50px;background: silver url(img.png) no-repeat scroll left top/100%border-box content-box;}
解释：完整的简写顺序如下：
[background-color][background-image][background-repeat][background-attachment][background-position] / [ background-size][background-origin][background-clip];
3、表格和列表
表格样式
表格有五种独有样式，样式表如下：
border-collapse
table {border-collapse: collapse;}
解释：单元格相邻的边框被合并。
border-spacing
table {border-spacing:10px;}
解释：border-collapse: separate;的状态下才有效，因为要设置间距，不能合并。
caption-side
table {caption-side: bottom;}
解释：设置表格标题。
empty-cells
table {empty-cells: hide;}
解释：单元格内容为空时隐藏边框。
table-layout
table {table-layout: fixed;}
解释：内容过长后，不会拉伸整个单元格。
列表样式
列表有四种独有样式，样式表如下：
list-style-type
ul {list-style-type: square;}
解释：列表前缀的标记类型，这里是 CSS1 版本的。CSS2 版本还包含比如日文、亚美尼亚数字、希腊文等前缀。
list-type-position
ul {width: 120px;list-style-position: inside;}
解释：标记位于内容框的内部。
list-type-image
ul {list-style-image: url(bullet.png);}
解释：使用图片作为前缀的标记。
list-style
ul {list-style: lower-alpha inside url(bullet.png);}
解释：简写形式。
垂直对齐
在<table>中<td>单元格，我们可以使用 text-align 属性水平对齐，但是垂直对齐就无法操作了。CSS 提供了 vertical-align 属性用于垂直对齐。
table tr td {vertical-align: bottom;}
解释：将单元格内的内容对象实现垂直对齐。
b {vertical-align: super;}
解释：文本上下标设置。
div span {vertical-align: -200px;}
解释：负值往下，正值往上。如果默认基线在上面，用负数。如果默认基线在下面，用正值。
4、颜色和透明度
颜色包括字体颜色、背景颜色、边框颜色，设置字体颜色也称为文本块的前景色。
p {color: red;}
解释：设置文本颜色。
CSS3 提供了一个属性 opacity，可以设置元素的透明度。
p {color: red;opacity: 0.5;}
解释：设置元素的透明度。
5、盒子阴影和轮廓
box-shadow
CSS3 提供了一个非常实用的效果样式，就是阴影效果。通过 box-shadow 属性来实现，样式表如下：
div {width: 200px;height: 200px;border: 10px solid silver;box-shadow: 5px 4px 10px 2px gray;}
解释：给元素盒子增加阴影效果。
box-shadow: 5px 4px 10px 2px gray inset;
解释：实现内部阴影。
outline
CSS3 还提供了轮廓样式，它和边框一样，只不过它可以在边框的外围再加一层。样式表如下：
div {width: 200px;height: 200px;border: 10px solid silver;outline: 10px double red;}
解释：在边框的外围再增加一圈轮廓。
6、光标样式
我们不但可以指定页面上的元素样式，就连光标的样式也可以指定。样式表如下：
div {cursor: move;}
解释：设置当前元素的光标为移动光标。
7、CSS3 前缀
在 CSS3 的很多新属性推出时，这些属性还处在不太稳定的阶段，随时可能被剔除。而此时的浏览器厂商为了实现这些属性，采用前缀方法。各大厂商前缀列表如下：
我们之前学习过几个 CSS3 的新属性，比如：box-shadow、border-radius、opacity等。这几个属性我们在前面的使用中，并没有添加所谓的浏览器厂商前缀。那是因为，这些属性已经在主流浏览器或版本成为了标准。具体进化步骤如下：
属性尚未提出，这个属性所有浏览器不可用；属性被提出，但未列入标准，浏览器厂商通过私有前缀来支持该属性；属性被列入标准，可以使用前缀或不使用前缀来实现属性特性；属性不需要再使用前缀，所有浏览器都稳定支持。
我们就拿 border-radius 举例，它是 CSS3 的标准属性。早期的时候处于实验阶段，尚未列入标准时，需要使用厂商前缀。具体浏览器支持度如下：
如果是手机等移动端一般采用的是 IOS 或安卓系统，那么基本上它的引擎是 webkit，直接参考-webkit-即可。
在 CSS3 手册上，Chrome 支持 border-radius 的版本为 13.0，而部分教材和文章上写到只要 5.0。当然，这里可能表达的含义可能不同。而截至到 年 4 月份最新的 Chrome 版本已经到 41.0 了，所以，不管是 5.0 还是 13.0 都是老古董了，没必要深究。Opera 支持 border-radius 版本为 11.5，而目前的版本是 28.0，也无伤大雅了。而被列入标准的 box-shadow 和 opacity 基本与 border-radius 前缀版本一致。
// 因为目前处在标准阶段，没必要写前缀了div {border-radius: 50px;}// 实验阶段的写法div {-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;}
实验阶段的写法有三句，分别解释一下：-webkit-表示 Chrome 浏览器的私有属性前缀、-moz-表示 Firefox 私有属性前缀，如果是处于实验阶段的旧版本浏览器，那么不支持 border-radius，从而通过厂商前缀的方式来支持。如果是新版浏览器，已经是处于标准阶段，那么又有两种说法：1.如果新版浏览器废弃了前缀，那么前缀写法就不支持了，仅支持标准写法；2.如果新版浏览器没有废弃前缀，那么两种写法都可以，但要注意顺序，且属性值要保持一致。
如果同时出现四个前缀+一个标准写法，四个前缀是当实验阶段时让四种引擎的浏览器厂商支持自己的私有属性，一个标准写法表示当这个属性列入标准后，使用新版浏览器运行时直接执行这个标准属性。
// 前缀写法写在标准后面，且值不一样，就会出现问题div {border-radius: 50px;-webkit-border-radius: 100px;}
特别注意：1. IE 的前缀-ms-，和 Opera 的前缀-o-，在 border-radius 中不存在；2. 现在的Opera浏览器也支持-webkit-前缀，-webkit-border-radius就能支持；3. Safari for Windows 已被苹果公司在 年放弃，遗留版本为 5.1.7。
最后说明：W3C 官方的立场表示实验阶段的属性仅为了测试，未来有可能修改或删除。而大量的开发者也认为在实际项目中不应该使用前缀，而使用一种优雅降级保证一定的用户体验，而通过渐进增减的方式让新版高级浏览器保证最高的效果。
8、长度单位 rem
CSS3 引入了一些新的尺寸单位，这里重点推荐一个：rem 或者称为（根 em）。目前主流的现代浏览器都很稳定的支持。它和 em、百分比不同的是，它不是与父元素挂钩，而是相对于根元素<html>的文本大小来计算的，这样能更好的统一整体页面的风格。
// 首先，来一段 HTML<h1>标题<em>小标题</em></h1><p>我是一个段落，我是一段<code>代码</code></p>// 其次来一段 CSShtml {font-size: 62.5%;}h1 {font-size: 3em;}p {font-size: 1.4em;}
这里做几个解释，我们在之前的 Web 设计中大量使用了 px 单位进行布局。因为，早期的固定布局使用 px 较为方便，逐渐养成了这种习惯。而使用 em 单位其实更加灵活，尤其是在修改样式时，只需要修改一下挂钩元素的那个大小即可，无须每个元素一个个修改。
但就算是 em，还是有一定问题。网页默认的字号大小为 16px，然后通过<html>设置62.5%，将网页基准设置为 10px。而<h1>设置为 3em，就是自身大小的 3 倍；<p>设置为1.4em，就是 10px 的 1.4 倍，即 14px。
现在问题来了，<code>里面的文本想设置 11px，怎么办呢？设置 1.1em 吗？不对，因为它挂钩的父元素不是<html>而是<p>变成了 14px 的 1.1 倍了，而想设置 11px，则需要设置 0.786 倍才行。但是，这样的计算量太大了。所以，W3C 推出了直接基于根元素单位：rem。
// 直接基于<html>的单位code {font-size: 1.1rem;}
