盒子模型

盒子模型简介及用法

盒子模型简介：
CSS盒子模型也叫做框模型，具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。在CSS中，每一个元素都被视为一个框

盒子的基本属性

html文档中的每一个元素在页面布局中都会被呈现为一个盒子模型

盒子模型具体的css属性：

1.内边距：padding的属性 （也叫内填充）

2.外边距：margin的属性

3.边框：border的属性

padding的简介和用法

padding的简介
padding表示盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。

与margin类似，padding包含了上下左右四条边，开发者可以单独设置每一条边的边距。

padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充

padding的用法：
1、padding是长在 内容 和 盒子之间的距离
2、padding是长在盒子里面的
3、padding主要控制子元素在盒子内部的位置关系
4、padding是添加在父元素上面
5、padding可以把盒子撑大！！！！
如果想让盒子保持原有的大小，需要在宽高的基础上减掉padding！！！
注：如果一个盒子没有固定大小（被内容撑开），添加padding 不用减
6、单一方向上设置padding值：
padding-left：
padding-right：
padding-top：
padding-bottom：
7、padding的设置方法：
padding：一个值 四周都有padding
padding：两个值 上下 左右都有padding
padding：三个值 上 左右 下 有padding
padding：四个值 上 右 下 左 有padding
8、padding不会对背景图的位置造成影响
9、padding不能为负值

margin的简介和用法

margin简介
margin，盒子的外边框，他是完全透明的，开发者只可以设置它的边距。
margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。
margin-top：上边距
margin-buttom：下边距
margin-left：左边距
margin-right：右边距

margin的用法
1、margin 是长在盒子外围的。
2、margin 控制当前元素 与 其他同级元素的位置关系。
3、margin不会改变盒子内部的大小。
4、给元素的单一一个方向设置margin值
margin-right:
margin-left:
margin-top:
margin-bottom:
5、margin设置方法：
margin:一个值 四周
margin:两个值 上下 左右
margin:三个值 上 左右 下
margin:四个值 上右下左
6、margin是可以设置负值的！
7、margin常出现的BUG:
A、同级元素 上下 之间的margin的值，不会叠加，会重合，按照最大的设置
B、当父代元素 和 第一个子元素 都没有浮动，给第一个子元素添加margin-top，会错误的把margin-top加在父元素上面。

border
border表示盒子的边界，它可以设置成可见的，样式多样的。

最基本的，border像margin和padding一样可以分别对每一条边进行设置，也可以使用简写属性border进行设置。

border-top：上边界
border-bottom：下边界
border-left：左边界
border-right：右边界

除了可以单独对每一条边进行样式设置之外，还可以分别对边界的宽度、样式和颜色进行设置（下面的属性会对四条边进行设置），同样可以使用简写属性border进行设置。还可以对单独一条边界单独设置宽度、样式或颜色

border-width：边界宽度
border-style：边界样式
border-color：边界颜色

盒子的大小

盒子的大小指的是盒子的宽度和高度。大多数初学者容易将宽度和高度误解为width和height属性，然而默认情况下width和height属性只是设置content（内容）部分的宽和高。

盒子真正的宽和高按下面公式计算：

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

用带属性的公式表示：

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom