共计 884 个字符，预计需要花费 3 分钟才能阅读完成。
重要属性
写在后面：
上午始终在温习编译原理，还有两天考试了，明天又捡回了好多知识点，LR(1) 的瞻望符的求法、好几个易错的判断题等，下午还要接着看属性文法，和第一章的概念，概念了解就容易记住了，Continuing pursue。
盒子模型（Box Model）是将 CSS 设置款式的区域形象为一个个盒子，一个套着一个，这些盒子就是一个个矩形区域，通过扭转这些区域的款式，从而达到想要的成果。
| 属性 | 阐明 |
|---|---|
| Margin(外边距) | 革除边框外的区域，外边距是通明的。 |
| Border(边框) | 围绕在内边距和内容外的边框。 |
| Padding(内边距) | 革除内容四周的区域，内边距是通明的。 |
| Content(内容) | 盒子的内容，显示文本和图像。 |
应用示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 盒子模型演示 </title>
<style>
div {
background-color:cadetblue;
width: 200px;
border: 10px solid lightblue;
padding: 25px;
margin: 50px;
}
</style>
</head>
<body>
<p>CSS 盒模型实质上是几个封装四周的 HTML 元素，它包含：边距，边框，填充，和理论内容。</p>
<div> 这里是盒子内的理论内容。能够计算出这个盒子的总大小是：200+2*10+2*25+2*50=370</div>
</body>
</html> 实现成果：
阐明：
1、Content 区域是必备的，其余三个都是可选的，它有三个属性：width、height、overflow。当内容的区域装不下的时候设置 overflow 属性来指定溢出局部解决的形式。
2、Margin、Padding 都有 -top, -bottom, -left, -right 四个方向的属性，能够别离设置间隔，都能够应用像 border 一样的简写形式。
3、border 就是和我之前的博客写的 border 是一样的，有 -width, -style, -color 三个属性。
大家学习完之后肯定要保持敲完代码，不要间接复制粘贴。
正文完