CSS(层叠样式表)盒子模型是网页设计中一个重要的概念,它描述了HTML元素如何被渲染,并影响元素的布局和尺寸。在CSS中,每个元素都被视为一个矩形盒子
这个盒子由以下几个部分组成:
1. **内容(Content)**:盒子的中心,显示元素的实际内容,如文本、图片等。内容的尺寸可以通过`width`和`height`属性来指定。
代码演示为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
width: 200px;
}
</style>
</head>
<body>
<div>这是一个div</div>
</body>
</html>
页面检查效果演示为:
2. **内边距(Padding)**:内容与边框之间的空间。可以通过`padding-top`、`padding-right`、`padding-bottom`、`padding-left`单独设置,或者使用`padding`简写属性一次性设置。
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 60px;
background-color: blue;
border: 5px solid #000;
padding: 10px;
}
</style>
</head>
<body>
<div>这是一个div</div>
</body>
</html>
页面检查效果演示:
3. **边框(Border)**:围绕内容和内边距的线条。边框的样式、宽度和颜色可以通过`border`相关的属性来设置,例如`border-width`、`border-style`和`border-color`。
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 120px;
border: 10px solid red;
}
</style>
</head>
<body>
<div>这是一个div</div>
</body>
</html>
页面检查效果演示:
4. **外边距(Margin)**:边框外的空白区域,用来分隔元素与相邻元素或容器的距离。外边距可以通过`margin-top`、`margin-right`、`margin-bottom`、`margin-left`单独设置,或者使用`margin`简写属性一次性设置。
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 60px;
background-color: blue;
}
.one{
margin-bottom: 20px;
}
.two{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="one">这是一个div</div>
<div class="two">这是一个div</div>
</body>
</html>
页面检查效果演示:(选中第二个div外边距在top边距为20px)