第11章 CSS3布局基础 【学习重点】
了解CSS2盒模型。
设计边框样式。
设计边界样式。
设计补白样式。
了解CSS3盒模型。
11.1 CSS盒模型基础页面中所有元素基本显示形态为方形的盒子（Box），根据盒模型规则，网页中所有元素对象都被放在一个盒子里，设计师可以通过CSS来控制这个盒子的显示方式。
11.1.1 盒模型结构Box具有如下特点：
每个盒子都有：边界、边框、填充、内容4个属性。
每个属性都包括4个部分：上、右、下、左。属性的四部分可以同时设置，也可以分别设置。
内容（content）时盒子里装的东西，填充（padding）是怕盒子里装的东西损坏而添加的抗震辅料，边框（border）就是盒子本身，边界（margin）是盒子与盒子之间的空隙。
网页中，内容可以是小盒子（嵌套结构），CSS盒子具有填写，里面的东西大过盒子本身最多把它撑大，但不会损坏盒子。
网页中任何元素都可以视为一个盒子。
11.1.2 定义大小CSS盒子使用width和height定义内容区域（content）的大小。
对于一个CSS盒模型来说，它的实际宽度/高度就等于内容区域的宽度/高度加上两倍的边界、边框和补白之和。
在IE怪异解析模式下（部分浏览器也支持怪异模式，如Firefox和Opera等），CSS的width/height属性表示content、padding和border的width/height之和。
用户也可以通过下面4个属性灵活控制CSS盒模型的大小，这些属性在网页弹性布局中非常有用。
min-width：最小宽度；
max-width：最大宽度；
min-height：最小高度；
max-height：最大高度。
11.1.3 定义边框CSS使用border定义边框样式，border包括3个子属性：border-style（边框样式）、border-color（边框颜色）和border-width（边框宽度）。
定义宽度
直接在属性后面指定宽度值。
<style type="text/css"> border-bottom-width: 12px; border-top-width: 0.2em; </style>