6. 盒模型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            #div1{
                /*内容区的宽度和高度*/
                width: 300px;
                height: 300px;
                background-color: yellow;

                /*设置边框*/
                border-width: 50px;
                border-color: red;
                border-style: solid;

                /*设置内边距*/
                padding: 50px 100px 50px 100px;
            }

            #div2{
                width: 300px;
                height: 300px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2"></div>
        </div>
    </body>
</html>

这里写图片描述

整个盒子的尺寸 = 内容区的尺寸 + 2*内边距 + 2*边框

猜你喜欢

转载自blog.csdn.net/u010502101/article/details/81048549
今日推荐