css计算属性和变量罗列了attr()、计算属性calc()、css变量以及@media查询，主要用于平常开发知识点的查

attr()

css使用html标签属性的方法

a:after {
    content: " (" attr(href) ")";
}

计算属性

calc() 用于动态计算长度值
- 需要注意的是，运算符前后都需要保留一个空格
```
width: calc(100% - 10px)
```
- 任何长度值都可以使用calc()函数进行计算
- calc()函数支持+ - * /运算
- calc()函数使用标准的数学运算优先级规则

css变量

详细使用方法

--*，其中*为数字【0-9】，字母【a-zA-Z】，下划线_，短横线-，也可以是中文、日文、韩文

:root{
    --1: #369;
}
body{
    background-color: var(--1)
}

body{
    --深蓝：#369；
    background-color: var(--深蓝)
}

无论变量的定义和使用只能在声明块{}里面，如下是无法生效的

//无法生效
--深蓝： #359;
body{
    background-color: var(--深蓝)
}

var(<自定义属性>[,<默认值]?)，如果我们使用的变量没有定义，则使用后面的值作为元素的属性值。
```
.box{
    --1: #369
}
body{
    background-color: var(--1, #cd0000);
}
```

css变量可以传递，只需要改变--columns这一个变量即可

.box{
    --columns: 4;
    --margins: calc(24px / var(--columns));
    --space: calc(4px * var(--columns));
    --fontsize: calc(20px - 4 / var(--columns));
}

@media screen and (max-width: 1200px){
    .box{
        --columns: 3;
    }
}

@media screen and (max-width: 900px){
    .box{
        --columns: 2
    }
}

@media screen and (max-width: 600px){
    .box{
        --columns: 1;
    }
}

@media 查询

可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置响应式的页面。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

css语法

@media mediatype and|not|only (media feature){
    CSS-Code;
}

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

mediatype 媒体类型
1. all 用于所有设备
2. screen 用于电脑屏幕，平板，手机