项目总结与学习——css篇

一：css篇：

1.css命名规范：

不要用通用命名，类似：icon-center ; 请用长命名，避免与他人命名冲突。

 

2.css命名要求：

类似margin-top：20px 这种就直接用 .mb20{margin-bottom:20px;}  在原class后面直接加个.mb20 而不要重新又命名一个没有必要的class

 

3.颜色和一些边框提出来公用，直接用变量；

 

4.几种居中方式：

http://output.jsbin.com/tuqurugego

 

5.svg上面不要写样式，在它的父元素上面写即可。

若元素上有fill: currentColor; 则它的背景色则为父元素的color：red;

 

6.善用css选择器 empty属性：

http://output.jsbin.com/nesipilege

 

7.一些可以被键盘focus到的元素：

http://output.jsbin.com/wigejayohi

8.在Mac Retina屏幕下面，border为1px可能会识别不到，用border: 1.2px;

9.box-sizing  两种属性：

box-sizing: content-box;
box-sizing: border-box;

10.border和opacity
当border：1px solid #000；

遇上opacity: 0.4之类的会有兼容性问题：

解决办法：border: 1px solid rgba(0,0,0,.5);