共计 2311 个字符,预计需要花费 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
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
严格说起来 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 的尺寸大小调整,就能够更得心应手了!