第1关：透视盒模型：居中的的盒子页面
盒模型
盒模型(Box Model)，是CSS中重要的基础之一。
浏览器在对文档进行布局时，会根据CSS盒模型将所有元素，表示为一个矩形盒子(Box)。换句话说，每个元素都是一个盒子。
盒模型描述了元素所占空间的内容。每个盒子有四个边：外边距(Margin)、边框(Border)、内边距(Padding)和内容(Content)。
图片表示盒模型，如下：
基础实例
在本关中，我们使用如下HTML实例，进行讲解：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
<h1>盒模型</h1>
<div id="box1">盒子一宽度为200px，内间距为25px，外间距为20px、边框为25px。</div>
</body>
</html>
其中style.css文件初始内容为：
* {
margin: 0;
padding: 0;
}
#box1 {
background-color: whitesmoke;
}
显示效果如下：
内容区域 (Content Area)
内容区域包含盒子的内容，显示文本和图像。一般使用width和height指定大小。
例如，指定box元素内容宽度：
#box1 {
background-color: whitesmoke;
width: 200px;
}
显示效果如下：
内边距(Padding)
内边距(Padding) 是指内容周围的区域，内边距默认是透明的。如果内容区域设置了背景、颜色或者图片，这些样式将同样延伸应用到内边距上。
可以使用padding-top, padding-right, padding-bottom, padding-left，分别指定内容区域的上边、右边、下边和左边的内边距。
例如，指定box元素内边距：
#box1 {
background-color: whitesmoke;
width: 200px;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
}
显示效果如下：
为书写简洁，也可以使用padding简写内边距。内边距简写时指定的顺序为顺时针。如果四个边边距相同，只需要指定一个值。
例如，上面的例子可以简写为：
#box1 {
background-color: whitesmoke;
width: 200px;
padding: 20px 10px 15px 10px;
}
其中 20px 10px 15px 10px 依据顺时针方向，分别对应为 上、右、下和左内边距。
边框(Border)
边框(Border)是围绕在内边距和内容外的边框。使用border属性指定样式。其指定方式与我们在上一节表格样式中讲解相同，所以在此不再赘述。
例如，指定box元素边框：
#box1 {
background-color: whitesmoke;
width: 200px;
padding: 20px 10px 15px 10px;
border: 25px dotted yellowgreen;
}
显示效果如下：
外边距(Margin)
外边距(Margin) 是指边框外的区域，外边距默认也是透明的。
可以使用 margin-top, margin-right, margin-bottom, margin-left分别指定外边距区域的上边、右边、下边和左边的内边距。同样的，属性顺序为顺时针。
例如，指定box元素外边距：
#box1 {
background-color: whitesmoke;
width: 200px;
padding: 20px 10px 15px 10px;
border: 25px dotted yellowgreen;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
}
显示效果如下：
同样的，也可以使用简写属性 margin。同内边距一样，外边距简写时指定的顺序为顺时针。如果四个边边距相同，只需要指定一个值。
例如，上面的例子可以简写为：
#box1 {
background-color: whitesmoke;
width: 200px;
padding: 20px 10px 15px 10px;
border: 25px dotted yellowgreen;
margin: 20px; /*外边框四个边同时设置为20px*/
}
任务要求
学会了基本表格样式修改，现在让我们来实践一下吧。请在右侧的编辑框中修改style.css文件，完成index.html中元素样式。要求如下：
- 设置box2元素，宽度为350px；
- 使用简写内边距的方式设置box2的内边距为25px;
- 设置box2元素边框为20px粗的黄绿色yellowgreen实线(注：直接使用单词指定颜色)；
- 设置box2元素的外边距的下边距为10px；
- 使用简写内边距的方式设置body元素的内边距为20px。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="stylesheet" href="step1/CSS/style.css">
</head>
<body>
<h1>盒模型</h1>
<div id="box2">盒子二宽度为220px，内间距为30px，外间距为10px、边框为20px。</div>
</body>
</html>
style.css文件
* {
margin: 0;
padding: 0;
}
body {
/* ********** BEGIN ***********/
padding: 20px;
/* ********** END *************/
border: 10px solid lightsalmon;
}
h1 {
text-align: center;
}
#box2 {
/* ********** BEGIN ***********/
width: 350px;
padding: 25px;
border: 20px solid yellowgreen;
margin-bottom: 10px;
/* ********** END *************/
}
第2关：确定盒模型元素大小
确定元素大小
在 CSS 的默认盒子模型中，当我们指定一个CSS元素的高度与宽度时，只是指定了内容的宽度和高度。一个元素的大小，还包括其外边距、内边距和边框。通过box-sizing 属性可以更改计算元素宽度和高度的默认的 CSS 盒子模型。
box-sizing
box-sizing 属性值可以 设置为 content-box 或者 border-box。
/* 关键字 值 */
box-sizing: content-box;
box-sizing: border-box;
其分别含义如下：
content-box
如果设置 content-box 的 宽度为 width，高度为 height，元素实际布局占得宽度为 Width，高度为 Height。元素布局的实际大小，需要加上padding和border的大小。
所以，
元素布局所占宽度Width计算方法为：
Width = width + padding-left + padding-right + border-left + border-right
元素布局所占高度Height计算方法为:
Height = height + padding-top + padding-bottom + border-top + border-bottom
border-box
如何设置 border-box 的 宽度为 width，高度为 height，元素实际布局占得宽度为 Width，高度为 Height。元素布局的实际大小和 border-box 设置相同。
所以：
布局所占宽度 Width计算方法为：
Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度 Height计算方法为:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型——确定元素大小</title>
<style type="text/css">
.content-box {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid red;
background: yellow;
box-sizing: content-box;
/* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
Content box width: 160px
Content box height: 80px */
}
.border-box {
/***************** BEGIN *****************/
width:216px;
height:136px;
/***************** END *****************/
padding: 20px;
border: 8px solid red;
background: yellow;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>
</body>
</html>
