css reset

目前有两种reset,一种是属于修正式的reset,这个以normalize.css为代表;另一种就是我们常用的清零式reset如最简单的

1
*{margin:0;padding:0;}
,目前各个框架都是先以normalize为基础,然后实现清零。 清零之外,我们会给html或body添加些font属性或背景,也会添加一些基础的类,方便使用,如
1
clearfix

ie bug集合 关于如何给各种浏览器打bug,可查询: browser hacks 因为里面有很多问题都是ie6/7的,所以大家多少都应该了解过,应该没什么问题,如果问题比较多的话,我再考虑ppt分享下。 http://www.qianduan.net/ie6u002639s-bug-amended-10-tips.html

清除浮动包括清除子元素的浮动和清除上级元素的浮动,其中清除上级元素的浮动,只需设置clear为both(或left,right)就可以了,而清除子元素的浮动则可以用空标签、clearfix或overflow。因清除上级元素的浮动比较简单,而空标签法清除子元素浮动会增加额外标签,所以推荐使用clearfix和overflow。

除此之外,

1
display:inline-block;
也可以清除子元素浮动。

清除浮动解决方案

PostCSS

https://github.com/postcss/postcss 根据caniuse(https://github.com/postcss/postcss )的数据,自动生存浏览器前缀 grunt-autoprefixer: https://www.npmjs.com/package/grunt-autoprefixer gulp-autoprefixer: https://www.npmjs.com/package/gulp-autoprefixer

flex应用场景demo见附件

深入了解flex

### 图文混排解决方案](http://www.w3cplus.com/solution/imagetextmix/imagetextmix.html)

除上述方法外,还有昨天发的flex方法

css3 学习资源

先放个资源集合,以后再整理个单个属性的关键点:

列表类解决方案

http://www.w3cplus.com/solution/itemlist/itemlist.html 同样,这个也可以用flex来解决

关于css的class命名

1、某些移动端的浏览器不支持

1
:checked ~ .ele
,但是支持
1
:checked + .ele

border-radius

1、一般来说我们给的圆角弧度都是圆形的,如果需要弧度为椭圆的,则使用

1
/
分割x轴的半径和y轴的半径如:
1
border-radius: 18px / 13px

2、在高级浏览器的父元素设置圆角再加上

1
overflow:hidden
,则子元素设置的背景是不会溢出的,圆角表现良好。但是在部分低端浏览器(如安卓浏览器,uc浏览器等)则不行,这就还得为子元素也设圆角

3、某些老版本的浏览器img图片不支持border-radius

4、ie9如使用滤镜模拟渐变背景,颜色将会溢出,设置的圆角

box-shadow

1、内阴影使用关键词

1
inset

2、多值的时候第一个值的层级最高

3、单边shadow可以使用spread值来模拟,详见Use spread to manipulate the box-shadow

4、与下面的伪类结合,可以生存超强阴影,详见box-shadow阴影

伪元素before和after

1、css3中为了区分伪元素和伪类,规定伪元素使用

1
::
,而伪类则使用
1
:
,但是css2.1是不分的,一律采用
1
:
。所以对于before和after伪元素如果只考虑移动端的话最好写成
1
::before
,
1
::after
,而如果还要考虑pc的ie8的话,则写成
1
:before
1
:after

文字特效

1、text-shadow文字阴影

2、@font-face icon

2、中文@font-face不是梦

3、使用mask属性美化文字

color

1、rgba,根据alpha的值设置透明度 2、opacity设置的透明度是整体的透明度,包括里面所有的子元素,而且子元素不可覆写。除z-index外,设置opacity也会影响元素的层级 3、如需要设置颜色的透明度,可使用rgba,如果是做动画的渐隐则选择opacity

单位

1、如果只支持ie8+,建议使用

1
*{box-sizing:border-box;}
,这个尤其是在移动端,方便百分比的计算

2、单元计算属性

1
calc()
,目前兼容性不是很好,不建议使用

3、rem相对与跟元素的单位,一般先设置

