CSS盒子模型

盒子有两种

1、块级：宽度总是占父级的全部宽度，高度由内容决定。可以自定义宽和高
2、内联级：高度是内容高度，宽度是内容宽度

 .box{
            width: 200px;
            height: 200px;
            border: 5px solid #232323;
            background-color: aqua;
            /* 裁切 */
            background-clip: content-box;
            margin: 20px;
            padding: 20px;
            /* 盒子计算方式，宽和高包含padding和border */
            box-sizing: border-box;
            /* 盒子计算方式，宽和高不包含padding和border */
            box-sizing: content-box;
            /* 简化方案：顺时针方向 */
            /* 上、右、下、左 */
            padding: 10px 20px 30px 40px;
            /* 上、左右、下 */
            padding: 10px 20px 30px;
            /* 上下、左右 */
            padding: 10px 20px;
        }