HTML盒模型是一种用于描述元素在网页中布局和定位的概念。它将每个HTML元素包装在一个矩形的盒子中,这个盒子由内容区域、内边距、边框和外边距组成。在编写网页时,了解盒模型对于控制元素的尺寸、位置和样式都非常重要。
具体的盒模型示例可以通过以下代码进行演示:
<!DOCTYPE html> <html> <head> <style> .box { width: 200px; /* 设置盒子的宽度 */ height: 200px; /* 设置盒子的高度 */ padding: 20px; /* 设置内边距 */ border: 2px solid black; /* 设置边框 */ margin: 20px; /* 设置外边距 */ } </style> </head> <body> <div class="box"> This is a box. </div> </body> </html>