css笔记(四)用户界面和calc
来源:互联网 发布:未来清单软件 编辑:程序博客网 时间:2024/05/18 19:22
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 用法注意
运算符前后需有空格,否则出错。
阅读全文
0 0
- css笔记(四)用户界面和calc
- flash学习笔记(四)--事件机制和用户界面学习
- Pro Android学习笔记(二四):用户界面和控制(12):Style和Theme
- CSS的box-sizing和calc()
- (四)用户界面 View
- CSS学习笔记(四):文本、颜色和背景
- CSS权威指南阅读笔记(四)--值和单位
- css学习笔记(四)
- CSS学习笔记---(四)
- CSS学习笔记(四)--CSS高级
- CSS学习笔记(四):CSS布局
- ttr()、counter()和calc()在css中的使用
- css calc(expression)使用
- css中的calc()函数
- CSS 中的 calc
- css calc()用法
- CSS之calc()使用
- CSS-calc 兼容写法
- Proxmark3 基于 ubuntu 的编译环境建立
- php-BOM部分基础知识总结与实例
- 论文阅读-《Ensemble of Part Detectors for Simultaneous Classification and Localization》
- 矩阵求导(一)
- web动画实现的多种方式
- css笔记(四)用户界面和calc
- iOS APP开发的一些小心得
- Fedora 安装配置hive2.1.1
- marvel kibana elastic 安装blabla
- 【wuli小新杆】短腿短腿,快快长长……
- 写给Android开发者的混淆使用手册
- java 调用 wsdl形式的webservice 示例
- Keytool生成证书并在Tomcat配置SSL
- JavaScript:彻底理解同步、异步和事件循环(Event Loop)