请注意，本文编写于 166 天前，最后修改于 120 天前，其中某些信息可能已经过时。
目录
CSS 盒子模型(Box Model)
一、盒子模型简介
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
CSS盒子模型是网页布局的基础，描述了元素在页面上的排列方式。一个盒子由以下四个部分组成：
- Content(内容)：盒子的核心部分，包括文本、图片或其他媒体元素。
- Padding(内边距)：位于内容和边框之间的区域，用于增加盒子内部的空白区域。
- Border(边框)：盒子的轮廓，可以设置颜色、宽度和样式。
- Margin(外边距)：位于盒子与其他元素之间的区域，用于设置盒子之间的间隔。
二、盒子模型的组成部分
（1）内容（Content）
- 作用：利用
width和height属性设置内容区域的大小，默认是和字内容区域的大小。 - 取值：数字+px。
（2）内边距（Padding）
- 属性值：
padding - 取值：数值+px。
- 复合属性：可以给单独的方向设置内边距（最多取四个值，上下左右）。
（3）边框（Border）
- 属性名：
border（复合属性） - 属性值：数字+px 线条的种类 颜色（不分先后顺序）。
- 细分属性：
border-widthborder-styleborder-color
- 复合写法：
border: 50px double aqua; - 圆角效果：
border-radius: 5%; - 阴影效果：
box-shadow: 10px 10px 10px rgb;
（4）外边距（Margin）
- 属性名：
margin - 属性值：数值+px。
- 自适应居中：
margin: auto;
三、盒子模型的类型
1.标准盒模型（W3C盒模型）
- 特点：
width和height属性仅包括内容的尺寸，不包括内边距、边框和外边距。
2.IE盒模型（怪异盒模型）
- 特点：
width和height属性包括内容的尺寸、内边距和边框，不包括外边距。 - 转换：通过
box-sizing: border-box使用IE盒模型。
3.弹性盒子模型（Flexbox）
- 组成：由弹性容器（flex container）和弹性子项（flex items）组成。
- 创建弹性容器：
display: flex; - 排列方向：
flex-direction: row | column; - 换行方式：
flex-wrap: nowrap | wrap; - 对齐方式：
- 水平对齐：
justify-content: flex-start | flex-end | center | space-between | space-around; - 垂直对齐：
align-items: flex-start | flex-end | center | baseline | stretch;
- 水平对齐：
四、盒子模型的布局应用
- 浮动布局：通过设置元素的
float属性，实现元素的水平排列。 - 定位布局：通过设置元素的
position属性，实现元素的定位。 - Flex布局：通过设置
display属性为flex，实现垂直和水平方向上的布局。
五、盒子模型的注意事项
- 默认宽度：标准盒模型中盒子的默认宽度为auto，IE盒模型中为内容的宽度加上内边距和边框的宽度。
- 层叠顺序：了解盒子模型的层叠顺序，可以更好地控制元素的显示效果。
- 兼容性：不同浏览器对盒子模型的支持程度有所差异，需要注意浏览器的兼容性问题。
六、示例代码
内容区域设置
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
div {
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div>这里是内容</div>
</body>
</html>
内边距设置
html<style>
div {
padding: 50px;
}
</style>
边框设置
html<style>
.A {
width: 250px;
height: 300px;
background-color: aquamarine;
border: 10px double aqua;
border-radius: 50px;
box-shadow: 10px 10px 10px grey;
}
</style>
外边距设置
html<style>
div {
margin: 20px;
}
</style>
弹性盒子模型示例
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: #f0f0f0;
}
.flex-item {
padding: 20px;
border: 1px solid #333;
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">这是一个弹性子项</div>
<div class="flex-item" style="width: 200px;">另一个弹性子项</div>
</div>
</body>
</html>
这个总结涵盖了CSS盒子模型的基本概念、组成部分、类型、布局应用以及注意事项，并提供了一些示例代码。
本文作者:空白格
本文链接:
版权声明:本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
目录