CSS-boxsizing与backgroundclip解决背景显示范围的问题

jiezi

6 年前

过去在学习 CSS 的时候，首要任务就是要理解“box model”，因为 box model 是 CSS 里头很重要的模型概念，描述了 padding、margin、border 与 content 的空间定位，今天的项目竟然卡在一个简单的小问题，因此就用一篇文章做个纪录提醒自己不要忘记，也避免之后遭遇到又会卡住了。（下图就是 CSS 的 box model）

今天遇到的问题是出在我用了一个半透明的 border，但却无法顺利地透过并显示背景的图案或颜色，后来发现原来 box 预设的 border，其实是在这个 box 之内的，虽然 border 在 box 的内部，但其实与刚刚的 box model 并没有相违背，因为 border 包住的空间，仍然是 padding 与 content，只是如果把 border 变成半透明，就会把原本 box 的底色给呈现出来。（如下图）

为了让 border 可以顺利的在外面显示背景的图案或颜色，就需要用到 box-sizing 与 background-clip 这两个 CSS3 的属性来设定，就让我们来分别看看这两个属性该如何使用：

box-sizing 有两个值可以设定，分别是：content-box（预设值）与 border-box，如果在 content-box 的情形下，我们设定了 box 的 padding 或 border，box 就会被撑开，因为 padding 和 border 是长在 box 内的，不过如果我们将 box-sizing 设定为 border-box，那么就会一直维持原始的大小，但相对的也就会压缩内部的空间，我自己在设计网页的习惯，都会预先把所有的 div 设为 border-box，如此一来才能更方便去计算大小，也能避免内容的东西加了 padding 就把外框变大了，然后再根据当下的情况，去决定是否要改为 content-box。

下面的示例是用三个示例来对照参考，半透明的蓝色方块是原始的大小，第一张图设定了 padding:20px；，第二张图除了 padding:20px 之外，还有设定了 border:10px dotted rgba（255,0,0，.5）；，第三张图则是与第二张图同样的设定，但 box-sizing 设为 border-box，经由对照，就可以很明显的发现彼此的差异。

HTML：

<div><div></div></div>
<div class="box default"><div></div></div>
<div class="box border-box"><div></div></div>

CSS：

div{
  width:120px;
  height:120px;
  margin:20px 0 0 10px;
  padding:20px;
  display:inline-block;
  background:url(地址);
}
div>div{background:rgba(0,200,255,.4);
  margin:0;
  padding:0;
}
.box{border:10px dotted rgba(255,0,0,.5);
}
.default{/*box-sizing:content-box;*/ /* 预设值 */}
.border-box{box-sizing:border-box;}

严格说起来 background-clip 与 box-sizing 应该是八竿子打不着边，但因为在设计一个 box 的时候，往往都会 border、padding 和 margin 混合使用，也因为这个 CSS3 的属性，让我刹那间不知道是哪里写错了，结果原来是自己忘了属性该怎么使用。

background-clip 共有三个设定值，分别是：border-box（预设值）、padding-box、content-box，很有趣的是，刚刚的 box-sizing 预设值为 content-box，这里的预设值却变成了 border-box，下面的三张图，分别代表了这三个设定值的长相，我们可以看到，第一张图在预设值的情形下，边框之下就是原本 box 的底色（边框是半透明的虚线），第二张图设为 padding-box，border 下方就不会有 box 底色，最后一个设定为 content-box，就只会出现 content 区域的背景，border 与 padding 下的背景都会消失，这也是 background（背景）clip（剪裁）的意义所在。

HTML：

<div class="box bg-border-box"><div></div></div>
<div class="box bg-padding-box"><div></div></div>
<div class="box bg-content-box"><div></div></div>

CSS：

div{
  width:120px;
  height:120px;
  margin:20px 0 0 10px;
  display:inline-block;
  background:url(地址);
  padding:20px;
}
div>div{
  margin:0;
  padding:0;
  background:rgba(0,200,255,.4);
}
.bg-border-box{/* background-clip:border-box; */ /* 预设值 */}
.bg-padding-box{background-clip:padding-box;}
.bg-content-box{background-clip:content-box;}

以上就是看似无关却又有关的 background-clip 与 box-sizing，相信理解了之后，遇到 box 的尺寸大小调整，就能够更得心应手了！

box-sizing

background-clip

小结