盒子模型

一、定义

css在处理网页时，它认为每个元素都包含在一个不可加你的盒子里，我们只需要将相应的盒子放在相应的位置即可完成对网页的布局。

二、简介

1. border-width，边框的宽度

border-width-xxx(top,left,bottem,right): xx px

2. border-color，边框的颜色

border-color-xxx(top,left,bottem,right): xxx

3. border-style，边框的样式

border-style-xxx(top,left,bottem,right): xxx

具体属性：

none: 没有

solid: 实线

dotted: 点状

dashed: 虚线

 double: 双线

简写: border: (...)，没有顺序要求，不能分别制定

border-xxx(top,left,bottem,right): a b c

注意: 大部分浏览器都有边框颜色，宽度默认值

4. 内边距

padding-xxx(top,left,bottem,right): xx px

简写: padding: x,x,x,x

注意: 背景能延伸到内边距，内联元素设置为垂直方向内边距，不会影响页面的布局

5. 外边距: 最小值，有负值

margin-xxx: top,left,bottem,right

 auto: 自动，水平只指定一个，取最大，同时为auto居中；垂直为0

简写: margin: x,x,x,x

注意: 兄弟之间的垂直的相邻外边距为两个的最大值，如果父元素的垂直外边距相邻了，子元素的外边距会设置给父元素

父子之间的垂直外边距相邻，子元素的外边距会设置给父元素，水平方向的外边距求和