盒模型(box model)

1.1、盒模型

CSS将页面中的所有元素都设置为一个矩形的盒子。将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置。每一个盒子都有以下几个部分组成：

内容区(content)：元素中的所有的子元素和文本内容都在内容区中排列
内边距(padding)：内容区和边框之间的距离
边框(border)：属于盒子的边缘，边框里边都属于盒子内部，出了边框是盒子的外部
外边距(margin)：外边距不会影响盒子可见框的大小，但是会影响盒子的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        /* 
            一个盒子的可见框大小由 内容区、内边距、边框 共同决定
            计算盒子大小时，需要将这三个区域加到一起计算
         */
        .box1{
            /*
                内容区的大小由width和height两个属性设置
                    - width：设置内容区的宽度
                    - height：设置内容区的高度 
             */
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /*
                边框的大小会影响整个盒子的大小
                设置边框至少设置3个样式
                    - 边框的宽度 border-width 用来指定四个方向的边框的宽度（可省略不写，默认值一般3个像素）
                        值的情况：
                            四个值：上、右、下、左
                            三个值：上、左右、下
                            两个值：上下、左右
                            一个值：上下左右
                        除了border-width还有一组border-xxx-width
                            xxx可以是top、right、bottom、left
                            用来单独指定某一个边的宽度
                    - 边框的颜色 border-color
                    - 边框的样式 border-style
             */
             border-width: 10px;
             color: blue;
             /* 
                用来指定边框的颜色，同样可以分别指定四个边的边框规则同border-width
                border-color也可以省略不写，如果省略不写则自动使用color的颜色值
             */
             border-color: red orange blue;
             /* 
                border-style 指定边框的样式，默认值为none，表示没有边框
                    - solid 表示实线
                    - dotted 点状虚线
                    - dashed 线状虚线
                    - double 双线
              */
             border-style: solid dotted dashed double;
             /* 
                border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
                除了border还有一组border-xxx
                    xxx可以是top、right、bottom、left 
            */

            /*
                内边距：内容区和边框之间的距离
                一共有四个方向的内边距
                    - padding-top
                    - padding-right
                    - padding-bottom
                    - padding-left
                内边距的设置会影响盒子的大小
                背景颜色会延伸到内边距上
                padding 内边距的简写属性，可以同时指定四个方向的内边距，规则同 border-width 一样
             */
             padding: 10px;

             /*
                外边距不会影响盒子可见框的大小，但是会影响盒子的位置
                一共由四个方向的外边距
                    - margin-top：上外边距，设置正值，元素会向下移动
                    - margin-right：默认情况下，设置margin-right不会产生任何效果
                    - margin-bottom：下外边距，设置正值，其下边的元素会向下移动
                    - margin-left ：左外边距，设置正值。元素会向右移动
                    - margin可以同时设置四个外边距，也可以设置负值，则元素会向相反的方向移动
                元素在页面中按照自左向右的顺序排列的，
                默认情况下，如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距会移动其它元素
              */
              margin-top: 100px;
              margin-left: 100px;
              margin-bottom: 100px;
        }

        .inner{
            width: 100%;
            height: 100%;
            background-color: aqua;
        }

        .box2{
            width: 240px;
            height: 240px;
            background-color: yellow;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="inner"></div>
    </div>
    <div class="box2"></div>
</body>
</html>

1.2、盒模型的水平布局

元素在其父元素中水平方向的位置由以下几个属性共同决定：

margin-left
boder-left
padding-left
width
padding-right
border-right
margin-left

一个元素在其父元素中，水平布局必须满足以下等式：

margin-left + boder-left + padding-left + width + padding-right + border-right + margin-left = 其父元素内容区的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型的水平布局</title>
    <style>
        .outer{
            width: 800px;
            height: 200px;
            border: 10px red solid;
        }

        .inner{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /*
                一个元素在其父元素中，水平布局必须满足以下等式：
                margin-left + boder-left + padding-left + width + 
                padding-right + border-right + margin-left = 其父元素内容区的宽度
                以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自定调整。
                如果这7个值没有auto的情况下，则浏览器会自动调节margin-right值以使等式满足。
                这7个值中有3个值可以设置为auto：
                    - width：默认为auto
                    - margin-left
                    - margin-right。
                如果某个值为auto，则会自动调整为auto的那个值使等式成立;
                如果将一个宽度和外边距同时设置为auto，则宽度会调整到最大，设置为auto的外边距会为0;
                如果将3个值都设置为auto，则外边距都是0，宽度最大;
                如果将两个外边距设置为auto，宽度为固定值，则会将外边距设置为相同的值；
             */
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</html>

1.3、盒模型的垂直方向的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型垂直方向的布局</title>
    <style>
        /*
            默认情况下，父元素的高度被内容撑开 
         */
        .outer{
            background-color: #bfa;
        }

        .inner{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-bottom: 100px;
        }

         /*
            子元素在父元素的内容区中排列的，
            如果子元素的大小超过父元素，则子元素会从父元素中溢出 
            使用overflow属性来设置父元素如何处理子元素
                可选值：
                    - visible：默认值，子元素会从父元素中溢出，在父元素外部显示
                    - hidden：溢出的内容将会被裁剪，不会显示
                    - scroll：生成两个滚动条，通过滚动条查看完整的内容
                    - auto：根据需要生成滚动条
            overflow-x：单独处理水平方向
            overflow-y：单独处理垂直方向
         */
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            overflow: auto;
        }

        /* .box2{
            width: 100px;
            height: 300px;
            background-color: yellow;
        } */
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
    </div>

    <div class="box1">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere recusandae voluptas possimus maxime distinctio harum optio, nesciunt, magni quisquam cum quibusdam voluptate sunt. Hic tenetur perspiciatis esse aut facilis ex.
        <!-- <div class="box2"></div> -->
    </div>
</body>
</html>

1.4、盒模型外边距的折叠

垂直外边距的重叠(折叠)：相邻垂直方向外边距会发生重叠现象；

兄弟元素间的相邻垂直外边距会取两者绝对值较大的值(两者都是正值或负值)，如果相邻的外边距一正一负，则取两者的和；
父子元素间相邻外边距，子元素会传递给父元素(上外边距)，会影响页面的布局；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型外边距的折叠</title>
    <style>
        .box1,.box2{
            width: 200px;
            height: 200px;
        }
        
        .box1{
            background-color: #bfa;
            margin-bottom: 100px;
        }

        .box2{
            background-color: pink;
            margin-top: 100px;
        }

        .outer{
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        .inner{
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <hr>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

1.5、行内元素的盒模型

行内元素不支持设置宽度和高度
行内元素可以设置padding，但垂直方向的padding不会影响页面的布局
行内元素可以设置border，但垂直方向的border不会影响页面的布局
行内元素可以设置margin，但垂直方向的margin不会影响页面的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内元素的盒模型</title>
    <style>
        .s1{
            background-color: yellow;
            width: 100px;
            height: 100px;
            padding: 100px; 
            border: 10px solid red; 
            margin: 100px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

        a{
            /*
                display 用来设置元素显示的类型
                    可选值：
                        - inline 将元素设置为行内元素
                        - block 将元素设置为块元素
                        - inline-block 将元素设置为行内块元素，既可以设置宽度和高度，又不会独占一行
                        - table 将元素设置为表格
                        - none 元素不在页面中显示，不占据位置
                visibility 用来设置元素的显示状态
                    可选值
                        - visible 默认值，元素在页面中正常显示
                        - hidden 元素在页面中隐藏，不显示，但是依然占据页面的位置
             */
            background-color: pink;
            width: 100px;
            height: 100px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <a href="javascrip:;">超链接</a>
    <a href="javascrip:;">超链接</a>
    <span class="s1">我是span</span>
    <span class="s1">我是span</span>
    <div class="box1"></div>
</body>
</html>

原文地址：https://www.cnblogs.com/starsgrace/p/15129280.html