博学谷学习记录 | 学习总结，用心分享 | 前端学习基础之盒子模型、浮动

程序二次猿

已于 2022-12-14 16:59:55 修改

阅读量145

点赞数

文章标签：前端 css html

于 2022-12-13 13:35:18 首次发布

本文链接：https://blog.csdn.net/m0_47321226/article/details/128266893

版权

在了解了基础标签和样式的作用及效果后，接下来就需要了解如何将这些标签和样式组合起来，构成一个雏形，也就是说需要了解如何给网页进行布局，而网页布局的基础就是盒子模型。之所以被称为“盒子”，是因为浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，这些矩形区域会并列、会嵌套，就像现实中最常见的“盒子”一样。而且就人的直观感受来说，方方正正的东西也更容易排版，方便布局。

1.元素的显示模式

虽然各种标签都能被称为“盒子”，但并不都是一样的“盒子”。在网页中有三种不同的元素，分别为块级元素、行内元素、行内块元素，各自有着不同的特点。

块级元素（block）的代表标签有div、h1~h6、p、ul、ol、li、dl、dt、dd、form、header、nav、footer等，它们的特点是独占一行，宽度默认是父元素的宽度，高度默认由内容撑开，但也可以自行设置宽高。

行内元素（inline）的代表标签有a、span、b、u、i、s、strong、ins、em、del等，它们的特点是一行可以显示多个标签，且不能设置宽高，默认由内容撑开。

行内块元素（inline-block）的代表标签有input、textarea、button、select等，它们的特点是一行内可以显示多个标签，且可以设置宽高。

虽然每个标签都有它们默认的显示特点，但是为了满足更灵活的布局需求，CSS提供了可以改变元素默认显示模式的命令 display:xxx; xxx处可写block、inline-block、inline，分别代表将显示模式转变成块级显示、行内块显示、行内显示，无论标签在转换前是哪种显示类型，在转换后一律满足所转换类型的特点。

需要注意的是，在p标签中不要嵌套div、p、h等块级标签，在a标签内不要嵌套a标签（除此之外都可以）。

2.“盒子”模型

2.1 “盒子”的组成

虽然有不同显示模式的“盒子”，但“盒子”的构造确实相同的部分组成的。在CSS 中，规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，如下图所示。

（1）内容的宽高 width/height: xxx + px;

（2）边框 border

border连写形式： border: xx+px (solid or dashed or dotted) color;

例如， border: 1px solid red;

（3）内边距 padding

（4）外边距 margin

注：padding和margin设定值的时候都是从上侧开始顺时针旋转;

若要设置padding和margin的单边值，则可以写成padding-xxx、margin-xxx，xxx则是top or right or bottom or left 。

2.2 “盒子”的尺寸

默认状态下，盒子的尺寸包括了内容尺寸、内边距尺寸和边框尺寸，盒子占据的大小则是包括了内容尺寸、内边距尺寸、边框尺寸以及外边距尺寸。计算盒子尺寸的公式如下，

盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

在默认情况下首先决定的是盒子尺寸，那么在设置内容宽高（width/height）时就需要减去边框宽度和内边距，否则盒子的大小就会比最初的设定值大，这样的减法运算也被称为“手动內减”。

由于一个网页可能由成千上万个“盒子”组成，若对每个“盒子”都进行尺寸的计算，则会对设计者产生大量、重复且易错的计算，因此在CSS3中有一种“自动內减”的方法，只需要程序员设定好width、height、padding、border的尺寸，浏览器会计算多余大小，并自动在内容（content）中减去，只需要我们给盒子设置属性 box-sizing:border-box; 即可。

3 布局

3.1 外边距折叠现象

1.合并现象

垂直布局的块级元素的上下margin会合并，最终两者距离为margin的最大值。

    <div class="one"></div>
    <div class="two"></div>

    .one{
        width: 200px;
        height: 200px;
        margin: 20px;
        background-color: red;
    }

    .two{
        width: 200px;
        height: 200px;
        margin: 80px;
        background-color: green;
    }

解决方法：只给其中一个盒子设置margin即可。

2.塌陷现象

互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素也向下移动。

解决方法：
（1）给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
（2）给父元素设置overflow：hidden
（3）转换成行内块元素
（4）设置浮动

（5）设置 .clearfix::before {content: '';display: table;}

3.2 行内元素margin、padding无效情况

给行内元素设置margin和padding时，水平方向的margin和padding布局中有效，而垂直方向的margin和padding布局中无效。

3.3 居中布局

3.4 标准流

标准流，又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。常见标准流排版规则：（1）块级元素：从上往下，垂直布局，独占一行。（2）行内元素或行内块元素：从左往右，水平布局，空间不够自动换行。

3.5 浮动

浮动是一种常见的布局方法，如果要做一个比喻的话，标准流就是在“地面”上摆放“盒子”，而浮动就是在“半空”中摆放“盒子”，由于摆放“盒子”的位置不同，因此浮动有着许多独有的特点。但即便知道了浮动和标准流之间存在差异，仍会产生一个疑问：浮动存在的意义是什么呢？

1.浮动存在的意义

浮动早期存在的意义是为了能够做到“图文环绕”的效果，如下图所示。

