盒模型的理解

在家防疫，逆战学习

一、盒模型的概念

　　在我们所见的html文档中，每一个元素都能形成一个盒子，而html可以说是有各个盒子组成的。所谓盒子，就是装东西的容器，

在没有任何内容和定义任何属性时，他的边框、大小都是不可见的。为了更好的理解盒子，我们给盒子添加属性。

二、盒子的属性

　　1、盒子的大小

　　盒子可以定义大小根据设定的width值和height值确定盒子的宽高，盒子的宽高也可以不用定义，直接用内容撑开。我们先定义两

个盒子，为了方便观察，我们给盒子加上背景颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box_r{
        width: 300px;
        height: 200px;
        background: red;
    }
    .box_p{
        background: pink;
    }
    </style>
</head>
<body>
    <div class="box_r"></div>
    <div class="box_p">这是一个用文字撑开的盒子</div>
</body>
</html>

　　红色的盒子添加了宽高，出现了大小，而粉色的盒子是被里面内容撑开

扫描二维码关注公众号，回复： 9335023 查看本文章

　　2、盒子的边框border

　　盒子的边框也是盒子的边界，边框也具备宽度(border-width)、类型(boder-style)、颜色(boder-color)，比如，定义一个盒子的边框，

我们想要他是5像素宽、实线、红色，我们可以这样写

div{
    width: 300px;
    height: 200px;
    background: red;
    border-width: 5px;
    border-style: solid;
    border-color:blue;
    }

　　或者直接简写为border:5px solid blue;效果是一样的。

　　盒子单独设置某个方向的边框，上：border-top，右:border-right,下：brder-bottom,左：border-left;对四个方向设置属性值可以简写

为border:10px 5px 15px 10px;分别按顺序对上右下左设置了不同的宽度值。

　　3、盒子的内填充padding

　　padding表示盒子内部内容到盒子边界的距离，它也占盒子内部的大小，它会将盒子的内容”挤“过去，同时，padding内的盒子背景不

受影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div{
        width: 300px;
        height: 150px;
        background: red;
        border:5px solid blue;
        padding: 10px;
    }
    </style>
</head>
<body>
    <div>
        这是一个有内填充的盒子
        这是一个有内填充的盒子
        这是一个有内填充的盒子
    </div>
</body>
</html>

　　效果如图，由图可见，此时的文字据盒子边界还有一定控件，这个空间就是内边距，而盒子内红色背景依旧填充整个盒子。padding

同border一样，也可以对四个方向上分别定义大小,即上（padding-top）右（padding-right）下（padding-boyyom）左（padding-left）或

直接添加四个方向属性值。　

　　而此时，盒子的大小有多少呢，首先我们给盒子定义了宽300px，而盒子两边各有5px边框，而padding撑开盒子，实在原基础上撑开

盒子，相当于将盒子左右拓宽了10px，综上，盒子的宽度为5+10+300+10+5=330px大小，同理，盒子的高度为5+10+150+10+5=180px。

　　4、盒子的外边距margin

　　margin表示盒子外部和其他元素的距离，通常都是盒子与盒子之间的距离，margin也可以在四个方向单独设置。我们定义两个盒子，

并设上margin值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box_l{
            width: 200px;
            height: 100px;
            background: red;
            margin-right: 20px;
            float: left;
        }
        .box_r{
            width: 200px;
            height: 100px;
            background: blue;
            background-left:30px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box_l"></div>
    <div class="box_r"></div>
</body>
</html>

　　在红色盒子和蓝色盒子右、左方向上分别添加margin值，在两个盒子间出现间距，这个间距的大小为20+30=50px；而如果上述两

个盒子取消浮动上下排列，如上方盒子添加margin-bottom=20px；下方盒子添加margin-top=30px;则两个盒子上下间距为30px，取二者

最大，而不是相加的50px。

三、盒模型的图解

　　盒子的基本属性有border、padding和margin，定义了宽高的盒子最终大小是由它内容的宽高加上边框（border）和内填充（padding）

决定，而margin值会让盒子增加与其他元素的间距。

https://i-beta.cnblogs.com/posts?cfg=512

猜你喜欢