1. 盒模型
1）内容区 content
特点：
- 内容区的大小由width和height决定
- 内容区是文字，图片等的显示区域
2）内填充 padding/padding-方向
值的设置：
padding: 10px; 一个值， 设置四周
padding: 10px 20px; 两个值， 上下 左右
padding: 10px 20px 30px; 三个值， 上 左右 下
padding: 10px 20px 30px 40px; 四个值， 顺时针 上右下左
特点：（四点）
- padding会撑大盒子。如果不想撑大，要在原来的宽高基础上减去对应方向的padding值
- 背景图和背景色可以在padding区域显示
- padding 不可以设置负数
padding可以用来调整内容和盒子边缘之间的距离
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 100px; height: 100px; margin: auto; background-color: pink; padding: 20px; } </style> </head> <body> <div class='box'>盒子</div> </body> </html>结果：
3) 外边距 border/border-方向
4) 外边距 margin/margin-方向
- margin 值的设置和padding值设置一样 margin/margin-方向
- 单方向margin-方向（left/right/top/bottom）: 数值+px
特点：（四点）
- margin不会撑大盒子，但是会影响别人
- margin区域不会显示背景图/背景色
- margin可以设置负数， 负数会让两个盒子重叠在一起
- margin可以用来调整盒子和盒子之间的距离
margin 的两个bug
（1）margin的重叠
- 给上面的元素添加下边距，给下面的元素添加上边距之后，会产生margin的重叠，且值取最大值。
左右不会重叠，会相加。
- 给上面的元素添加下边距，给下面的元素添加上边距之后，会产生margin的重叠，且值取最大值。
（2）margin的传递（当给元素的 第一个子元素 添加 margin-top 的时候，会错误的加在父元素身上）
解决方法：
- 用padding设置
- 给父元素加边框
- 给父元素添加overflow: hidden(溢出隐藏)
- 给父元素或者该元素添加浮动
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。