过去在学习 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:
专门建立的学习 Q-q-u-n: 731771211, 分享学习方法和需要注意的小细节, 不停更新最新的教程和学习技巧
- (从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- 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;
- }
专门建立的学习 Q-q-u-n: 731771211, 分享学习方法和需要注意的小细节, 不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
小结
以上就是看似无关却又有关的 background-clip 与 box-sizing, 相信理解了之后, 遇到 box 的尺寸大小调整, 就能够更得心应手了!
来源: http://www.jianshu.com/p/2d043f255cc9