CSS box-sizing与background-clip解决背景显示范围的问题

zhaot 发布于2019-08-30 10:52 / 1000人阅读

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

过去在学习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：

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：

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的尺寸大小调整，就能够更得心应手了！

混合云服务器托管解决问题的方法云计算解决的问题短视频问题的解决措施数据分析解决的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114627.html

CSS box-sizing与background-clip解决背景显示范围的问题

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

seanlook 2019-08-26 13:45 评论0 收藏0
CSS box-sizing与background-clip解决背景显示范围的问题

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

maochunguang 2019-08-02 16:17 评论0 收藏0
前端面试之CSS3新特性

摘要：和这三个特性是新增的和动画相关的特性。使用方式如下和变换类型可以有各种变换类型，即属性值定义不进行转换。设置列之间的宽度样式和颜色规则和和用户界面中，新的用户界面特性包括重设元素尺寸盒尺寸以及轮廓等。除了html5的新特性，CSS3的新特性也是面试中经常被问到的。选择器 CSS3中新添加了很多选择器，解决了很多之前需要用javascript才能解决的布局问题。 element1~...

glumes 2019-08-29 12:53 评论0 收藏0
CSS中Background浅析

摘要：如果只指定其中一个值，另一个值会被设定为因此可以和混用。通过设定负的，背景图像的一部分被拖拽到父元素之外，从而在父元素之内显示要显示的内容。随着的普及，相信渐变将成为主流。可以显示的显示范围。作为一个有理想有包袱的页面仔，正像鑫哥在这篇文章说说CSS学习中的瓶颈(强烈推荐)里说的其实，广大页面屌丝们并不畏惧那些学习能力强的人，畏惧的是那些学习能力强，同时，尼玛学习又拼命的人。页面仔...

objc94 2019-08-30 13:03 评论0 收藏0
回味background

摘要：就目前为止，还没有到好玩的地步，只要知道会盖在上面，然后如果在后面写半角英文逗号的话，就可以玩多背景图了，比如。 background是在CSS中使用率很高的一个属性之一，由最初的几个简单的属性到现在新增了很多的属性，比如background-size、background-origin以及background-clip等属性，还可以设置多背景来达到更多的炫酷效果。以下要谈的...

aboutU 2019-08-28 18:04 评论0 收藏0