只是其实是那样的澳门永利备用网址

     平时大家设置成分的宽和高样式日常会产出一些主题材料,举个例子以下css的安装:

譬喻以下的代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
        }

        .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

    <div class="div1">这个是个较小的框 (width 为 300px ,height 为 100px)。</div>
    <br>
    <div class="div2">这个是个较大的框 (width 为 300px ,height 为 100px)。</div>

</body>
</html>

其实大家意在的结果恐怕是这么:

澳门永利备用网址 1

 

唯独事实上是那般的:

澳门永利备用网址 2

因为大家实际的幅度和可观是如此总结出来的:

width(宽) + padding(内边距) + border(边框) = 成分实际增长幅度

height(高) + padding(内边距) + border(边框) = 成分实际中度

 假设想要猎取理想的效率能够针对各样div增多样式 
box-sizing:border-box,那样width和height的值也就

包括border和padding的值了,即:

 

澳门永利备用网址 3