###盒子模型 外边距 内边距 边框 的使用

###盒子模型 外边距 内边距 边框 的使用

首先了解一下盒子模型
box：盒子，每个元素在页面都会形成一个矩形区域盒子

盒子类型：
1.行盒：通过display这个属性他的属性等于这个inline的元素 中式英文：liline英乃
ps：行和在页面中不换行
浏览器默认样式设置行盒：span a img 。。。
2.块盒：display等于block的元素
ps：快盒子在页面中独占一行
以前的说发叫inline-block 这种说法叫行类块盒子 ps：解释在一行能成块的盒子 他的属性值是行和快盒子组合在一起的
盒子的组成部分：
无论是行盒子，块盒子都由一下几个部分组成：
1内容 content

width  height 设置的是盒子内容的宽高

一margin：内边距
padding: 20px
分开设置写法：
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
简写：这种简写方式叫语法糖 从本质上来讲没有改变他的底层设置

padding： 20px 30px 40px 50px
上面的 右边 下边 左边

如果设置两个值他的效果会是怎么样的：
padding：20px 50px；
解： 第一个20px是上面和下面 第二个值50px 左右两边为50px

如果设置三个值他的效果是
padding：20px 50px 80px；
解：明显上面第一个还是20px 右边50px 下边80px

所以这个地方有一个规律 首先无论怎么样我写的怎么样第一个一定是设置上面，
如果只有一个值他们四个都是一样的 ，后面再看 如果第二个值 他会给右边 如果
有第三个值会个下面 如果地三个值之后没有值了：如padding：20px 50px 80px；
他就回去找对边 左右两边把

二.margin：外边距；设置对象四边的外延边距。

margin: 20rpx 10rpx 25rpx 10rpx ：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
margin：20rpx：如果只提供一个，将用于全部的四边。
margin：20rpx 20rpx：如果提供两个，第一个用于上、下，第二个用于左、右。
margin：20rpx 20rpx 10rpx：如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
某些相邻的margin会发生合并，称之为margin折叠，具体的现象就如果两个块级元素都设置了margin，那取两者之间的最大值做为两个元素的外边距。
注意：margin折叠常规认知：
margin折叠只发生在块级元素上；
浮动元素的margin不与任何margin发生折叠；
设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠；
绝对定位元素的margin不与任何margin发生折叠；
根元素的margin不与其它任何margin发生折叠.

三 外边距 border
1、关键字;border（边框）border-top（上）border-right（右）border-bottom（下）border-left（左）！

2、边框（border）与margin、padding不一样，因为margin与padding只需要一个数值就可以表示了，但边框不仅仅需要表明像素与宽度，还需要表明边框的形状与颜色！

3、边框的表达方式：border：形状 宽度 颜色；（border：solid npx yellow；）