所有HTML元素都可以看作盒子，在CSS中盒子模型是用来设计和布局的，CSS盒子模型本质上是一个盒子，分装周围的HTML元素包括：外边距，边框，内边距和实际内容。
Margin（外边距）
清除边框外的区域，外边距是透明的。
Border（边框）
围绕在内边距和内容外的边框。
Padding（内边距）
清楚内容周围的区域。
Content（内容）
盒子的内容，显示文本图像。
如果把盒子模型看作是一个生活中的快递，那么内容部分等同于实物部分，内边距等同于盒子中的泡沫，边框等同于快递盒子，外边距等同于快递与快递之间的距离。
例：
首先添加内容
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="continer"></div>
</body>
添加内边距
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
padding: 50px 50px;/*第一个值表示上下内边距的大小，第二个值表示左右的大小*/
}
</style>
</head>
<body>
<div class="continer"></div>
</body>注：可以通过使用padding-left/right/top/bottom来实现单个边距的添加。
添加边框
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
padding: 50px 50px;/*第一个值表示上下内边距的大小，第二个值表示左右的大小*/
border: 5px solid black;/*第一个值表示边框的粗细，第二个值表示实线，第三个之为边框的颜色*/
}
</style>
</head>
<body>
<div class="continer"></div>
</body>
添加外边距
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
padding: 50px 50px;/*第一个值表示上下内边距的大小，第二个值表示左右的大小*/
border: 5px solid black;/*第一个值表示边框的粗细，第二个值表示实线，第三个之为边框的颜色*/
margin: 100px 100px;/*第一个值表示上下外边距的大小，第二个值表示左右边距的大小*/
}
</style>
</head>
<body>
<div class="continer"></div>
</body>
注： 可以使用margin-left/right/top/bottom来单个更改某一边距离。
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » CSS的盒子模型（Box Model)
发表评论 取消回复