盒模型的实际尺寸

Devops海洋的渔夫

发布于 2019-05-31 16:20:11

5030

发布于 2019-05-31 16:20:11

文章被收录于专栏：Devops专栏Devops专栏

仅供学习，转载请注明出处

需求

使用HTML编写三个div，用来逐步分析拆解相关盒子模型的大小变化。

首先绘画三个div，设置大小50px，背景色为gold

<!DOCTYPE html>
<html>
<head>
    <title>盒子的真实尺寸</title>
    <meta charset="utf-8">
    <style type="text/css">
        .box01{width:50px;height: 50px;background-color: gold;}
        .box02{width:50px;height: 50px;background-color: gold;}
        .box03{width:50px;height: 50px;background-color: gold;}
    </style>
</head>
<body>
    <div class="box01">1</div><br>
    <div class="box02">2</div><br>
    <div class="box03">3</div><br>
</body>
</html>

浏览器展示如下：

好了，从上图来看，已经绘画除了三个正方形了。下面继续看看增加一下边框border看看。

给2和3的正方形增加黑色边框，宽度为50px

border: 50px solid #000;

<!DOCTYPE html>
<html>
<head>
    <title>盒子的真实尺寸</title>
    <meta charset="utf-8">
    <style type="text/css">
        .box01{width:50px;height: 50px;background-color: gold;}
        .box02{width:50px;height: 50px;background-color: gold;border: 50px solid #000;}
        .box03{width:50px;height: 50px;background-color: gold;border: 50px solid #000;}
    </style>
</head>
<body>
    <div class="box01">1</div><br>
    <div class="box02">2</div><br>
    <div class="box03">3</div><br>
</body>
</html>

浏览器展示效果如下：

好了，此时已经2和3已经有了边框了。

下面来看看盒子模型的理解图：

下面继续可以给正方形3增加内边距padding，来看看效果。

给正方形3增加内边距50px

padding: 50px

<!DOCTYPE html>
<html>
<head>
    <title>盒子的真实尺寸</title>
    <meta charset="utf-8">
    <style type="text/css">
        .box01{width:50px;height: 50px;background-color: gold;}
        .box02{width:50px;height: 50px;background-color: gold;border: 50px solid #000;}
        .box03{width:50px;height: 50px;background-color: gold;border: 50px solid #000;padding: 50px}
    </style>
</head>
<body>
    <div class="box01">1</div><br>
    <div class="box02">2</div><br>
    <div class="box03">3</div><br>
</body>
</html>

浏览器展示如下：

通过上面的页面得出结论：盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高，盒子的真实尺寸计算公式如下：

盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

练习

通过盒子模型的原理，制作下面的盒子：

实现代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        .box{
            width:400px;
            height: 54px;
            background-color: gold;
            border-top: 1px solid #f00;
            border-bottom: 3px solid #666}
        .box span{    
            font-size: 20px;
            font-family: "Microsoft YaHei";
            line-height: 54px;
            padding-left: 150px;
        }
    </style>
</head>
<body>
    <div class="box"><span>新闻列表</span></div><br>
</body>
</html>

浏览器展示如下：