CSS小笔记

  本文章主要写些关于CSS的笔记，某些段落可能比较浅显，毕竟是本人从小白到菜鸟记录的。

虽然网页的特效现在一般还是用JS来写，但是不得不承认的是，CSS3的特效简单且效果好，主要缺点是不兼容IE，不过相信随着IE的升级，总会有兼容的一天的。就本人来说，同样的一个有特效的页面，用CSS3写可以比用JS写节省近50%的时间，且我认为还有很大进步空间。

1.兼容的快捷输入。

例：先在style输入‘transition’

transition 
按TAB键==>效果如下

-webkit-transition: ;

-moz-transition: ;

-ms-transition: ;

-o-transition: ;

 transition: ;
接着输入属性==>

-webkit-transition:   all   1s   linear  ;

-moz-transition:   all   1s   linear  ;

-ms-transition:   all   1s   linear  ;

-o-transition:   all   1s   linear  ;

transition:     all 1s linear    ;  
会发现所有的兼容语句同步书写，是不是很方便！

2.关于网页的图片特效问题

一般的图片特效可能是换图，改变图片本身大小，如果运用到CSS3的话，甚至会有旋转之类的特效。本人的建议是将此类图片用img写，而不是图方便用background写，因为当你需要改变图片大小的时候，你会发现改变背景图片非常困难，而img标签的话，直接改width,height等属性即可。当然如果图片上有文字之类的，视情况而定。

3.怪异型盒子

box-sizing: border-box; 
加了这句之后，盒子宽高将包括padding,border的长度。例设置了：

box-sizing: border-box;

width: 100px;

padding: 10px;  
盒子宽度是100px,内容为80px；因为padding左右各占10px。

4.placeholder属性

用于input中可输入内容的TYPE设置，设置提示的文字，点击输入框后消失。

注：写行内式

5.！important

若现在有一张大图，但你想要适应的盒子，可设置background-size：cover；来实现，但有时在由于在其他地方设置了优先级较高的样式时，为了避免麻烦再去查找之前设置的样式，可以加上！important强行提高优先级。如下：

background-size: cover !important; 

6.文本域的锁定大小

文本域作为输入较多文字常用的input类型，其可以随意缩放的属性有时需禁用；具体只需加一句语句即可：

resize: none;

7.多背景图加背景颜色

不太常用，具体方法是在最后一个背景图的url后 ‘空格’ 写上即可。

div{

    width: 500px;height: 500px;

    background: url(img/one.png) no-repeat,

                url(img/two.png) no-repeat 100px 200px #6495ED;

   }  
效果见下图

先写这么多，有时间或遇到较少见的再补上。