css奇淫技巧1

1、元素的margin的top、bottom及padding的top、bottom使用百分比作为单位时，其是相对父元素的宽度width的而不是我们想象的高度height；

• 拓展应用需要实现如下的不急，图片加载是需要时间的，加载完成前图片的占位高度为0，所以一般我们都给他定死宽高（pc）；但是在移动端，由于各机型分辨率相差太大，写死px是绝对不可能的，终究还得靠百分比来实现自适应：其实出现这种现象，我们可以巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

CM0E7LERRX@_4T9(GNF`TO2.png

2.宽度继承问题---- width：100%

当父容器里有 绝对定位 的子元素时，子元素设置width:100%实际上指的是相对于父容器的padding+content的宽度。当子元素是非绝对定位的元素时width:100%才是指子元素的 content ，其等于父元素的 content宽度。

3.font的缩写

body {
　　　　font: font-style font-variant font-weight font-size line-height font-family; 
　　}
//如下代码可以简写
body { 
　　　　font-family: Arial, Helvetica, sans-serif; 
　　　　font-size: 13px; 
　　　　font-weight: normal; 
　　　　font-variant: small-caps; 
　　　　font-style: italic; 
　　　　line-height: 150%; 
　　}
　body { 
　　　　font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif; 
　　}

4.css的优先级

• 基本规则是： 行内样式 > id样式 > class样式 > 标签名样式
  example:
  ``

5.currentColor ie9+

currentColor关键字代表原始的 color 属性的计算值。它允许让继承自属性或子元素的属性颜色属性以默认值不再继承。它也能用于那些继承了元素的 color
属性计算值的属性，相当于在这些元素上使用 inherit关键字，如果这些元素有该关键字的话。
currentColor-CSS3超高校级好用CSS变量

TOQB{_R%6X0)%YY`~Z_KO5Q.png

图片发自App

6.怎么实现除了第一行的缩进

image.png

image.png

7.你不一定了解的var

大家肯定都知道var javascript弱类型声明变量用的，看下面的写法。

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

css 也能用var？这不像是sass，less啊，对你没看错这个是原生的css写法。兼容性目前比较差，ie不支持。有兴趣可以去看下张鑫旭的css，css3原生var变量

css var兼容性.png