7 用户界面
包括重设元素尺寸、盒尺寸以及轮廓等。
div.box
{
box-sizing:border-box;
width:33%;
border:1px solidblue;
float:left;
}
8 calc
8.1 示例
background-image: linear-gradient(90deg,#bdf5d9 200px,#fff 200px,#fff calc(100% - 250px),#f6cb8f calc(100% - 250px),#f6cb8f 100%);其中100%为属性的属主的宽度,如当其为800时,以上规则等同于:
background-image: linear-gradient(90deg,#bdf5d9 200px,#fff 200px,#fff 550,#f6cb8f 550,#f6cb8f 100%);
即在200px处置浅蓝,使0-200px段为浅蓝,
在200px处置白色,在500px处置白色,使200px-550px段为白。
在550px处置浅黄,在800px处置浅黄,使550px-800px段为浅黄。效果可如下图所示:
8.2 用法注意
运算符前后需有空格,否则出错。