background-clip,box-sizing 使用

#01. background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面

  1. background-clip: border-box;:背景延伸至边框border 外沿(但是在边框下层)。
  2. background-clip: padding-box:背景延伸至内边距padding 外沿。不会绘制到边框处。
  3. background-clip: content-box;:背景被裁剪至内容区(content box)外沿。
  4. background-clip: text;:背景被裁剪成文字的前景色。

#02. box-sizing 定义如何计算一个元素的总宽度和总高度

  1. box-sizing: content-box;:是默认值。(内容区独占宽度width如果你设置一个元素的宽为 100px,那么这个元素的内容区会有 100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
  2. box-sizing: border-box宽度width=content + border + padding告诉浏览器:你想要设置的边框和内边距的值是包含在 width 内的。也就是说,如果你将一个元素的 width 设为 100px,那么这 100px 会包含它的 border 和 padding,内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。

注意uni-app 中默认使用了的是content-box,所以增加边框后,会超出预定的范围。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容