那些被忽略的盒子模型小知识

本文是笔者在学习CSS时的一些小白总结

我们知道的盒子模型主要由4个区域组成，分别是内容区域（content），内边距区域（padding），边框区域（border）和外边距区域（margin）。
对于不了解盒子模型的朋友可以移步到这里了解一下。

Content（内容）

1. 替换元素

替换元素（replaced element），顾名思义就是内容可以被替换的元素。

我们通常会把一些特殊意义的文本替换成图片，比如一个网站的logo。

我们会在页面上看到的不是h1标签显示的”Google“文字，而是谷歌logo的图片。使用了content的元素的内容在html标签中是不存在的。这样做就有个好处，当爬虫来访问我们的网站，爬虫可以知道我们这个主站的h1标题是”Google“而不是一个img标签，且在视觉上给用户更好的体验。

2. 伪元素::before和::after

为了实现上面显示价格，之前写react代码时候会经常这么写，感觉在逻辑上写了好多关联性不大的文本。其实可以利用::before和::after两个伪元素，把这些与逻辑不相关的写在css里，react dom则专注于数据的表现。

<div className="price-panel">
  <span className="price-panel__price">
    ￥
    {(totalPrice / 100).toFixed(1)}
  </span>
  <span className="price-panel__discount-price">
    已省￥
    {(totalDiscountPrice / 100).toFixed(1)}
  </span>
  <span className="price-panel__discount">
    （
    {(discount / 10).toFixed(1)}
    折）
  </span>
</div>

使用了伪元素后的react代码显然更加清晰表示数据。
HTML:

<div className="price-panel">
  <span className="price-panel__price">
    {(totalPrice / 100).toFixed(1)}
  </span>
  <span className="price-panel__discount-price">
    {(totalDiscountPrice / 100).toFixed(1)}
  </span>
  <span className="price-panel__discount">
    {(discount / 10).toFixed(1)}
  </span>
</div>

SCSS:

.price-panel {
  &__price {
    &::before {
      content: '￥';
    }
  }
  &__discount-price {
    &::before {
      content: '已省￥';
    }
  }
  &__discount {
    &::before {
      content: '(';
    }
    &::after {
      content: '折）';
    }
  }
}

我们还能使用伪元素帮助实现一些本来需要多个div实现的样式，比如下面这个对话框。

HTML:

<div class="dialog">Hi，I’m a bubble dialog. Can you see me?</div>

CSS:

.dialog {
  background: #f0f;
  padding: 10px;
  border-radius: 10px;
  color: white;
  max-width: 250px;
  position: relative;
  overflow: visible;
}

.dialog::after {
  position: absolute;
  content: '';
  display: inline-block;
  border-width: 5px 10px;
  border-style: solid;
  border-color: transparent transparent #f0f #f0f;
  width: 0;
  height: 0;
  right: -20px;
}

Padding（内边距）

padding的百分比值是非常有用的。需要注意的padding的百分比值，无论是水平方向还是垂直方向都是相对于父级元素的宽度进行计算的。

如果需要弄一张16:9的等比缩放图片，可以利用padding的这个特性，设置一个padding-top或者padding-bottom为56.25%即可(100\16*9)

Margin（外边距）

1. margin合并

块级元素的margin-top和margin-bottom有时候会合并为单个margin，这种现象叫margin合并。
margin合并发生两个重要元素

1. 必须是块级元素
2. 只发生在垂直方向。

margin合并的场景

1.1 相邻兄弟元素

1.2 父级和第一个/最后一个子元素

在实际开发中，父子margin合并很有可能会带给我们麻烦。
如下图所示，div表现出和我们预想不一致的结果。

那么怎么才能防止这种父子margin合并导致的和预想不一致问题呢？
解决方法如下（这里直接复制了张鑫旭老师书籍《CSS世界》的原话。）：
（1）对于margin-top合并（满足一个即可）：

• 父元素设置为BFC
• 设置border-top的值（亲测transparent也可以的）
• 设置padding-top的值
• 父元素和第一个子元素之间添加内联元素

（2）对于margin-bottom合并（满足一个即可）：

• 父元素设置为BFC
• 设置border-bottom（transparent也可以的）
• 设置padding-bottom
• 父元素和最后一个子元素之间添加一个内联元素
• 父元素设置height、min-height或者max-height

1.3 空块级元素的margin合并

2. margin auto

每当说到margin:auto，我的第一反应是居中。但这个只是一个浅层应用的表象。
接下来我们去一起看看这个margin:auto究竟是‘何方神圣’。

margin:auto的填充规则如下：

• 如果一侧定值，一侧auto，则auto为剩余空间大小。注意auto并不是0的意思。
• 如果两侧都是auto，则平分剩余的空间

我会疑惑为什么我设置了margin: auto，却在垂直方向上没有居中。

这里《css世界》中给出的答案让人非常容易理解。假如把.son元素的height去掉，.son的高度会自动变成父元素的200px，显然不会，所以无法触发margin: auto。同理，如果把width为200px去掉，确实是会和父元素一样宽。

那么如何让垂直居中呢?
子元素使用绝对定位后设置margin: auto即可

Border（边框）

用border绘制三角形

我们可以利用border color为透明来绘制一些图形，比如三角形

注意border-color这个属性。

/* border-color: color; 单值语法 */ 
border-color: red;

/* border-color: vertical horizontal; 双值语法*/
border-color: red #f015ca;

/* border-color: top horizontal bottom; 三值语法 */
border-color: red yellow green;

/* border-color: top right bottom left; 四值语法 */
border-color: red yellow green blue;

当然，我们绘制三角形不限于这种等腰三角。

这里绘制了一个底边分别是60px和160px的直角三角形。

参考

文章主要参考了张鑫旭老师的《css世界》并根据自己的业务做出的一些实践总结。