CSS3计算属性calc()的使用方法
CSS3计算属性calc()的使用方法
calc() 只作用于属性值
设置宽度:width:calc(100vw - 123px);
说明:1、vw是width of view(port)的缩写;
2、100vw表示百分之百的视图宽度;
3、123px是需要减去的宽度;
4、减号的两边必须都有至少一个空格。
设置高度:height:calc(100vh-123px);
说明:1、vh是height of view(port)的缩写;
2、100vh表示百分之百的视图高度;
3、123px是需要减去的高度;
4、同理减号的两边必须都有至少一个空格。
可以应用全部属性,例如:
也可以仅用于部分属性,例如:
它甚至可以成为构成属性一部分的另一个功能的一部分! 例如,这里的calc() 用于渐变的色标中
calc() 用于长度和其他数值
以上所有示例本质上都是基于数字的。 我们会讲到一些数的使用注意事项(因为有时你不需要单位),但这是针对数字的数学,而不是字符串之类的东西。
CSS有很多长度,它们都可以与calc() 一起使用:
- px
- %
- em
- rem
- in
- mm
- cm
- pt
- pc
- ex
- ch
- vh
- vw
- vmin
- vmax
无单位的数字也是可以接受的,例如line-height:calc(1.2 * 1.2); 以及诸如transform:rotate(calc(10deg * 5));之类的角度。 您也可以不执行任何计算并且仍然有效:
注意:calc()不能在媒体查询中使用。
声明:
1.本站主要是为了记录工作、学习中遇到的问题,可能由于本人技术有限,内容难免有纰漏,一切内容仅供参考。
2.本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!
3.本站所有原创作品,包括文字、资料、图片、网页格式,转载时请标注作者与来源。
1.本站主要是为了记录工作、学习中遇到的问题,可能由于本人技术有限,内容难免有纰漏,一切内容仅供参考。
2.本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!
3.本站所有原创作品,包括文字、资料、图片、网页格式,转载时请标注作者与来源。
THE END

0

打赏

分享

二维码

海报