CSS盒子模型概述

盒子模型概述

1.认识盒子模型

　　所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距、边框和外边距组成。

　　具体可以把盒子模型比作为一个手机盒子模型：

　　一个完整的手机盒子通常包含手机、填充泡沫和盛装手机的纸盒。如果把手机盒子想象成HTML元素，那么手机盒子就是一个CSS盒子模型，其中的手机为CSS盒子模型的内容，填充泡沫的厚度为CSS盒子模型的内边距，纸盒的厚度为CSS盒子模型的外边距，当多个手机盒子放在一起时，它们之间的距离就是CSS盒子模型的外边距。

　　网页中的所有元素和对象都由上图所示的基本结构组成，并呈现出矩形的盒子效果。在浏览器看来，网页就是多个盒子嵌套排列的结果。其中，内边距出现在内容区域的周围，当给元素添加背景色或是背景图像时，该元素的背景色或背景图像也将出现在内边距中，外边距是该元素与相邻元素之间的距离，如果给元素定义边框属性，边框将出现在内边距和外边距之间。

　　需要注意的是，虽然盒子模型拥有内边距、边框、外边框、宽和高这些基本属性，但是并不要求每个元素都必须定义这些属性。

2.<div> 标记

　　div是英文division的缩写，意味“分割、区域”。<div>标记简单而言就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。<div>与</div>之间相当于一个“盒子”，可以设置外边距、宽和高，同时内部可以容纳段落、标题、表格、图像等各种网页元素，也就是大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>。

在上面的图片中，定义了两对<div>，其中一对<div>中嵌套段落标记<p>。对两对<div>分别添加class属性，然后通过CSS控制其宽、高、背景颜色和文字样式等。

注意：（1）：<div>标记最大的意义在于和浮动属性float配合，实现网页的布局，这就是常说的DIV+CSS网络布局。

　　　（2）：<div>可以代替块级元素如<h>、<p>等，但是它们在语义上有一定的区别。

3.盒子的宽与高

　　网页是由多个盒子排列而成的，每个盒子都有固定的大小，在CSS中使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height的属性值可以为不同的单位的数值或相对于父元素的百分比，实际工作中最常用的是像素值。

 上图中，通过width和heigth属性分别控制段落的宽度和高度，同时对段落应用了盒子模型的其他相关属性，如边框、内边距、外边距等。

符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

1.盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和

2.盒子的总高度=height+上下内边距之和+上下边框高度之和+上下外边距之和