1
html{font-size:62.5%}
,相当于10px。 然后某个元素需要14px,只需设置1.4rem。不过默认chrome浏览器是不支持12px以下的字体的,所以如果设置的font-size小于1.2rem,那么就相当于是1.2rem,而且除字体外,其余宽度高度的rem计算则以最小为12px为标准计算,如14rem,就不是140px,而是168px

4、Viewport units (vw, vh, vmin, vmax),兼容性不太好,在不久的将来将会是一大利器

gradient

online gradient create

多背景图片

1、第一个层级最高,如需要设置背景颜色得在最后一个上面设置

2、background-size设置百分比值的时候,是元素的百分比,而不是背景图片的百分比,而px和em均为背景图片的。

transform

1、设置transform之后,会影响其子元素的position定位参考

2、transform的skew,rotate,translate,scale设置先后,会影响到其transform-origin的值,如形成正方体有两种办法:第一种先translate到其位置,然后再设置各个旋转;第二种是先在原地旋转好,再设置translate值,代码如下:

1
2
3
4
5
6
.front  { transform: rotateY(   0deg ) translateZ( 100px ); }
.back   { transform: rotateX( 180deg ) translateZ( 100px ); }
.right  { transform: rotateY(  90deg ) translateZ( 100px ); }
.left   { transform: rotateY( -90deg ) translateZ( 100px ); }
.top    { transform: rotateX(  90deg ) translateZ( 100px ); }
.bottom { transform: rotateX( -90deg ) translateZ( 100px ); }

3、关于3d transform,设置perspective值可以形成静态的3d视觉效果,而如果需要动态的3d交互效果,则需要再在外包裹一层设置

1
transform-style:preserve-3d

4、可使用

1
transform:tranlateZ(0)
启动3d加速

5、skew没有3d的,而rotate3d的时候是四个参数(如:

1
transform:rotate3d(3,1,0,10deg)
),前三个分别为x、y、z倍率,最后一个为角度基数,旋转的角度为响应的倍率乘以角度基数

6、Advanced CSS3 2D and 3D Transform Techniques

7、CSS 3D transforms

动画

webkit前缀的浏览器一开始不支持伪元素before和after的动画

关于动画加速,以后将可以使用will change,现在一般开启3d加速

transition

1、以前

1
background
是不能作为
1
transition-property
的,如果要运动,可以考虑改变background-position的位置

2、关于步骤动画,可以使用

1
transition-timing-function
的step函数

3、关于hover动画,定义在选择器中和定义在选择器hover状态时是不同的

4、当元素设置为

1
display:none;
时,需要先把元素设置为显示状态,然后在回调函数中使用transition动画。直接从none到显示的时候是会忽略transition动画的。如果使用jquery可以使用animate的属性中设置
1
display:block;
回调函数再添加属性变化的class

1
$(ele).animate({'display':'block'},300,function(){$(this).addClass('ele-transition')})

5、All you need to know about CSS Transitions

animation

1、CSS3动画帧数科学计算法

2、Using CSS animations

3、animatable

3、

1
animation-fill-mode
可以设置动画结束在哪个状态

flex

因为flex既可以设置横向布局,也可以设置纵向,所以一般不用x,y轴来标识对齐方式,而是用主轴和次轴

1、uc浏览器的等分会根据本身宽度变化,所以不可靠(如导航的等分,如果每个item都是4个文字,而有一个是6个,那么6个宽度会大点)

2、低端浏览器不支持flex子元素设置width

3、设置flex布局后,如果某个直接子元素设置绝对定位,可能会参与flex的布局

4、第一版本不支持子元素单独设置对齐方式

5、flex布局的性能不是很好

6、flex属性目前三个值兼容性不好

object-fit/object-position

mask

multi-column

这个文本排列使用情况比较少,最简单的就是你得保证能在一屏显示,如果超出一屏,则会影响体验

Using CSS multi-column layouts

media queries

CSS media queries

windows版本的dash https://velocity.silverlakesoftware.com

http://www.cutterman.cn/ http://css3ps.com/Download/

svg

先通过svg turorial了解下怎么去创建常见的svg图形,然后理解下svg的viewport,再实战于图标,最后制作个svg线性小动画

更多参考资料:A Compendium of SVG Information