本章目录
--什么是盒子模型
html中的元素都是以一个矩形的形式表现的，它分为margin、border、padding、content4个部分，像一个盒子一样。如下图所示：
- margin：表示该元素与其他元素的距离，图过设了背景图片，背景图片不会填充这个宽度；
- border：表示该元素的边框宽度；
- padding：表示层中的内容里边框的距离，当设置了层的背景图片时，背景图片将填充包括padding在内的空间，因此我们想要背景图片填满整个层时可以通过设置padding的宽度，把margin宽度设为0px，来控制内容离边框的距离：
- content：显而易见就是层中我们实际放内容的空间了。
--DOCTYPE是什么
DOCTYPE，document type（文档类型）的简写，作用是告知浏览器当前文档所使用的是哪种超文本或可扩展超文本规范。浏览器依据DOCTYPE的声明，决定使用哪种解释方式。
XHTML 1.0中存在3中DOCTYPE文档类型：
- STRICT(严格类型)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//CN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- TRANSTIONAL(过渡类型)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//CN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- FRAMESET(框架类型)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//CN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
常用的文档类型是过渡类型。
--IE浏览器的渲染方式
IE存在2中渲染方式：Quirks(怪异模式)，Standard(标准模式)。
- Quirks通常用来模拟老式浏览器，如果html文档中没有DOCTYPE声明，或者声明前有其他字符，IE将使用Quirks模式。
- Standard是平时常用的渲染模式。
--Quirks和Standard的区别
- Standard模式下，元素的width,height指的是content的宽度和高度。
- Quirks模式下，元素的width,height指的是包含了padding,border,content的宽度和高度。
Quirks模式中，实际元素大小也并不一定总按照上面的规则的：
- content + padding + border > width时，实际元素大小按照content + padding + border；
- 当内容超过content时，实际元素大小将随内容的大小而变化。
--容器居中的配置
使用margin-left:auto;margin-right:auto; 可以使容器居中。
--容器居右的配置（float方法）
使用float:right 可以使容器位于上级元素的右边。
--容器居右的配置（absolute方法）
使用position:absolute; right:0px; 可以使容器位于上级元素的右边。
