前端入门学习笔记（十七）CSS入门（五）CSS盒模型：边距、边框、填充

CSS盒模型

盒模型由由边距(margin)，边框(border)，填充(padding)和实际内容组成。

所有盒模型以相同的顺序工作：顶部(top)，右侧(right)，底部(bottom)和左侧(left)。（顺时针方向）

1.边距（margin）

/*CSS部分代码*/
.firstbox {
    background: red;
    height: 100px;
    width: 100px;
}
   
.secondbox {
    background: red;
    height: 100px;
    width: 100px;
}

<!-- HTML部分代码 -->
<p class="firstbox"></p>
<p class="secondbox"></p>

代码运行效果

修改css代码，设置左边距为100px

        /* 左侧边距设置为100px */
        .firstbox {
            background: red;
            height: 100px;
            width: 100px;
            /* 边距有多种设置方法，margin、margin-left、margin-right、margin-top、margin-bottom等，可查看手册 */
            margin-left: 100px;
        }

CSS修改后如下图所示

明显看出第一个红色方块距离左方100px，即边距（margin-left）为100px

2.边框(border)

        /*CSS部分代码*/
        /* 设置边框border */
        .firstbox {
            background: red;
            height: 100px;
            width: 100px;
            /* 此处设置边框为50px,实心，绿色*/
            border: 50px solid green;
        }
        
        /* border如同margin，有多种设置属性 */
        .secondbox {
            background: red;
            height: 100px;
            width: 100px;
            /* 此处设置左边框为50px,实心，绿色*/
            border-left: 50px solid green;
        }

<!-- HTML部分代码 -->
<p class="firstbox"></p>
<p class="secondbox"></p>

代码效果

第一个图形的总宽度为 50px（border）+ 100px + 50px（border）= 200px;
第二个图形的总宽度为 50px（border）+ 100px = 150px;

3.填充(padding)

padding又叫做内边距，padding的颜色与盒子的background颜色相同，可以理解颜色为透明。

        /* CSS代码 */
        .firstbox {
            background: red;
            height: 100px;
            width: 100px;
            /* padding为内边距*/
            padding: 50px;
        }
        .secondbox {
            background: red;
            height: 100px;
            width: 100px;
        }

    <!-- HTML部分代码 -->
    <p class="firstbox">firstbox</p>
    <p class="secondbox">secondbox</p>

代码效果

可以很明显的看出来
“firstbox”距离上部（top）、左侧（left）均有一段距离（50px）
“secondbox”因为没有设置padding，则与上部（top）、左侧（left）没有间距，