(七)盒子模型

.1 盒子模型概述

盒子模型，顾名思义就是用来装东西的，它装的东西就是HTML元素的内容。

我们可以把一个HTML元素看成是一个盒子

7.2盒子构成

一个盒子由内容，内边距，边框，外边距构成

内容（content）：表示元素的宽高，若元素设置了宽度和高度，则内容空间就位宽高范围，若没有宽高，则内容空间为盒子中实际内容的所占空间
内边距（padding）：表示盒子内容与边框之间的距离
边框（border）：表示盒子的边框，位于内边距和外边距指甲剪
外边距（margin）：表示盒子边框以外的距离
注：
- 盒子的内外边距是透明的
- 盒子的大小不是我们通过CSS设置的width和height，而是内容宽高+内边距+边框+外边距

7.3 盒子属性解析

7.3.1 内边距（padding）

就是盒子里的内容距离盒子边框的距离

作用：
- 可以让内容和盒子的边框有一定的距离
属性值
- padding:Xpx;给盒子的内容四周都加上内边距
- padding:Xpx Xpx;两个值分别上下，左右
- padding:Xpx Xpx Xpx Xpx;分别表示上，右，下，左
- padding-left/right/top/bottom:Xpx;给内容的某一边加内边距

示例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .PDemo{
            width: 150px;
            height: 100px;
            background-color: red;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="PDemo">这是内容</div>
</body>
</html>

运行结果

示例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .PDemo{
            width: 150px;
            height: 100px;
            background-color: red;
            padding: 20px 30px;
        }
    </style>
</head>
<body>
    <div class="PDemo">这是内容</div>
</body>
</html>

运行结果

示例三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .PDemo{
            width: 150px;
            height: 100px;
            background-color: red;
            padding: 20px 30px 40px 50px;
        }
    </style>
</head>
<body>
    <div class="PDemo">这是内容</div>
</body>
</html>

运行结果

示例四

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .PDemo{
            width: 150px;
            height: 100px;
            background-color: red;
            /*padding-left: 20px;*/
            /*padding-right: 20px;*/
            /*padding-top: 20px;*/
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="PDemo">这是内容</div>
</body>
</html>

7.3.2 边框（border）

表示盒子的边界

作用
- 为盒子四周或某一边添加带有颜色的边框
属性
- border:边框宽度实线/虚线颜色
- border-left/right/top/bottom:边框宽度实线/虚线颜色

示例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .BDemo{
            width: 150px;
            height: 100px;
            background-color: red;
            border: 3px solid black;
        }
    </style>
</head>
<body>
<div class="BDemo">这是内容</div>
</body>
</html>

运行结果

示例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .BDemo{
            width: 150px;
            height: 100px;
            background-color: red;
            /*border: 3px solid black;*/
            border-top:3px solid black; ;
        }
    </style>
</head>
<body>
<div class="BDemo">这是内容</div>
</body>
</html>

运行结果

7.3.3 外边距（margin）

表示盒子距离它周围的距离

作用：可以用来调整元素与元素之间的间距，也可以用来移动元素（注：微调）
属性：
- margin:Xpx;给盒子的内容四周都加上外边距
- margin:Xpx Xpx;两个值分别上下，左右
- margin:Xpx Xpx Xpx Xpx;分别表示上，右，下，左（外边距它渲染显示的时候也是从左上开始）
- margin-left/right/top/bottom:Xpx;使盒子对四周的某一边有距离
注：
- 元素在渲染显示的时候左上属性优先

示例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: #339fff;
            /*margin: 20px;*/
            /*margin-top: 20px;*/
            /*margin-right: 20px;*/
            /*margin-left: 20px;*/
            /*margin-bottom: 20px;*/
            /*margin: 20px 40px;*/
            margin: 20px 30px 40px 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

实例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: #339fff;
            margin: 20px 30px 40px 50px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>