第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>
