css盒子模型讲解

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。

HTML文档中可以将每个元素都看作是长方形的盒子。而CSS盒模型规定了元素框处理元素内容content、内边距padding、边框border和外边距margin的方式。如图：

代码演示：

如图这个盒子宽widht:500px,高height：200px,外边距padding：100px，边框border：5px, 外间距margin：100px;所以这个盒子的大小为710px*410px

因为盒子本身的大小是这样计算的：

width: width + padding-left + padding-right + border-left + border-right

 height: height + padding-top + padding-bottom + border-top + border-bottom

通过盒模型我们更容易理解

标准盒模型：

何为padding内边距？

1,、padding内边距是在盒子里面，在盒子与内容之间，控制子元素在父元素里面的位置关系。

2、padding会把盒子撑大，如果想让盒子保持原有的大小：在宽高基础上减掉。（ 如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉）

      注意：padding不会对背景图的位置造成影响。

3、给padding单一方向赋值，padding-top/padding-tbottom/padding-left/padding-right

简写：padding：top  right  bottom  left ，按顺时针方向书写。

Padding声明一个值时控制四周

Padding声明两个值时控制Padding；上下 左右

Padding声明三个值时控制Padding；上 左右  下

Padding声明四个值时控制Padding；上 右 下 左

例：

注意：CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。 

border边框：

在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。

如图，我们可以了解变宽类型：border：solid实线/dashed虚线/dotted点状线/double双线/none

边框属性值书写方式：

border：边框大小px  边框颜色color  边框类型

border声明一个值时控制四周

border声明两个值时控制Padding；上下 左右

border声明三个值时控制Padding；上 左右  下

border声明四个值时控制Padding；上 右 下 左   按顺时针方向书写。

margin外边距： 

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

给padding单一方向赋值，margin-top/margin-tbottom/margin-left/margin-right

简写：margin：top  right  bottom  left ，按顺时针方向书写。

margin声明一个值时控制四周

margin声明两个值时控制Padding；上下 左右

margin声明三个值时控制Padding；上 左右  下

margin声明四个值时控制Padding；上 右 下 左

注意:

两个相邻元素上下的margin值不会叠加按照较大值设置，也就是说两个相邻的值上面的设置margin-bottom：20px；下面的设置margin-top：30px；此时两元素相距30px。如图

如果父元素和第一个子元素没有浮动的情况下，给第一个子元素添加margintop,会错误放在父元素上面。