《HTML+CSS+JavaScript》之第21章盒子模型

21.1 CSS盒子模型

所有元素都可以看成一个盒子，占据一定的页面空间。
盒子模型组成：

内容区
中心，主要信息内容，文本、图片等多种类型，必要组成部分，其他3部分可选。
内容区3个属性：width、height和overflow。内容过多，超出width和height时，overflow指定溢出处理方式。
内边距
内容区和边框之间的空间，内容区的背景区域。
内边距5个属性：padding-top、padding-bottom、padding-left、padding-right和padding。
外边距
外边距从边框往外开始计算。
两个盒子之间的距离，父子元素或兄弟元素。
外边距5个属性：margin-top、margin-bottom、margin-left、margin-right和margin。
外边距为负值时，盒子向指定负值的相反方向移动，产生重叠效果。
边框
边框从内边距开始往外计算。
边框4个属性：border-width、border-style、border-color和border。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            display:inline-block;   /*将块元素转换为inline-block元素*/
            padding:20px;
            margin:40px;
            border:2px solid red;
            background-color:#FFDEAD;
        }
    </style>
</head>
<body>
    <div>绿叶学习网</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

21.2 width、height

宽高针对内容区而言。

width:像素值;
height:像素值;
1
2

块元素才能设置width和height，行内元素无法设置width和height。（忽略inline-block元素）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div,span
        {
            width:100px;
            height:50px;
        }
        div{border:1px solid red;} /*块元素*/
        span{border:1px solid blue;}/*行内元素*/
    </style>
</head>
<body>
    <div></div>
    <span></span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

块元素设置宽高

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #div1
        {
            width:100px;//不设置width时，块元素width为浏览器宽度
            height:40px;//不设置height时，块元素height为实际内容高度
            border:1px solid red;
        }
        #div2
        {
            width:100px;
            height:80px;
            border:1px solid blue;
        }
    </style>
</head>
<body>
    <div id="div1">绿叶学习网</div>
    <div id="div2">绿叶学习网</div>
</body>
</html>
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

行内元素设置宽高

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #span1
        {
            width:100px;//行内元素宽高无效，有内容区实际内容决定宽高
            height:40px;//display属性可实现块元素和行内元素的互相转换
            border:1px solid red;
        }
        #span2
        {
            width:100px;
            height:80px;
            border:1px solid blue;
        }
    </style>
</head>
<body>
    <span id="span1">绿叶学习网</span>
    <span id="span2">绿叶学习网</span>
</body>
</html>
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

21.3 边框

border:1px solid red;
1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:100px;
            height:80px;
            border: 2px dashed red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

21.4 内边距

补白，内容区到边框的部分。

21.4.1 padding局部样式

padding-top:像素值;
padding-bottom:像素值;
padding-left:像素值;
padding-right:像素值;
1
2
3
4

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            display:inline-block;   /*将块元素转换为inline-block元素*/
            padding-top:20px;
            padding-right:40px;
            padding-bottom:60px;
            padding-left:80px;
            border:2px solid red;
            background-color:#FFDEAD;
        }
    </style>
</head>
<body>
    <div>绿叶学习网</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

21.4.2 padding简写形式

padding:像素值;
padding:像素值1 像素值2;
padding:像素值1 像素值2 像素值3 像素值4;
1
2
3

top、right、bottom、left顺序

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            display:inline-block;   /*将块元素转换为inline-block元素*/
            padding:40px 80px;
            margin:40px;
            border:2px solid red;
            background-color:#FFDEAD;
        }
    </style>
</head>
<body>
    <div>绿叶学习网</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

21.5 外边距

父元素或兄弟元素之间部分，外边距在边框外部。

21.5.1 margin局部样式

margin-top:像素值;
margin-bottom:像素值;
margin-left:像素值;
margin-right:像素值;
1
2
3
4

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            display:inline-block;   /*将块元素转换为inline-block元素*/
            padding:20px;
            margin-top:20px;
            margin-right:40px;
            margin-bottom:60px;
            margin-left:80px;
            border:1px solid red;
            background-color:#FFDEAD;
        }
    </style>
</head>
<body>
    <div>绿叶学习网</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

只有父元素，无兄弟元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #father
        {
            display: inline-block;      /*将块元素转换为inline-block元素*/
            border:60px solid blue;
        }
        #son
        {
            display:inline-block;       /*将块元素转换为inline-block元素*/
            padding:20px;
            margin-top:20px;/*外边距相对父元素边框内侧距离*/
            margin-right:40px;
            margin-bottom:60px;
            margin-left:80px;
            border:1px solid red;
            background-color:#FFDEAD;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son">绿叶学习网</div>
    </div>
</body>
</html>
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

有父元素和兄弟元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #father
        {
            display: inline-block;      /*将块元素转换为inline-block元素*/
            border:60px solid blue;
        }
        #son
        {
            display:inline-block;       /*将块元素转换为inline-block元素*/
            padding:20px;
            margin-top:20px;/*查看元素四个方向*/
            margin-right:40px;/*某个方向有兄弟元素，margin相对兄弟元素边框外侧而言*/
            margin-bottom:60px;/*某个方向无兄弟元素，margin相对父元素边框内侧而言*/
            margin-left:80px;
            border:1px solid red;
            background-color:#FFDEAD;
        }
        .brother
        {
            height:50px;
            border:30px solid red;
            background-color:lightskyblue;
        }
    </style>
</head>
<body>
    <div id="father">
        <div class="brother"></div>
        <div id="son">绿叶学习网</div>
        <div class="brother"></div>
    </div>
</body>
</html>
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
32
33
34
35
36
37
38

21.5.2 margin简写形式

margin:像素值;
margin:像素值1 像素值2;
margin:像素值1 像素值2 像素值3 像素值4;
1
2
3

top、right、bottom、left顺序

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            display:inline-block;   /*将块元素转换为inline-block元素*/
            padding:20px;
            margin:40px 80px;
            border:1px solid red;
            background-color:#FFDEAD;
        }
    </style>
</head>
<body>
    <div>绿叶学习网</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

21.5.2 浏览器审查元素

鼠标右击元素，选择“检查”，弹出控制台找到元素的盒子模型。

相关阅读:
自然语言处理概念笔记
 Python + Django4 搭建个人博客（十二）:实现删除文章功能页面
 Android——Glide的多样使用
 四阶龙格库塔与元胞自动机
 Flink+Flink CDC版本升级的依赖问题总结
 万字长文概述单目3D目标检测算法
 JS-语法-变量（声明、命名规范、一次性声明多个变量、使用）
shell脚本之求和运算
 Springioc注释使用
 【flask扩展】Flask-Migrate的使用
原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125631562

《HTML+CSS+JavaScript》之第21章 盒子模型

《HTML+CSS+JavaScript》之第21章 盒子模型

21.1 CSS盒子模型

21.2 width、height

21.3 边框

21.4 内边距

21.4.1 padding局部样式

21.4.2 padding简写形式

21.5 外边距

21.5.1 margin局部样式

21.5.2 margin简写形式

21.5.2 浏览器审查元素

《HTML+CSS+JavaScript》之第21章盒子模型

《HTML+CSS+JavaScript》之第21章盒子模型