认识盒模型

最新推荐文章于 2024-09-07 08:14:00 发布

小豪boy

最新推荐文章于 2024-09-07 08:14:00 发布

阅读量95

点赞数

分类专栏： CSS3学习笔记文章标签： html html5 css

本文链接：https://blog.csdn.net/qq_34771938/article/details/119934975

版权

CSS3学习笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型”。
width、height不是盒子总宽高。
盒子的总宽度 = width + 左右padding + 左右border。

width属性

width属性表示盒子内容的宽度。
width属性表示盒子内容的宽度。width属性的单位通常是px，移动端开发也会涉及百分数、rem等单位。
当块级元素（div、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着width可以继承。

height属性

height属性表示盒子内容的高度。
height属性的单位通常是px，移动端开发也会涉及百分数、rem等单位。
盒子的height属性如果不设置，它将自动被其内容撑开，如果没有内容，则height默认是0。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 10px solid red;
        }
    </style>
</head>

<body>
    <!-- 盒模型 -->
    <div class="box1">
        你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！
    </div>
</body>

</html>

padding属性

padding是盒子的内边距，即盒子边框内壁到文字的距离。
padding是四个方向的，四个方向的padding，可以分别用小属性进行设置。

小属性	意义
padding-top	上padding
padding-right	右padding
padding-bottom	下padding
padding-left	左padding

padding的四数值写法

padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的padding。
padding: 10px 20px 30px 40px;

padding的三数值写法

padding属性如果用三个数值以空格隔开进行设置，分别表示上、左右、下的padding。
padding: 10px 20px 30px;

padding的二数值写法

padding属性如果用二个数值以空格隔开进行设置，分别表示上下、左右的padding。
padding: 10px 20px;

margin属性

margin是盒子的外边距，即盒子和其他盒子之间的距离。

margin也有四个方向。

小属性意义
margin-top 上margin，“向上踹”
margin-right 右margin，“向右踹”
margin-bottom 下margin，“向下踹”
margin-left 左margin，“向左踹”

一些元素（比如body、ul、p等）都有默认的margin，在开始制作网页的时候，要将他们清除。
/* 通配符选择器 表示选择所有元素 */
* {
    margin: 0;
    padding: 0;
}

/* 通配符有效率问题 应该使用并集选择器 */
body, ul, p {
    margin: 0;
    padding: 0;
}

小属性	意义
margin-top	上margin，“向上踹”
margin-right	右margin，“向右踹”
margin-bottom	下margin，“向下踹”
margin-left	左margin，“向左踹”

margin的塌陷

竖直方向的margin有塌陷现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准，但是左右margin依然是会叠加的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 10px solid red;
            margin-bottom: 30px;
        }

        .box2 {
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 10px solid green;
            margin-top: 40px;
        }
    </style>
</head>

<body>
    <!-- 盒模型 -->
    <div class="box1">
        你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！
    </div>
    <div class="box2">
        你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！
    </div>
</body>

</html>

盒子的水平居中

将盒子左右两边的margin都设置为auto，盒子将水平居中。
.box {
    /* 上下是0，左右自动 */
    margin: 0 auto;
}
文本居中是text-align: center; 和盒子水平居中是两个概念。
盒子的垂直居中，需要使用绝对定位技术实现。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 10px solid red;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <!-- 盒子水平居中 -->
    <div class="box1"></div>
</body>

</html>

box-sizing属性

将盒子添加了box-sizing: border-box; 之后，盒子的width 、height数字就表示盒子实际占有的宽高（不含margin）了，即padding、border变为“内缩”的，不再“外扩”。
box-sizing属性大量应用于移动网页制作中，因为它结合百分比布局、弹性布局等非常好用，在PC页面开发中使用较少。
box-sizing属性兼容到IE9。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        .box1 {
            box-sizing: border-box;
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 10px solid red;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <!-- 盒子水平居中 -->
    <div class="box1"></div>
</body>

</html>

小豪boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
认识盒模型

所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型”。 width、height不是盒子总宽高。盒子的总宽度 = width + 左右padding + 左右border。width属性width属性表示盒子内容的宽度。 width属性表示盒子内容的宽度。width属性的单位通常是px，移动端开发也会涉及百分数、rem等单位。当块级元素（div、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着w..
复制链接

扫一扫

专栏目录