精通css学习记录

#字体

 * 无衬线字体(Sans-serif)：Helvetica,Arial,'Lucida Family',Verdana,Tohoma,'Trebuchet MS'
 * 有衬线字体(Serif)：Georgia,Times
 * 等宽字体（monospace），常用于计算机书籍的代码板块，每个字母宽度相等
 * 梦幻（fantasy）和草体（cuisive）在网页上不常用，因为浏览器间差异大
 * 中文：宋体、微软雅黑、华文细黑

#背景图像

background-position:使用px单位，是左上角顶点相距。而使用百分数，是对应点相距。

1.圆角边框的问题
定宽圆角框： 用首尾两个块级元素的背景去遮住box的上下背景。
不定宽圆角框： "滑动门技术"
不同颜色的下通用的圆角边框： “山顶角”
css3: 多背景法、border-radius

2.投影
css3： box-shadow，并且可以和border-radius合用产生圆角阴影。
img标签外面套个容器div,对div设置个背景图案是带有投影，并让div浮动产生包裹img的效果（这样就不用显示设置div的width和height了）。设置img的display为block，并用margin对他产生小偏移。也可以对图片进行相对定位。

3.视差滚动
几层div的嵌套，每层都有各自的有透明通道的背景图。让她们repeat，然后移动的background-position的百分数不一致。

4.让logo作为背景，里面的文字以text-indent超级大的负数缩进，让它既能被搜索引擎搜索到，由能让人视觉看到图片。

#透明度问题

1.opacity和rgba的区别：opacity对元素设置了不透明度，除了背景之外，里面的内容和子元素都会拥有这样的透明度。而rgba可以专门为其中一个属性设置透明度，比如background

2.ie6的filter

#对超链接的合理使用

1.使用注意事项：

 * 超链接的元素，搜索引擎会自动去点击，所以，一定不要把有些会影响数据的操作用a标签来做。
 * 要注意超链接和锚点都是一个元素，避免给锚点也设置成了链接的样式。所以要使用伪类。
 * 为了提高可使用性，比如有些只是用键盘来操作的，最好让:focus和:hover设置为一个样式。

2.伪类:link指的是未被访问过的链接，而不是作为链接的a元素，所以和visied交换位置其实也无所谓。同时要和锚点区分，需要love连用

3.为了达到更好的兼容性，所以要使用a的伪类来做翻转效果。所以display要设置为block;

4.使用line-height而不是height设置变成按钮的链接，即达到了垂直居中，又能够撑开它的高度。

5.ie7和其它对:hover的认识不一样，ie7不能作用在它的子元素上面。所以想达到它子元素现身的效果，可以给她加上:focus和:active，让它能够在点击了之后它的子元素可用。


#列表

1.列表项目符号因为位置的可控性不强，所以一般采取关闭符号的方式。然后在左边给予内边距，把背景图像用作项目符号。

2.用无序列表做导航，用有序列表做分页。

3.一般在列表中嵌套a标签，让a标签实现翻转的效果。

转载于:https://www.cnblogs.com/supersoup/p/4865596.html