css盒子模型应用完整代码
时间: 2024-09-30 07:12:30 浏览: 35
css盒子模型图解
5星 · 资源好评率100%
CSS盒子模型是指HTML元素在页面上占据空间的方式,它由四个部分组成:内容(content)、内边距(padding)、边框(border)和外边距(margin)。下面是一个简单的例子,展示如何在HTML中创建一个div,并应用基本的盒模型:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
.box {
/* 设置宽高 */
width: 200px;
height: 200px;
/* 内容区 */
background-color: lightblue;
/* 边框 */
border: 2px solid black;
/* 内边距 */
padding: 20px;
/* 外边距 */
margin: 40px;
}
</style>
</head>
<body>
<div class="box">这是一个有盒模型的div</div>
</body>
</html>
```
在这个例子中,`.box`的宽度和高度被设置为200px,内部内容区域占据了实际尺寸减去20px的内边距(总共160px),然后围绕着这个区域的是2px的黑色实线边框,最后加上了40px的外边距。这将导致整个div在页面上的位置比直接指定的宽高大。
阅读全文