在 CSS 盒子模型 规定了元素处理元素的几种方式：. width和height： 内容 的宽度、高度（不是盒子的宽度、高度）。.padding：内边距。. border：边框。. margin：外边距。在 标准盒子模型 中， width 和 height 指的是内容区域 的宽度和高度。 增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
盒模型的宽和高：margin+padding+border+width/height，如果
box-sizing:设置为border-box，则元素的width和height决定了盒模型宽高。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。即：content-width=padding+border+content-width.应用范围：适用于块级元素和inline-block元素，而行内元素虽然在水平方向可以设置margin和padding，且垂直方向能用padding，但是不属于盒模型的概念，如果要应用，则需要借助CSS的display属性。
外边距合并：当相邻的两个盒模型上下紧邻的时候，会选择margin值较大的作为外边距，即合并两个外边距取大值。而左右外边距不合并。
margin: 50px 0 0 50px;上右下左
margin：10px 20px 30px;上，左右，下
margin: 10px 20px ;上下，左右;
margin: 10px;四个方向
左右居中: margin-left: auto;margin-top: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#div1{
width: 500px;height: 500px;background: lightblue;overflow: hidden;
/* border-top-width:5px ;
border-top-color: blue;
border-top-style: solid;*/
border: orange 5px solid;/*solid：实线；double：双实线；dotted：点虚线；dashed：线段虚线；*/
border-radius: 50%;/*radius：圆角*/
/*border-top-left-radius: 20px;上下先于左右*/
}
#div2{
width: 100px;height: 100px;background: pink;
margin: 50px auto 0;/*左右居中*/
/*margin-bottom: 20px;*/
/*margin: 50px 0 0 50px;上右下左*/
/*margin：10px 20px 30px;上，左右，下*/
/*margin: 10px 20px ;上下，左右;*/
/*margin: 10px;四个方向*/
/*左右居中: margin-left: auto;margin-top: 0;
margin: 50px auto 0;
*/
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
<span>李</span>
</div>
</body>
</html>