Kaiven的个人博客

Appearance

盒模型 ​

概念 ​

盒子是用来存放东西（元素可以包含任意的内容）；

盒子可以是具象（元素有实际的宽高或者是一个DOM节点）的也可以是抽象的（不在 DOM 树中，或者就仅仅是一个空标签）；

盒子外部一般都有一个“纸壳”（border）；

盒子内部可以塞一些填充物（padding）；

被填充物包裹的是真实放入的内容（content）；

不同盒子的放置可以是紧凑的，也可以有一些距离（margin）

  • img

box-sizing ​

  • content-box ​

    默认的盒模型特征 => 属性width的设置 = content

  • border-box ​

    特殊的盒模型特征 => 属性width的设置 = content + padding + border

  • 案例 ​

    • 经典盒模型

      html
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 100%;
        }
        .left {
            width: 70%;
            height: 100px;
            float: left;
            background-color: red;
        }
        .right {
            width: 30%;
            height: 100px;
            padding: 10px;
            float: left;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

      由于宽度不够（30% + 70% + 20px），会自动换行

    • 特殊盒模型

      html
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 100%;
        }
        .left {
            width: 70%;
            height: 100px;
            float: left;
            background-color: red;
        }
        .right {
            box-sizing: border-box;
            width: 30%;
            height: 100px;
            padding: 10px;
            float: left;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

      这样就不会换行了，因为宽度并没有溢出

高度和溢出问题 ​

普通文档流对宽度进行限制，在高度上无限延展。所以，一个容器在不设置高度的情况下，其高度由内容决定。但是，如果对高度进行了限制，容器内的内容很有可能会溢出。可以设置 overflow 的属性值。

overflow ​

  • visible ---- 默认值，溢出区域可见
  • hidden ---- 溢出内边距的内容隐藏
  • scroll ---- 无论是否溢出，都会出现一个滚动条
  • auto ---- 内容溢出时，出现滚动条

关于高度百分比 ​

除非父级别的元素指定了高度大小，否则使用百分比高度是默认不生效的。

等高列 ​

概念 ​

想象一下，有很多个卡片组件，你肯定希望这些卡片的高度是一样的，这样在横向排列的时候，显得不是那么的怪异。

实现 ​

  • 固定高度

    这不是个理想的方案，我们应该尽量避免这样的魔法值。对于高度，应该让内容决定，最后扩展一下较矮的列。

  • 表格布局

    html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100%;
            display: table;
        }
        .left {
            width: 70%;
            height: 100px;
            display: table-cell;
            background-color: red;
        }
        .right {
            width: 30%;
            display: table-cell;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">
            嘿嘿嘿
        </div>
        <div class="right"></div>
    </div>
</body>
</html>

  • 弹性盒子

    子元素默认等高

    html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100%;
            display: flex;
        }
        .left {
            width: 70%;
            height: 100px;
            background-color: red;
        }
        .right {
            width: 30%;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">
            嘿嘿嘿
        </div>
        <div class="right"></div>
    </div>
</body>
</html>

垂直居中 ​

就是内容在容器内垂直居中，实现方案有很多。

  • vertical-align ---- 影响行内元素或者table-cell元素
  • padding
  • position
  • 弹性盒子

没有什么特别的应用场景，都是”视情况而定“。

外边距 ​

负外边距 ​

就是 margin 的值可以是负数，虽然平时很少这样做，不过有些时候还是很有用的，它有一些细节需要知道的：

如果设置左边或顶部的负外边距，元素就会相应地向左或向上移动；如果设置右边或者底部的负外边距，并不会移动元素，而是将它后面的元素拉过来。

外边距折叠问题 ​

也就是我们常说的 margin 上下叠压的问题，上下相邻的元素的外边距取最大值。我觉得也不能称为问题，就像两个人要保持一定的距离，有一个人移动不就行了嘛，对吧。

解决方式：

  • overflow: auto（非visible的值） ---- 副作用最小
  • 加边框
  • 弹性盒子

前两种方式都需要借助父元素，请注意，如果父元素什么样式都没有，这种现象还是会出现的。

Date：2025/05/26

Author：kaiven