Box model

习题预习

1. 什么是Box model？
2. Box model由哪几个部分组成？
3. 如何使用Box model来修改元素的宽度和高度？
4. 如何使用Box model来添加边框和填充？
5. Box model的不同部分会如何影响元素的网页排版？

说明知识

Box model是CSS的概念，它针对每个HTML元素定义了一个盒子，包含了四个部分：内容(content)、填充(padding)、边框(border)和外边距(margin)。这个盒子规定了元素的大小和位置，在设计网页时非常有用。

举例来说，如果我们想要设计一个有红色边框的段落元素，可以使用以下的CSS代码：

p {
    border: 1px solid red;
    padding: 10px;
}

这个代码会把每个段落元素包装在一个盒子里，其中边框宽度为1px，颜色为红色。填充则是在内容和边框之间留下空白的区域，这里设置的填充为10px。如果我们在网页上使用这个代码，每个段落都会有一个红色的框框，并且在框框和段落内容之间留下10px的空白。

条列重点

1. Box model是CSS中一个非常重要的概念。
2. Box model将每个HTML元素视为一个"盒子"，该盒子由四种部分组成：内容(content)、填充(padding)、边框(border)、外边距(margin)。
3. 内容是盒子中文本、图像和任何内嵌元素的区域，填充是内容区域周围的区域，边框是填充周围的一条线条，外边距是边框周围的空间区域。
4. Box model可以用于控制元素的宽度、高度、内容位置、边框宽度、填充量和外边距空间等属性。
5. Box model也可以用于定位元素、创建多列布局和设置元素间的间距。
6. Box model是CSS布局和设计中不可或缺的基础知识。

知识测验

1. 如果一个元素的宽度设置为200px，内边距（padding）为10px，外边距（margin）为20px，那么该元素的实际宽度是多少？

答案：240px（200px + 210px + 220px）

2. 如果一个元素的高度设置为150px，内边距（padding）为15px，外边距（margin）为30px，那么该元素的实际高度是多少？

答案：210px（150px + 215px + 230px）

3. 如果一个元素的宽度设置为50%、内边距（padding）为5%、外边距（margin）为10%，并且其父元素的宽度为600px，那么该元素的实际宽度是多少？

答案：390px（600px * 0.5 - 2* 600px * 0.05 - 2*600px * 0.1）

4. 如果一个元素的外边距（margin）设置为20px，内容宽度为200px，内边距（padding）为15px，那么该元素的总宽度是多少？

答案：250px（200px + 215px + 220px）

5. 如果一个元素的高度设置为100px、外边距（margin）为10px、下边距（padding）为20px、那么该元素的实际高度是多少？

答案：130px（100px + 20px + 10px）