有关CSS

如何写出更好的CSS？（CSS是从右往左进行解析）

①避免使用*(全局)选择器。（耗费性能）

②CSS选择器的层级不易过深，越少的话解析速度会越快（由于是从右往左，找到一个还要去找父级，肯定慢了，特别是后代选择器）

③利用css的继承

④css模块化：进行分组，一类的放一个文件

⑤尽量复用一些重复的CSS样式

⑥尽量使用简约、紧凑的语法（就是CSS的缩写，减少代码量，提高性能），就是比如padding-top、padding-bottom，这些属性可以写作一个padding概括了

⑦页面CSS书写顺序，按照定位、元素层级、浮动、边框、颜色、背景等要素书写

如：.someclass{

/* Positioning */

/* Display & Box Model */

/* Background and typography styles */

/* Transitions */

/* Other */

}

可以参考：https://www.ibm.com/developerworks/cn/web/1109_zhouxiang_optcss/

怎么样拆分组织CSS代码？

① 同类型的样式放在一个CSS文件

② 可以对页面的结构进行写CSS文件

什么时候用ID和什么时候用class

ID权重高，而且是唯一的，class具有普遍性

class尽量用在可复用上，用于样式定义

ID更多是用来做一些js操作

盒子模型

一些布局相关

flex布局：

rem布局：

BFC布局：

CSS3的一些新特性

CSS3边框：border-radius、box-shadow、border-image

CSS3背景：background-image、background-size、background-origin、background-clip

CSS3渐变：Linear Gradients和Radial Gradients，在background属性上使用

CSS3文本效果：text-shadow（文本阴影）、box-shadow、text-overflow（文本溢出时发生什么ellipsis是省略号）、word-wrap（换行break-word允许长文本换行）、word-break（单词拆分换行，break-all ，就是单词可以分开换行）

text-justify（text-align：justify用了这个才能用text-justify）

CSS3字体：设置@font-face 规则，里面有font-family和src

CSS3 2D转换：transform属性，里面有translate()（移动，根据X，Y轴）、rotate()（旋转，顺时针为正）、scale()（缩放，对应X，Y轴缩放多少）、skew()（倾斜）有skewX和skewY、matrix()（是上述的集合）这些方法

CSS3D转换：rotateX()、rotateY()

CSS过渡：transition（后面是最终的结果）有四个属性

一是过渡名称transition-property，

二是所花的时间transition-duration，

三是过渡效果的时间曲线transition-timing-function，默认是ease

四是过渡效果何时开始transition-delay，默认0

CSS3动画：@keyframes 规则  animation是使用它

@keyframesmyfirst{

from{background:red;}

to{background:yellow;}

}

animation是所有动画属性的集合

animation-name规定 @keyframes 动画的名称 

animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0 

animation-timing-function规定动画的速度曲线。默认是 "ease" 

animation-delay规定动画何时开始。默认是 0 

animation-iteration-count规定动画被播放的次数。默认是 1 

animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal" 

animation-play-state：是否正在运行或暂停

CSS3 多列： column-count、column-gap、column-rule-style、column-rule-width、column-rule-color、column-rule、column-span、column-width

CSS3：box-sizing属性（border-box）可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)

CSS3弹性布局

CSS3 多媒体查询：CSS3 根据设置自适应显示。

媒体查询可用于检测很多事情，例如：

viewport(视窗) 的宽度与高度

设备的宽度与高度

朝向 (智能手机横屏，竖屏) 。

分辨率

响应式布局：

最后我们来总结下响应式布局的实现原理

首先我们应该遵循移动端优先，交互和设计以移动端为主，pc则作为移动端的扩展，一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、多媒体）

1.响应式布局         

     1.Meta标签定义           

     2.使用MediaQueries适配对应样式      

  2.响应式内容            

     1.响应式图片