css笔记（四）用户界面和calc

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   用法注意

运算符前后需有空格，否则出错。