学习目标：

• 1. 能够说出盒子模块的四大组成部；
• 2. 能够掌握盒子模型的边框.内边距.外边距的作用和简写形式；
• 3. 能够计算盒子的实际大小；
• 4. 能够说出CSS3盒模型的代码；
• 5. 能够说出盒子、文本水平居中的代码；
• 6. 能够说出外边距折叠现象-塌陷现象的解决方法；

盒子模型

1.概念：页面中得每个标签,都可以看成是一个"盒子"。

2.作用：通过盒子模型更方便布局.

2.盒子模型组成： CSS规定每个盒子分别由：内容区域（content).内边距区域（padding). 边框区域（border).外边距区域（margin）g构成，这就是盒子模型.

3.盒子模型---内容区域（content)

3.盒子模型------边框区域（boder)

盒子实际大小的初级计算：

3.盒子模型------内边距区域（padding)

            width: 100px;
            height: 100px;
            background-color: pink;
            border: 1px solid red;
            /* 一个值 */
           padding: 10px;     

padding: 10px;

padding: 10px 20px;

 padding: 10px 20px 30px;

新浪导航的优化

网页新闻列表

3.盒子模型-----外边距（margin)

margin: 5px 10px;

 margin: 5px 10px 0;

外边距margin的应用--让盒子移动

外边距折叠现象

外边距塌陷现象