CSS从入门到精通——盒模型 实验总用时：00
:17
:29 nav 第1关：透视盒模型：居中的的盒子页面 500 学习内容 参考答案 记录 评论 CSS盒模型 CSS盒模型 任务描述 相关
知识 盒模型 基础实例 内容区域 (Content Area) 内边距(
Padding) 边框(Border) 外边距(Margin) 任务要求 使用说明 任务描述 本关任务：在本关中，我们将学习如何使用CSS中重要的基础之一盒模型。本关任务完成之后的效果图(index.html)如下： 相关
知识 为了完成本关任务，请大家认真阅读以下内容。 盒模型 盒模型(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元素
本文介绍了一种利用百分比进行布局的方法，通过设置元素的宽度为100%，高度为0，并使用padding-top属性来撑开高度，从而实现响应式的布局效果。
扫一扫
521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
