浅谈对CSS盒模型的一些理解

     网页由一系列HTML标签组成，那么浏览器是如何渲染这些标签的呢？ 在没有定位和浮动的前提下，浏览器默认从HTML文档的开始，从上到下逐个摆放遇到的各个HTML元素，那么每个HTML元素与元素之间又是如何摆放的？这就需要用到盒模型了。

    盒模型就是CSS看待元素的一种方式，CSS将每个HTML元素看做一个盒子，这个盒子从内到外包括元素内容content、内边距padding（可选）、边框border（可选）、外边距margin（可选）。如果我们想控制这个盒子在页面上如何显示及摆放，控制它和其他元素的相对位置，就可以对这个盒子的内边距、边框、外边距等作出调整来实现。

一、内容区

如下所示是一个div元素，<div>标签中包含一段文字，把div元素看做一个盒子的话，里面的文字就是div盒子的元素内容，div默认没有内边距，边框和外边距。此时盒子的大小刚好能包含所有的内容，内容与盒子边缘没有空隙。

二、内边距padding

接下来可以利用background属性为元素设置一个背景色和背景图片，使div元素的内容更加醒目，如下，我们发现文字覆盖在背景图片上，显得很混乱

为了把背景图片和文字从视觉上剥离，可以创建一些看得见的空间，通过设置padding属性即可实现。

如下，分别指定上、右、下、左的内边距，由于内边距是透明的，可以呈现背景颜色和背景图片，从视觉上，美化了文档。

padd

解析padding属性

 通过CSS，可以分别指定盒模型任意一边（上、右、下、左）的内边距，如上所示，也可以等价简写为

 padding: 20px 20px 20px 100px;

其他简写形式：（注：和上面的没有直接关系）

三、边框 border

为了在视觉上进一步使div元素和其他的页面隔开，可以通过border设置边框，边框可以有各种不同的宽度、颜色和样式。先设置一种看一下效果

border: 1px solid black;

解析border属性：

1）边框样式 border-style

border-style属性可以控制边框的视觉样式，有多种样式可选，如solid、dotted、dashed、double、groove、inset、outset，ridge默认值是none，表示无边框。如下图所示

2）边框宽度 border-width

border-width属性可以控制边框的宽度，可以使用像素值精确控制，也可以使用关键字thin、medium、thick指定

3)边框颜色 border-color

border-color属性设置边框的颜色，和设置背景颜色一样，属性值可以是颜色名、十六进制码、rgb函数值，此处不做详细说明

简写形式：

• 可以使用border-top、border-right、border-bottom、border-left分别定义四条边框的所有属性（样式、宽度、颜色）

• 也可以直接使用border一次性对四条边框的样式、宽度、颜色同时进行设置，如下
  

 border:border-width border-style border-color;

四、外边距

如下图，默认情况下，div是紧挨着父元素body摆放的，可以通过margin设置外边距，在div元素的周围设置额外的空间，控制和其他元素的距离。

设置       

margin-top: 20px;     /*div边框上面增加20px的外边距*/
margin-right: 50px;    /*右边增加50px外边距*/
margin-bottom: 20px;   /*下边增加20px外边距*/
margin-left: 100px;    /*左边增加100px外边距*/

以上样式分别控制上、右、下、左四个方向的外边距，外边距同内边距一样也是透明的，本身没有颜色也没有装饰，主要作用是控制元素和元素之间的距离。

同padding一样，margin也有简写形式，以上等价于margin: 20px 50px 20px 100px;

当然也可以只有三个值，两个值，一个值，分别代表不同的含义，这里不再赘述

PS:

    margin左右属性值设置为auto时，可以设置元素左右居中显示的效果，

    如 margin:20px auto;   /*设置元素上下外边距为20px，左右为auto，左右auto相互作用下元素居中显示*/

最后，总结一下，以上只是对盒子模型本身的讨论，在实际应用中，一个HTML页面中，每个元素都可以看做是一个盒子，如p、h1~h5、ul li，甚至内联元素在CSS看来都是盒子，都可以根据盒子模型的属性来进行精准的控制，实现HTML元素的布局。

补充：width和padding、border、margin之间的关系是什么？

width定义的只是内容本身的宽度，要确定整个盒子的宽度，就需要将内容的宽度、左右内边距、左右边框宽度和左右外边距都加在一起。

如上图，div盒子的宽度=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right

                                   =100+1+100+600+20+1+50=872px

height同理。

注：以上内容为个人通过老师讲课和查阅资料，结合个人理解写的一点对CSS盒子模型的认识，有错误和不足之处，欢迎大家指正！