那些被忽略的盒子模型小知识-白红宇

本文是笔者在学习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则专注于数据的表现。


      
         ￥    {(totalPrice / 100).toFixed(1)}    
         已省￥    {(totalDiscountPrice / 100).toFixed(1)}    
         （    {(discount / 10).toFixed(1)}    折）  
    
复制代码

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


      
         {(totalPrice / 100).toFixed(1)}    
         {(totalDiscountPrice / 100).toFixed(1)}    
         {(discount / 10).toFixed(1)}  
    
复制代码

SCSS:

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

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

HTML:


    
     Hi，I’m a bubble dialog. Can you see me?
    
复制代码

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;复制代码

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

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

参考

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