CSS各种问题积累
1.background与background-color</p>
这两者都可以这么用:background:red; background-color:red; 其实background-color只是background的一个子项而已。完整的background包括
background-color
background-image
background-repeat
background-attachment
background-position
完整的写法是这样的background: #00FF00 url(bgimage.gif) no-repeat fixed top;
2.第一条中的background属性值的第一个在css3中可以是各种过渡效果的,比如线性过渡、径向过渡。例如代码:
background: -moz-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);
详细的请看:http://www.cnblogs.com/lhb25/archive/2013/02/24/css3-radial-gradient.html
3.上面的background-image属性还真是不好搞了,一定了解之后发现在过渡效果时-webkit-的写法很麻烦,-webkit-的过渡效果有两种实现,较传统的是-webkit-gradient(),较新的是-webkit-linear-gradient().由于-webkit-gradient()是所有写法中最复杂的,所以详细讲解,其它的应该就能轻松掌握了。
先看background-image:-webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(.5,rgba(0,255,0,1)),to(rgba(255,255,255,1)));
1. linear指出是线性渐变,当然还可以写radial,表示径向渐变。
2. 0 0,0 100% 这两组参数成对出现,表示开始的位置和结束的位置。0代表像素值,100%是相对位置表示法,指的是直到结束的位置。
3. from()与后面的to()是一对,但都是可写可不写的货,表示颜色值,关于它的参数可以直接填如#fff,或者transparent(透明)、rgba颜色值。
4. rgba色值的格式rgba(255,255,255,1),前三个参数不多说了,后面的1代表的是透明度,可以取0-1之间的数,但不能写成0%-100%
5. color-stop()意思是在指定的位置,放置一个指定的色值。.5在中段位置,也可以写成50%同样是指中段位置。当你用一系列的color-stop去描述色值分布时便可不用from,to方法了。
color-stop(0,transparent)=from(transparent),color-stop(1,transparent)=to(transparent)。但是当不是从0开始的,且没有from时前面的色值默认为第一个color-stop指定的色值。
4.background-size:20px 40px;其中第一个参数指的是width,第二个是height
5.word-spacing 与 letter-spacing
word-spacing指的是左右两个单词之间的距离;letter-spacing指的是左右两个字母之间的距离。
6.在css的position中常见的属性有这几个:absolute relative fixed static。
static : 默认,没有任何效果,top button等也不起作用
absolute:相对于它的非static父类的定位 (让出之前的位置)
fixed:相对于浏览器窗口的定位(以前一直觉得这时absolute实现的效果,其实absolute也是一种相对的定位方式)。
relative:相对与其父类的定位 (之前的位置还会保留)