CSS——盒子模型（含详解）

1、介绍

HTML文档中的每个元素都被比喻成矩形盒子， 盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域），如果把一个盒子比喻成一个壁挂相片，那么
        #外边距margin ===== 一个相框与另外一个相框之间的距离
        #边框border ====== 边框指的就是相框
        #内边距padding ===== 内容/相片与边框的距离
        #宽度width/高度height ===== 指定可以存放内容/相片的区域
    　　 提示：可以通过谷歌开发者工具查看盒子的各部分属性

CSS——盒子模型（含详解）

2、盒子模型举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*html {*/
        /*    height: 100%;*/
        /*}*/
        /*body {*/
        /*    height: 100%;*/
        /*}*/
        /*.box1 {*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*    background-color: red;*/
        /*}*/
        .sp1 {
            width: 200px;
            height: 200px;
            background-color: red;
            /*display: inline-block;*/
            display: none;
            /*visibility: hidden;*/
        }
        .sp2 {
            width: 200px;
            height: 200px;
            background-color: green;
            display: inline-block;

        }

        p span {
            color: red;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<span class="sp1">你好</span>
<span class="sp2">你好</span>

<p>你好<span>ayca</span></p>
</body>
</html>

盒子模型