第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;
}
显示效果如下：
最低0.47元/天 解锁文章
扫一扫
110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
