1、盒子模型

设置盒子内容区的大小

• width 宽

• height 高

  border 边框

  要给一个元素设置边框，必须指定三个样式
  border-width:;
  分别设置

• 4个 上右下左

• 3个 上 左右 下
• 2个 上下 左右
• 1个 四边相同

规则通用
分开设置 空格隔开

**border-color:;**
**border-style:;** 边框样式
solid 实线
设置完边框宽度 盒子的宽高也会变化

2、简写

border : 10px red solid;
一指定 就是4个边 不能分开指定

可以 使用 border-top :; 来分开指定

盒子可见大小 内容区 内边距 边框 加到一起

3、内边距

padding-xxx: ;
简写 padding: 1px 2px 3px 4px;

会影响盒子可见框大小

内容区和边框的距离

4、外边距

margin-xxx:;
简写 margin: ;
盒子和其他盒子之间的距离

正值往右移动 负值往左移动

margin: 0 auto; 子元素在父元素中居中

4.1 垂直外边距的重叠

在网页中 垂直方向的相邻外边距会发生外边距的重叠

兄弟元素之间相邻外边距会取**最大值** 而不是取和
取最大值，并不是叠加
如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
设置父元素的padding 将子元素向下移动

5、分为4部分

1. 内容区
2. 内边距
3. 边框
4. 外边距