摘要:过去在学习的时候,首要任务就是要理解,因为是里头很重要的模型概念,描述了与的空间定位,今天的项目竟然卡在一个简单的小问题,因此就用一篇文章做个纪录提醒自己不要忘记,也避免之后遭遇到又会卡住了。
过去在学习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-sizingbox-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/55046.html
摘要:过去在学习的时候,首要任务就是要理解,因为是里头很重要的模型概念,描述了与的空间定位,今天的项目竟然卡在一个简单的小问题,因此就用一篇文章做个纪录提醒自己不要忘记,也避免之后遭遇到又会卡住了。 过去在学习CSS的时候,首要任务就是要理解box model,因为box model是CSS里头很重要的模型概念,描述了padding、margin、border与content的空间定位,今天...
摘要:过去在学习的时候,首要任务就是要理解,因为是里头很重要的模型概念,描述了与的空间定位,今天的项目竟然卡在一个简单的小问题,因此就用一篇文章做个纪录提醒自己不要忘记,也避免之后遭遇到又会卡住了。 过去在学习CSS的时候,首要任务就是要理解box model,因为box model是CSS里头很重要的模型概念,描述了padding、margin、border与content的空间定位,今天...
摘要:和这三个特性是新增的和动画相关的特性。使用方式如下和变换类型可以有各种变换类型,即属性值定义不进行转换。设置列之间的宽度样式和颜色规则和和用户界面中,新的用户界面特性包括重设元素尺寸盒尺寸以及轮廓等。 除了html5的新特性,CSS3的新特性也是面试中经常被问到的。 选择器 CSS3中新添加了很多选择器,解决了很多之前需要用javascript才能解决的布局问题。 element1~...
摘要:如果只指定其中一个值,另一个值会被设定为因此可以和混用。通过设定负的,背景图像的一部分被拖拽到父元素之外,从而在父元素之内显示要显示的内容。随着的普及,相信渐变将成为主流。可以显示的显示范围。 作为一个有理想有包袱的页面仔,正像鑫哥在这篇文章说说CSS学习中的瓶颈(强烈推荐)里说的 其实,广大页面屌丝们并不畏惧那些学习能力强的人,畏惧的是那些学习能力强,同时,尼玛学习又拼命的人。页面仔...
摘要:就目前为止,还没有到好玩的地步,只要知道会盖在上面,然后如果在后面写半角英文逗号的话,就可以玩多背景图了,比如。 background是在CSS中使用率很高的一个属性之一,由最初的几个简单的属性到现在新增了很多的属性,比如background-size、background-origin以及background-clip等属性,还可以设置多背景来达到更多的炫酷效果。 以下要谈的...
阅读 1156·2021-09-04 16:41
阅读 2338·2021-09-02 10:18
阅读 882·2019-08-29 16:40
阅读 2583·2019-08-29 16:14
阅读 861·2019-08-26 13:41
阅读 1262·2019-08-26 12:24
阅读 704·2019-08-26 10:24
阅读 2837·2019-08-23 17:54