后来（也可能就一两天吧，笑）随着网页的精致化、复杂化，浮动也逐渐被用来使只能垂直布局的块级元素变得能水平布局，大大加强了元素布局的灵活性，也解决了行内块元素在水平布局时两者之间存在空白符的问题。

2.浮动的特点

（1）浮动会脱离标准流（简称：脱标），在标准流中不占据位置。

（2）浮动元素比标准流高半个级别，可以覆盖标准流中的元素。

（3）浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动，即某个浮动的元素会摆放在离它最近的上一个浮动元素的左或右位置。

（4）浮动的标签都是顶对齐的。

（5）浮动元素有特殊的显示效果：一行可以显示多个；可以设置宽高，可以把它看成更高级的行内块元素。

（6）浮动元素不能通过 text-align:center; 或者 margin:0 auto; 进行位置居中。

3.浮动布局

下面是一段浮动布局的代买，其实浮动布局有点像摞积木，给第一个元素贴上float的标签，它就会自动的贴在父级元素的左边或者右边上，而第二个元素则会贴在第一个元素的左边或右边，第三个元素、第四个元素也是用同样的方式贴上去，直到父元素的在水平方向上放不下时，它们就会自动换行，在下一行上继续依次摆放。

我们通过代码看一下实际的效果。

    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>

（1）标准流布局

    .one{
        width: 100px;
        height: 100px;
        background-color: pink;
    }

    .two{
        width: 200px;
        height: 200px;
        background-color: green;
    }

    .three{
        height: 300px;
        background-color: orange;
    }

这是标准流的效果，每个div块级元素占据一整行，三个div分三行垂直排列。

（2）浮动布局


    /* 浮动的特点 */
    .one{
        float: right;
        width: 100px;
        height: 100px;
        background-color: pink;
    }

    .two{
        float: left;
        width: 200px;
        height: 200px;
        background-color: green;
    }

    .three{
        height: 300px;
        background-color: orange;
    }

当给 .one 和 .two 标签加上float后，它们便脱离了标准流，.one 的float属性值是right， .two 的是left，所以 .one 放置在了最右侧， .two 放置在了最左侧。也正因为 .one 和 .two 脱离了标准里，因此 .three不再受 .one 和 .two 的影响，跑到了最上方。

若再加上一个浮动的 .four 元素，那么排版如下所示。 .four 和 .two 都是left排版，因此根据先后顺序，.four 会排在 .two 的后面。

    <div class="one">one</div>
    <div class="two">two</div>
    <div class="four">four</div>
    <div class="three">three</div>

    /* 浮动的特点 */
    .one{
        /* float: right; */
        width: 100px;
        height: 100px;
        background-color: pink;
    }

    .two{
        /* float: left; */
        width: 200px;
        height: 200px;
        background-color: green;
    }

    .three{
        height: 300px;
        background-color: orange;
    }

    .four{
        float: left;
        width: 100px;
        height: 100px;
        background-color: red;
    }

从上面的例子我们还可以看出来，浮动的元素并不会遮住下方元素的文本。

4.清除浮动

清除浮动并不是要把设置好的浮动效果给删除掉，而是要清除浮动带来的影响。

有时候我们在排版时并不想给父元素一个固定的高度，这是因为子元素的高度可能会变化，并不固定，若冒然给父元素添加一个固定的高度，就有可能带来子元素内容显示不全的结果。但如果在这种情况下子元素使用了浮动，那么父元素的原本被撑开的高度就会消失，下面的元素就会跑到上面，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 10px auto;
            width: 1000px;
            /* height: 400px; */
            background-color: pink;
        }

        .bottom {
            margin: 10px auto;
            width: 1000px;
            height: 400px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

有如下五种方法消除浮动带来的影响。（注：常使用 .clearfix 类名）

（1）直接给父元素设置高度。但这种方法明显和上面提到的例子相悖，因此在使用时应该酌情考虑。

（2）额外标签法清除浮动。在父元素内容的最后添加一个块级元素，并且在这个块级元素的CSS中设置 clear:both 属性，但这样会使得HTML结构变得更复杂。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 10px auto;
            width: 1000px;
            /* height: 400px; */
            background-color: pink;
        }

        .bottom {
            margin: 10px auto;
            width: 1000px;
            height: 400px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        .clearfix {
            /* 清除左右两侧浮动的影响 */
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

（3）单伪元素清除浮动。和额外标签法的原理一样，用伪元素代替了添加在父元素最后的标签，让代码变得更加简洁。


        /* 直接给父元素添加属性名 */
        .clearfix::after {
            content: '';

            /* 伪元素添加的标签是行内, 要求块 */
            display: block;
            clear: both;

            /* 为了兼容性 */
            height: 0;
            visibility: hidden;
        }

（4）双伪元素清除浮动。这种方法不仅清除了浮动带来的影响，同时也解决了外边距塌陷问题，是项目中常用的方法。

        /*  .clearfix::before 解决外边距塌陷问题*/
        /* 清除浮动 */
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }

        /* 真正清除浮动的标签 */
        .clearfix::after {
            /* content: '';
            display: table; */
            clear: both;
        }

（5）给父元素设置 overflow:hidden; 。其优点是方便，但也可能会遮挡住内部子代元素的内容。

        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;

            overflow: hidden;
        }