盒模型

box: 盒子，每个元素在页面中都会生成一个矩形区域（盒子）

盒子类型：
1，行盒， display等于inline的元素，行盒在页面中不换行
2，块盒， display等于block的元素，块盒独占一行

浏览器默认样式表设置的块盒：容器元素：h1-h6, p
常见的行盒：span, a, img, video, audio

盒子的组成部分

无论是行盒，还是块盒，都由下面几个部分组成，从内到外分别是：

内容 content
width height 设置盒子内容的宽高
填充（内边距） padding
盒子边框到内容的距离

padding-left padding-right padding-top padding-bottom
padding:简写属性
padding:上右下左

边框 border

边框样式：border-style
边框宽度：border-width
边框颜色：border-color
边框+填充区+内容区 = 边框盒 border-box

外边框 margin
边框到其它盒子的距离

margin-top margin-right margin-bottom margin-left

demo代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>盒模型</title>
        <style>
            .a{
                background-color: skyblue;
                padding: 20px;
                border: #808080;
                border-style: dashed;
                margin: 10px
            }
        </style>
    </head>
    <body>
        <h1>我是H1标签</h1>
        <p>我是p标签</p>
        <div class="a">
            我是div
        </div>
        <div>
            <span style="display: block;">我是span</span>
            <span>我是span</span>
            <span>我是span</span>
            <span>我是span</span>
            <span>我是span</span>
            <span>我是span</span>
            <span>我是span</span>
            <span>我是span</span>
            <span>我是span</span>
            <span>我是span</span>
        </div>
    </body>
</html>

多说几句：可以把盒模型理解为一个装了手机盒子的快递盒子。手机盒子内部区域叫做content，两盒子中间的区域叫做padding。