CSS盒模型简述

CSS 盒模型规定了元素框处理元素内容、内填充、边框 和 外边距 的方式。

元素框的最内部为内容（content），包围内容的是内填（padding）。内填充呈现了元素的填充区域。内填充的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
内填充、边框和外边距都是可选的，默认值是零，但是，许多元素都默认自带了内填充和外边距我们可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式,这可以分别进行，也可以使用通配选择器对所有元素进行设置：
例如
*{margin:0;padding:0;}

在 CSS 盒模型中，width （宽）和 height（高） 指的是内容“区域”的宽度和高度。增加内填充、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
假设框的每个边上有 10 个像素的外边距和 5 个像素的内填充。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素
例如

          <style>
			.box{width: 70px;
			   height: 70px;
			   margin: 10px;
			   padding: 5px;
			   background: red;}
		 </style>
		<div class="box"></div>

内填充：元素的内填充在边框和内容区之间， padding 属性定义元素边框与元素内容之间的空白区域。
边框：元素的边框 是围绕元素内容和内填充的一条或多条线，border 属性用来设置元素边框的样式、宽度和颜色。
外边距：围绕在元素边框外的空白区域是外边距。设置外边距会在元素外创建多余的空白区域。设置外边距的最简单的方法就是使用 margin 属性。
内填充、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
一个值：（上 下 左 右）
两个值：（上下）（左右）
三个值：（上）（左右）（下）
四个值：（上）（右）（下）（左）
四个值呈顺时针方向
外边距可以是负值，而且在很多情况下都要使用负值。
让元素垂直居中
{margin:0 auto}

来源：CSDN

作者：Tienray

链接：https://blog.csdn.net/Tienray/article/details/104464471