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

二、内边距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盒子模型的认识，有错误和不足之处，欢迎大家指正！

软件开发

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。