盒子模型是啥

盒子模型

边距（margin），边框（border），填充（padding）和实际内容（content）

border

3个子属性：border-style、border-color、border-width

两种盒子模型类型

1.box-sizing:content-box(默认）

此时，元素的width=content的宽度
自己会膨胀

2.box-sizing:border-box

此时，元素的width=content的宽度+padding+border
自己不会膨胀，写死大小

拿到盒子模型，设置box-sizing:border-box

 div{
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid red;
background-color: antiquewhite;
box-sizing: border-box;
 }

**这一切跟margin没有关系
**行内元素，margin-top和margin-bottom无效
**行内元素，padding-top和padding-bottom显示有效果，但对周围元素没有影响
**外边距合并
当上下相邻两个块级元素相遇时，如果上元素有margin-bottom，下面的元素有margin-top，则他俩中间的垂直间距不是margin-top与margin-bottom之和，而是两者较大者。
解决办法：转化成行内块级元素即可，display：inline-block
建议先使用width>padding>margin