CSS
2020-08-05 本文已影响0人
李秀成
support
判断CSS 是否支持某种属性
@supports (display: grid) {} // 支持grid
@supports not (display: grid) {} // 不支持grid
@supports (display: table-cell) and (display: list-item) {}
@supports (display: table-cell) or (display: list-item) {}
media
媒体查询，查询设备符合某种属性后执行某些代码
@media screen and (max-width: 300px) {}
calc()
函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算；
width: calc(100% - 100px);
1rem、1em、1vh、1px
- rem：长度计算相对于根元素<html>元素设置的字体大小
- em：长度计算相对于父元素设置的字体大小
- vh/vh：视窗的宽度和高度，相当于 屏幕宽度和高度的 1%
- px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的
盒模型
盒模型的组成，由里向外content,padding,border,margin
在IE盒子模型中，width表示content+padding+border这三个部分的宽度
在标准的盒子模型中，width指content部分的宽度box-sizing box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
画一个三角形
利用border-color的transparent的透明度计算
border-color: transparent #0099CC transparent transparent;
