盒子的模型

css中盒子模型是非常重要的一部分，对于前端开发来说至关重要。

它可以想象成一个快递，一个快递由物品（content）保护套(padding),外包装（border），还有其他快递，两个快递之间为（margin），生动的形象的比喻一下，这样对概念的理解更生刻。

所以我们知道了盒子模型是由:内容区（content）内边距(padding)  边框(border)  外边距(margin)  构成的

1.内容区就是指盒子的内容，显示文本和图像

2.内边距padding;内容区和边框之间的距离大小。

一共有四个方向的内边距，可以通过：

* padding-top

* padding-right

* padding-bottom

* padding-left

* 来设置四个方向的内边距

一个值，四个方向一样

两个值，上下 左右

三个值，上左右下

四个值，上右下左（顺时针方向）

特征：1，背景色可以蔓延到内边距，2，可以设置单一方向，3，不支持内边距数值为负数（无意义）

二,border(边框）；会影响整个盒子的大小

是由形状，颜色，大小来设置布局的。语法：border +方向：形状&大小&颜色无顺序要求，必须指定这三个样式

形状分为；solid（实线）dashed（虚线） double（双线）dotted(点状）一般常用solid

方向设置和内边距一样，可设四个值，可以单独设置

拓展：border-radius可以设置圆角弧度，背景，图片都可以设置，以大小为半径，画圆裁剪

外边距margin（非常重要）：当前盒子和其他盒子的距离

1，四个方向，和以上属性一样设置。注意；设置bottom元素本身无变化，但会挤其他盒子向下移动

2，特征；背景色不能蔓延，可以取负数值，margin：0 auot 横向居中。

                不会改变盒子可见框的大小，设置right,默认情况下元素无变化

兄弟关系;垂直布局,正值时外边距取最大值，负值，绝对值谁大听谁。水平方向会进行合并处理

父子关系：默认情况下，父元素高度被子元素撑开，若父设置了，该是多少就是多少

在父子关系中，给子盒子给予外边距，会作用在父元素上，怎么解决：

1子元素margin变成父元素的padding，需要注意高度计算

2，给父设置边框，注意高度计算

3，加浮动，使不在同一文档流，可达到目的

4，用overflow：hidden/auot 隐藏属性BFC,只要不是默认值visible就行