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

本文是笔者在学习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世界》并根据本身的业务作出的一些实践总结。