盒模型属性介绍及案例分析

盒模型

盒模型，顾名思义，也就是一个框架，通俗一点来讲就是一个容器，比如生活中常见的手机盒子，快递盒子等等，那么盒子在HTML网页中又是如何应用的呢？

盒模型的具体定义：

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。

下面来了解一下标准的盒模型：

此时是不是感觉特别的复杂？

不用慌！下面将通过一些案例一步一步来实现这个标准的盒模型。

首先你得建立一个盒子里面有个内容区：
代码操作：

效果图：

接下来我们为盒子添加边框border

添加之前，让我们先了解一下border(边框)的属性及语法：

属性：border-width（边框的大小，像素为单位）
border-style（边框的样式,常用样式有：solid实线、double双实线、dashed虚线等）
border-color（边框的颜色）
语法：边框线型必写，其他与顺序无关。
1.border:red solid 5px;（可以四周同时添加）
2.border-top:red solid 5px;（也可单方位添加，方位值：top、 bottom、left、right）

下面看一下具体操作
代码操作：为盒子添加四周10像素的橘色实线边框。

效果图

然后我们来完成他的内边距padding的基本操作：
首先了解一下它的性质：
1:padding是在盒子里面，在盒子与内容之间。
2：padding的作用：控制子元素在父元素里面的位置关系。
3：padding会把盒子撑大，padding不会对背景图的位置造成影响。
4：如果想让盒子保持原有的大小：在宽高基础上减掉。（ 如果一个元素被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉 ）
5:如果给单一方向添加padding：padding-top/bottom/left/right
6:padding的设置特点：
padding:30px; 四周
padding:10px 30px; 上下 左右
padding:10px 30px 50px 上 左右 下
padding:10px 30px 50px 100px 上右下左

下面进行具体操作：
代码操作 ：为盒子添加四周的内填充。

数值变动说明：padding：100px;为四周加内填充，由于padding会撑大盒子，所以根据大盒子的宽高减去padding所占的上下200px,左右200px,得到最终大盒子宽高200px这个值，从而不影响父元素的大小。

效果图：

最后就是margin(外边距、边界)的操作了

同上面一样我们首先来了解一下margin的用法及属性介绍：
1:margin在元素外围，不会撑大元素的大小 。
2:作用:控制元素与元素之间的间距。
3：给单一方向添加margin：margin-left/right/top/bottom 。
4 :margin设置方法：
margin:30px; 四周
margin:10px 30px; 上下 左右
margin:10px 30px 50px 上 左右 下
margin:10px 30px 50px 100px 上右下左
5:margin:0 auto；让当前元素在父元素里面左右居中。
6:margin常出现的bug
a:两个相邻元素上下的margin值 不会叠加 按照较大值设置。
b:如果父元素和第一个子元素没有浮动的情况下，给第一个子元素添加margin-top,会错误放在父元素上面。
下面进行margin的具体操作
代码操作：为盒子添加下边距。

效果图：

这就是一个简单的盒模型！！！

现在的你了解了吗？
这个结构了解了吗，试着分析一下这张图

没错这就是我们刚刚实现的盒模型！现在觉得是不是特别的简单，有建议请留言，方便进一步改进，谢谢大家！