盒子的大小及属性

内边距及边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子大小</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        :root{
            /* 设置网页根节点字号像素 */
            font-size: 20px;
        }
        .box{
            /* 盒宽 */
            width: 20em;
            /* 盒高 */
            height: 15em;
            /* 背景色 */
            background-color: pink;
        }
        .box{
            /* padding内边距 */
            padding: 1em;
            /* border边框线 solid实线 green边框线颜色绿色*/
            border: 2px solid green;
            /* 背景只裁切到内容区 让padding不被盒子内容覆盖*/
            background-clip: content-box;
        }
        /* 使盒子大小不受宽高以外的因素影响 */
        /* box-sizing 是否计算盒子padding和border的属性*/
        .box{
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子大小</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        :root{
            /* 设置网页根节点字号像素 */
            font-size: 12px;
        }
        .box{
            /* 盒宽 */
            width: 10em;
            /* 盒高 */
            height: 10em;
            /* 背景色 */
            background-color: yellow;
        }
        .box{
            /* padding内边距 */
            padding: 1em;
            /* border边框线 solid实线 green边框线颜色绿色*/
            border: 2px solid red;
            /* 背景只裁切到内容区 让padding不被盒子内容覆盖*/
            background-clip: content-box;
        }
        /* 使盒子大小不受宽高以外的因素影响 */
        /* box-sizing 是否计算盒子padding和border的属性*/
        .box{
            box-sizing: border-box;
        }
        /* 水平方向margin累加；垂直方向margin折叠，margin大的覆盖margin小的  */
        .box:first-of-type{
            margin: 2em;
        }
        .box:last-of-type{
            margin: 3em;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

**总结：

padding是用来设置盒子的内边距，用来撑开盒子边框与内容的区域；
border是用来设置盒子的边框线，可以通过宽度、线的类型、颜色来控制边框；
盒子最终的宽高默认是通过设置的盒子宽高+盒子的内边距+边框宽度来计算的，box-sizing: border-box;的设置，通过压缩盒子的宽高，将内边距和边框线计算在内，不会撑开原有盒子的宽高
水平方向margin累加；垂直方向margin折叠，margin大的覆盖margin小的**

元素对齐方式

行内元素的水平且垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平且垂直居中</title>
    <style>
        /* 行内元素的水平且垂直居中 */
        .box{
            width: 15em;
            height: 15em;
            border: 1px solid #000;
            box-sizing: border-box;
        }
        .box{
             /* 文本水平居中 */
            text-align: center;
            line-height: 15em;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>PHP中文网</span>
    </div>
</body>
</html>

总结：通过text-align可设置行内元素内容水平居中，通过line-height设置成与父元素div相同高度即可实现垂直居中

块级元素的水平且垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平且垂直居中</title>
    <style>
        /* 行内元素的水平且垂直居中 */
        .box{
            width: 15em;
            height: 15em;
            border: 1px solid #000;
            box-sizing: border-box;
        }
        .box{
           padding: 5em;
        }
        .box>div{
            width: 5em;
            height: 5em;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>PHP中文网</div>
    </div>
</body>
</html>

总结：通过 box-sizing: border-box;挤压设置和padding的挤压形成padding方式的水平垂直居中

《盒模型大小属性、元素对齐方式》20201218

盒子的大小及属性

内边距及边框

外边距

元素对齐方式

行内元素的水平且垂直居中

块级元素的水平且垂直居中

相关文章