盒模型
css盒子模型指“box model”，其本质上是一个盒子，封装周围的HTML元素，它包括边距、边框、填充和实际内容；所有HTML元素可以看作盒子，并且盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。
"box model"这一术语是用来设计和布局时使用。
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
原理
盒模型的属性:内容(content)、内边距(padding)、边框(border)、外边距(margin)。
这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。
特点
想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；
让我们俯视这个盒子，它有上下左右四条边，所以每个属性除了内容（content），都包括四个部分：上下左右；这四部分可同时设置，也可分别设置；内边距可以理解为盒子里装的东西和边框的距离，而边框有厚薄和颜色之分，内容就是盒子中间装的东西，外边距就是边框外面自动留出的一段空白。
结构
内容（CONTENT）就是盒子里装的东西；
而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；
边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。
填充只有宽度属性，每个HTML标记都可看作一个盒子。
<!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: red;border-top-style: solid*/;
border: 5px solid red;
/*solid实线
double双实线
dotted点实线
dashed线段虚线*/
border-radius: 50%;}
#div2{width: 100px;height: 100px;background: lightgreen;
/*margin-left: 50px;
margin-top: 50px;*/
/*margin: 50px 0 0 50px;
上，右，下，左
margin: 10px 20px 30px;
上，左右，下
margin: 10px 20px;
上下，左右
margin: 10px;
四个方向*/
margin: 50px auto 0;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
<span>123456</span>
</div>
</body>
</html>
浙公网安备 33010602011771号