CSS笔记

一个pscc的插件 可以识别图层的样式并返回css3的格式
css3Ps
下载后解压，文件放到pscc安装目录的下Required/CEP/extensions下
使用方法：点击选中图层，打开菜单栏里的窗口/拓展功能/css3ps ,点击小窗口,会弹出新页面，其中显示css代码(但是颜色识别有点问题，另外版本有些老)

---

浏览器兼容不要手写,用插件自动处理

---

chrome 开发者工具面板里的设置
勾选show user agent shadow DOM可以查看内部结构

---

.text{
    font-size: 20px;
    line-height: 20px;
    margin-top: 40px;
    width: 200px;
    border: 1px solid #3397ff;
 }

相比于上面的，下面的会更好，rem同样， 1px时直接1px不用转换

.box{
    font-size: 20px;
}
.text{
    font-size: 1em;
    line-height: 1em;
    margin-top: 2em;
    width: 20em;
    border: 1px solid #3397ff;
}

---

.text{
    color: #3397ff;
    border: 1px solid #3397ff;
}

使用currentColor会使用当前的元素的color属性

.text{
    color: #3397ff;
    border: 1px solid currentColor;
}

---

.box{
    background: #333333;
    border: 1px solid currentColor;
}
.text{
    line-height: 2em;
    background:inherit;
    border:inherit;
}

inherit 继承（记忆 in-her-it）继承父元素的元素（任何属性都可以继承），父元素因为浮动定位等产生的属性变化也会继承
继承时最好属性写全如background-color

.box{
    background: #333333;
    border: 1px solid currentColor;
}
.text{
    background-color:inherit;
    border:inherit;
}

---

预处理器 sass less stylus等 谁用谁知道

margin,padding等设为百分比时是以父级的width为基准，不涉及height

counters 计数器
css自带计数器,配合定位，列表 可实现编号后为顿号的效果

ul{
  counter-reset: section;//设置计数器
  list-style:none;
}
li:before{
   counter-increment: section; 
  content: counter(section) "、";
}

---

pointer-events: none;
取消点击事件

---

一个很奇妙的地方（背景）
一个很神奇的地方（动画）

---

top:calc(50% - 40px); calc属性可以计算

透明颜色
color:transparent;

---

transition的贝塞尔曲线
transition:cubic-bezier(.25,.1,.25,1)