1.盒子模型（Box Model）
每一个盒子有内到外都由4部分组成：
1.内容区（content）,内容区相当于盒子的内部的空间，盒子中的所有的内容和子元素都在内容区中
width: 200px;
height: 200px;
background-color: #bfa;
2.边框（border）,边框是盒子的边缘，修改边框会影响到整个盒子的大小
border-width(边框的宽度)
border-color(边框的颜色)
border-style(边框的样式)
用border-width举例子,颜色跟样式一样:
如果只指定一个值，则四个方向都是该值 : border-width: 10px;
如果指定两个值 上下 左右 : border-width: 10px 20px;
如果同时指定四个值，则会分别设置 上 右 下 左 四个边框的宽度: border-width: 10px 20px 30px 40px;
如果指定三个值，则顺序是 上 左右 下 : border-width: 10px 20px 30px;
4个方向都有边框简写: border: red 10px solid ;
设置上左下有边框: border-top: 10px solid orange ;border-left: 10px solid orange ;border-bottom: 10px solid orange ;
另一种写法:
border: 10px solid orange;
border-right: none;
3.内边距（padding）,内容区和边框之间的距离是内边距，修改内边距会影响到盒子的大小
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距
例子:
padding-top: 100px;
padding-right: 100px ;
padding-bottom:100px ;
padding-left: 100px;
或者:padding: 10px 20px 30px 40px;
4.外边距（margin）,外边距指的是当前的盒子与其他的盒子的距离，外边距不会影响整个盒子的大小，但是会影响盒子的位置
margin-top
margin-right
margin-bottom
margin-left
例子:
margin: 100px 200px 300px 400px;
注意:
1.外边距可以设置为一个负值，如果margin值为负数时，元素会向相反的方向移动
2.margin还可以设置为auto,当将左右外边距同时设置为auto时，浏览器会将元素的左右外边距设置为相等的值
此时当前元素将会在它的父元素中水平居中，所以我们常常将水平外边距设置为auto来设置水平居中
/*使元素在父元素中水平居中*/
margin: 0 auto;
盒子的可见框的大小由内容区、内边距和边框共同决定
2.外边距的重叠
- 相邻的垂直外边距会发生外边距重叠的现象，
- 兄弟元素的重叠外边距会取最大值
- 子元素的外边距会传递给父元素
水平方向的相邻外边距不会发生重叠，而是求和
.box3{
width: 300px;
height: 200px;
background-color: skyblue;
padding-top: 100px;
}
.box4{
width: 100px;
height: 100px;
background-color: red;
}
<div class="box3">
<div class="box4"></div>
</div>
3.内联元素的盒子模型
- 内联元素的盒模型和块元素的盒模型有一些区别
1.内联元素不能设置width和height
2.内联元素支持水平内边距。可以设置垂直内边距但是不会影响布局
3.内联元素支持水平方向的边框。可以设置垂直方向的边框，但是不会影响布局
4.内联元素支持水平方向的外边距，不支持垂直方向的外边距
原文：https://www.cnblogs.com/liuyi13535496566/p/11894918.html