css盒子模型

CSS 盒子模型

基本概念

  • 盒子模型是 CSS 中非常重要的知识点。
  • 页面中的每一个元素都可以看成一个盒子。
  • 一个盒子通常由 content、padding、border 和 margin 组成。

盒子模型的四部分

1. 内容 content

  • 内容区域是盒子里真正显示内容的部分。
  • 比如文本、图片等都属于内容区域。

2. 内边距 padding

  • padding 是内容和边框之间的空间。
  • 用来控制内容与边框的距离。
1
padding: 50px;

3. 边框 border

  • border 位于内边距外侧，是盒子的边界。
  • 可以设置边框粗细、样式和颜色。
1
border: 2px solid yellowgreen;

4. 外边距 margin

  • margin 位于边框外侧。
  • 用于控制盒子与其他元素之间的距离。
1
margin: 40px;

相关属性示例

width 和 height

  • width 设置内容宽度。
  • height 设置内容高度。
1
2
width: 200px;
height: 100px;

border-style

  • 用于设置边框样式。
  • 可以分别设置上、右、下、左四个方向。
1
border-style: solid dashed dotted double;

border-width

  • 用于设置边框宽度。
1
border-width: 10px 20px 20px 40px;

border-color

  • 用于设置边框颜色。
1
border-color: red green blue yellow;

课堂完整示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS盒子模型</title>
    <style>
        .demo{
            background-color: lightblue;
            display: inline-block;
            border: 2px solid yellowgreen;
            padding: 50px;
            margin: 40px;
        }
        .border-demo{
            background-color: lightcoral;
            border: 5px dashed red;
            width: 200px;
            height: 100px;
            border-style: solid dashed dotted double;
            border-width: 10px 20px 20px 40px;
            border-color: red green blue yellow;
            /* border-left: 5px solid red; */
        }
    </style>
</head>
<body>
    <div class="demo">码上归舟</div>
    <div class="border-demo">这是一个边框示例</div>
</body>
</html>

知识点总结

  • 盒子模型由 content、padding、border 和 margin 组成。
  • padding 控制内容和边框的距离。
  • border 控制盒子的边界样式。
  • margin 控制元素与元素之间的间距。
  • width 和 height 通常描述内容区域的尺寸。

复习表达

CSS 盒子模型是前端布局中的基础概念，一个元素通常由内容区、内边距、边框和外边距组成。padding 控制内容与边框之间的距离，border 表示元素边界，margin 控制元素和其他元素之间的间距。在实际开发中，盒子模型会直接影响元素尺寸和页面布局效果。