css 面试题 知识点

1. calc()语法

.elm {
  width: calc(expression);
}

calc()使用通用的数学运算规则，但是也提供更智能的功能：

使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

width 兼容式写法
.box {
    background: #f60;
    height: 50px;
    padding: 10px;
    border: 5px solid green;
    width: 90%;/*写给不支持calc()的浏览器*/
    width:-moz-calc(100% - (10px + 5px) * 2);
    width:-webkit-calc(100% - (10px + 5px) * 2);
    width: calc(100% - (10px + 5px) * 2);
}

2. CSS Support 用法

CSS中的@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。但是这里有一点需要注意的是：@support对于浏览器的版本也是有要求的，不是说所有的浏览器以及其所有的版本都是支持@support的。
下面就来说一下@support的用法：

• 1. 基本语法是这样的：

如果浏览器支持display:flex属性的话，那么div的样式就是display:flex

@supports (display: flex) { div { display: flex; }}

• 2. 逻辑操作符：“not” 的用法

如果浏览器不支持display:flex属性的话，那么div的样式就是display:right

@supports not (display: flex) { div { float: right; }}

• 3. 逻辑操作符：“and”的用法

注释：如果浏览器支持display:flex和box-shadow的属性，就执行里面自己的样式

@supports (display: flex) and ( box-shadow: 2px 2px 2px black ) {
     /*自己的样式*/
}

• 4. 逻辑操作符：“or” 的用法

如果浏览器支持其中一个就可以执行里面自己的样式

@supports (display: -webkit-flex) or (display: -moz-flex) or(display: flex) {
       /*自己的样式 */
}

• 5. 混用的例子

“or”和“and”混用，在@supports中“or”和“and”混用时，必须使用括号（）来区分其优先级

@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) {
     /*自己的样式 */
}
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) {
         /*自己的样式 */
}

“or”、“and” 和 “not” 混用
@supports (display: grid) and (not (transition-property: color) or (animation-name: foo)){
/*自己的样式 */
}