CSS盒模
- 游戏开发
- 2025-09-05 10:21:01
CSS盒模型就像一个快递包裹，网页上的每个元素都可以看成是这样一个包裹，它主要由以下几个部分组成：
内容（content）：就像包裹里真正装的东西，比如文字、图片等。在CSS里，可用width（宽度）和height（高度）来规定内容区的大小。例如，一个<div>元素里放了一些文字，这些文字所在的区域就是内容区。内边距（padding）：相当于包裹里物品和包裹内壁之间的那层缓冲材料，像泡沫、气泡垫等，让物品和包裹边缘有一定距离，防止物品受损。在CSS中，可以用padding-top（上内边距）、padding-right（右内边距）、padding-bottom（下内边距）、padding-left（左内边距）分别设置四个方向的内边距，也可以用padding属性一次性设置。边框（border）：类似于包裹的硬纸盒，把里面的东西和外面隔开。在CSS里，可以设置边框的width（宽度）、style（样式，如实线、虚线等）和color（颜色）。比如border: 1px solid black;就表示1像素宽的黑色实线边框。外边距（margin）：是包裹与包裹之间的空间，用于控制元素和其他元素之间的距离。同样有margin-top、margin-right、margin-bottom、margin-left和margin属性，作用和内边距类似。以下是一个简单的CSS盒模型代码示例及对应的效果展示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .box { width: 200px; height: 150px; padding: 20px; border: 5px solid blue; margin: 30px; background-color: lightgray; } </style> </head> <body> <div class="box">这是一个展示CSS盒模型的示例</div> </body> </html>在上述代码中，.box类定义了一个盒子，内容区宽200px、高150px，内边距为20px，边框是5px宽的蓝色实线，外边距为30px，背景色为浅灰色。
以下是一个CSS盒模型的示意图：
图中能楚地展示了内容、内边距、边框和外边距在盒模型中的位置和关系。
上一篇
跟着AI学习vue3第三章
