首页实验css盒子模型代码

实验css盒子模型代码

时间: 2024-09-19 10:08:44 浏览: 40

CSS盒子模型是指HTML元素在渲染时由内容区域（content）、内边距（padding）、边框（border）和外边距（margin）组成的四个部分。你可以通过编写一些简单的HTML和CSS来观察这个模型： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <style> .box { width: 200px; /* 宽度 */ height: 200px; /* 高度 */ border: 1px solid black; /* 边框 */ padding: 20px; /* 内边距 */ margin: 10px; /* 外边距 */ box-sizing: border-box; /* 指定盒模型 */ } .box-inner { background-color: yellow; /* 内容区域背景色 */ padding: 5px; /* 内部元素的内边距 */ } </style> </head> <body> <div class="box"> <div class="box-inner">这是内容区域</div> </div> </body> </html> ``` 在这个例子中，`.box` 元素设置了固定的宽度和高度，加上边框、内边距和外边距。`box-sizing: border-box;` 表示盒模型计算总宽度和高度时不包括边框和内边距，这意味着"200px x 200px"实际上是可视区域。内部的 `.box-inner` 有其自身的内边距，这不会影响到`.box` 的总尺寸。你可以打开这个HTML文件，查看并调整样式来实际感受CSS盒子模型的不同效果。

阅读全文