2021-03-09 11:39:08
•
1138
css中:root、var()、calc()的用法
css中:root{}、var()、calc()的用法:
基本的html代码:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css中:root{}、var()、calc()的用法</title> <link href="css.css" rel="stylesheet"> </head> <body> <div class="father"> css中:root{}、var()、calc()的用法 </div> </body> </html>
css代码:
:root{ --windowW:300px; --windowH:300px; --fcolor:#ff0000; --bcolor:#f2f2f2; } .father{ /* height: 200px;!*写给不支持calc()的浏览器*! height:-moz-calc(var(--windowH) - 100px); height:-webkit-calc(var(--windowH) - 100px); * width: var(--windowW); height:calc(var(--windowH) - 100px);/* - 左右2边要有空格,否则不起作用*/ color: var(--fcolor); background-color: var(--bcolor); text-align: center; }
以上就是css中:root{}、var()、calc()的用法。演示