CSS对HTML文档元素生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框那么我们可以形象地将其看作是一个盒子

注意:1.盒模型并不是官方提出而是后期针对块元素提出的

盒模型又称框模型（BoxModel）,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

border:边框宽度边框风格边框颜色;

1.border会改变原有盒子嘚大小

比如快递盒子的硬质纸加厚也会影响整个快递的大小。那么在实际操作当中我们添加了border，就要相应的增减盒子的width,heightcss 属性选择器

2.增減宽高时注意我们如果添加了上下左右方向上的border,则增减都是双倍的

1.添加padding也会增大该盒子的大小

在实际操作当中我们添加了padding，就要相应的增减盒子的width,heightcss 属性选择器

2.增减宽高时注意我们如果添加了上下左右方向上的padding,则增减都是双倍的
3.背景颜色与背景图片填充会覆盖content加padding区域

2.相邻兄弚元素在垂直方向相遇则取最大值；

3.当父级子级元素都设置了margin时子级的margin值会出现融合的情况，融合后会取两个元素里较大的值作为融合後的值解决：父元素{overflow:hidden}

说明:visible:默认值，内容不会被修剪会出现在元素框之外；
hidden:内容会被修剪,并且其余内容是不可见的;
scroll:内容会被修剪，但是瀏览器显示滚动条
auto:如果内容超出则会显示滚动条，不超出->不显示