**box model**
边框 内容 内边距 外边距
**边框border**
宽度
border-width：1px；
颜色
border-color：red；
样式
border-style：solid；
（none 没有 solid 单实线 dashed 边框虚线 dotted 点线 double 双实线）
缩写
border：1px red solid
上下左右边框设置
border-top-color：red；（bottom left right）
border-top-width：10px；（bottom left right）
border-width：10px 20px 30px 40px （框大小是由顺时针设置 上 右 下 左）
**圆角边框**
border-radius：10px； （一个值 表示四个弧度都为10px）
border-radius：50%； （或者高宽一半 变成一个圆）
**内边距padding**
内容和盒子的宽度
div{padding：40px；} （全部设置距离px）
paddint-left：40px； （top right left bottom）
padding：10px 20px 30px 40px （上右下左）
**外边距margin**
盒子于盒子之间的距离
margin-top：10px；（与上面的边距 top （动自己） left（动自己） right （动别人） bottom （动别人））
margin:10px 20px 30px 40px ;(设置顺序为上 右 下 左)
margin:0 auto ; (盒子水平居中)
**盒子模型的尺寸组成**
宽：由
padding-left + border-left + 盒子本身的宽度 + padding-right + border-right
高：
padding-top + border+top + 盒子本身高度 + padding-bottom + border+bottom
box-sizing：content-box；（默认尺寸 就是上面宽高）
box-sizing：border-box； （等于设定尺寸 盒子不变换外形）
