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

本文是笔者在学习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合并发生两个重要元素

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

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;