盒模型的常用属性讲解与元素大小的重新结算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: aqua;
            /* padding属性是盒子的内容区到padding的间距，在效果图中书背景颜色到边框线的那一部分空白 */
            padding: 10px;
            /* 设置盒子的边框，边框宽度为3px，实线，背景颜色为黑色 */
            border: 3px solid #666;
            /* 裁切背景颜色，因为背景颜色会自动从内容区扩散到padding，为了方便查看内容区大小，将内容区背景与padding裁切 */
            background-clip: content-box;
            /* position是定位属性,默认的值是static,如果随意添加一个值,static除外,那么这个元素就是定位元素 */
            /* position: relative;是相对定位,是根据元素本身的位置进行移动,并且不释放文档流中的空间 */
            position: relative;
            /* 根据原来的位置像右偏移50px */
            left: 60px;
        }
        .box-one {
            padding: 10px;
            width: 300px;
            height: 300px;
            background-color: blue;
            background-clip: content-box;
            border: 3px solid #666;
            /* margin指的是一个容器(可以理解为盒子)之间与另一个容器的间距，margin一共是有4个值，上右下左按照顺时针进行值的设定 */
            /* margin-top,margin-right,margin-bottom,margin-left这四个属性分别对应了与上右下左的间距 */
            margin: 10px;
            /* box-sizing重新计算盒子的大小,默认的值是content-box代表了计算到内容区,如果为默认值一旦设置的值添加了padding的话,那么整个盒子的真实大小将会改变.会破坏布局. */
            /* border-box是将盒子的宽高计算到边框,如果盒子宽高的值重新设定,那么整个内容区也会跟着变大变小,而盒子的大小不变. */
            box-sizing: border-box;
        }
        .box-tow {
            width: 150px;
            height: 120px;
            background-color: red;
            /* position: absolute;是相对定位,根据定位父元素来进移动,如无腹肌定位元素将默认body为定位父级 */
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-tow">
        </div>
    </div>
    <div class="box-one"></div>
</body>
</html>