#01. background-clip
设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面
-
background-clip: border-box;
:背景延伸至边框border
外沿(但是在边框下层)。 -
background-clip: padding-box
:背景延伸至内边距padding
外沿。不会绘制到边框处。 -
background-clip: content-box;
:背景被裁剪至内容区(content box)外沿。 -
background-clip: text;
:背景被裁剪成文字的前景色。
#02. box-sizing
定义如何计算一个元素的总宽度和总高度
-
box-sizing: content-box;
:是默认值。(内容区独占宽度width
)如果你设置一个元素的宽为 100px,那么这个元素的内容区会有 100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 -
box-sizing: border-box
:(宽度width
=content
+border
+padding
)告诉浏览器:你想要设置的边框和内边距的值是包含在 width 内的。也就是说,如果你将一个元素的 width 设为 100px,那么这 100px 会包含它的 border 和 padding,内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。
注意
uni-app
中默认使用了的是content-box
,所以增加边框
后,会超出预定的范围。