CSS的10个基本知识点
阅读:4792 次 编辑日期:2013-11-05
目录:
概述:
在构建一个网站的过程中,CSS是最为基本的一项技能,虽然基本简单,但是在开启我们的CSS旅程之前,现在巩固一下CSS的基本知识点。
关于样式的优先级问题:
!important > style > [ id > class > tag ];
关于IE的hack:
IE8:/9,IE7:*,IE6:_,这几个hack是逐级覆盖的,也就是说/9之后IE8、7、6全部受影响,*之后IE7、6受影响,_之后只有IE6受影响。如果要让IE8、7、6有不同的样式,例如宽度不一样:
.class{width:100px/9;*width:100px;_width:100px;}
一定要是IE8:/9,IE7:*,IE6:_的顺序。
关于块级元素与内联元素:
加了链接之后的图片有蓝框:
<img src="uw3c.pic" alt="uw3c" title="uw3c" border="0"/ >
加上
border="0"问题解决。顺便说一下,alt是图片显示不出来的时候显示的文字,title是鼠标移动到图片上时显示的文字;
相对定位与绝对定位:
相对定位是相对于自己的位置开始计算移动,绝对定位是依据浏览器左上角的0点开始计算移动,如果想让绝对定位相对于某个父节点为起点开始计算,需要把该父节点设置为相对定位。z-index只在定位(position)中起作用,普通节点是不起作用的。
关于display:none与visibility:hidden的与别:
相同点是这两个都可以让某个元素隐藏,但是不同点是display:none隐藏之后的元素不会占据页面的空间,而visibility:hidden之后虽然元素隐藏了,但是还占据原有的页面空间,页面中原来的位置,是一片空白。
文字超出边框的部分用"..."显示:
.wrap{ overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
伪类:hover的妙用:
鼠标经过需要替换背景图片(颜色)应该怎么弄?JS?当然有更简单的办法:
a{background:#000;}
a:hover{background:#f00;};
关于UL标签有默认留白问题:
如果是写了一个全新的CSS文件,如果在用UL的时候会发现会有默认的留白,严重的影响了我们的布局,那么改如何解决呢?,解决方法如下:
body,ul,li{margin:0;padding:0;}
关于CSS盒模型: