CSS技巧及常见问题列表

1. 1、善用css缩写可以减少页面文件大小，提高下载速度，同时使代码简洁可读。
   如：
2. div{
3.     border-top:1px solid #cccccc;
4.     border-left:1px solid #cccccc;
5.     border-right:1px soli #cccccc;
6.     border-bottom:1px solid #cccccc;
7. }

复制代码

可以写为

1. p{border:1px solid #cccccc}

复制代码

再如：

1. div{
2.         margin-top:10px;
3.         margin-right:20px;
4.         margin-bottom:30px;
5.         margin-left:40px;
6. }

复制代码

可以改写为：

1. /*注意上、右、下、左的书写顺序*/
2. div{margin:10px 20px 30px 40px}
3. /*注意，数值与单位不能有空格，每个值之间用空格隔开*/

复制代码

(详细请参考：css2参考手册、常用css缩写总结)

2、可以同时为一个html元素的class属性设定多个规则(多重class定义)。
通常我们写法为：<p class=”a”></p>
实际上我们可以为p元素指定多个规则，如：

1. CSS：
2. .a{…}
3. .b{….}
4. HTML：
5. <p class="a b">该元素同时包括a和b中设定的样式</p>

复制代码

注意：多个规则之间用空格分开。

3、明确定义单位，除非值为0
忘记定义尺寸是css初学者新手普遍存在的问题。在html我们可以写width=”100”，但在css中应该给出一个准确的单位。 如：width:100px;height:50px;font-size:9pt ，0值除外，因为不论对于任何单位。0值的大小都是相等的。

注意：不要在数值和单位之间加空格。

4、区分大小写
在xhtml中，css定义的元素名称是区分大小写的，class和id的值在html和xhtml中也是区分大小写的，所以为了避免错误，推荐一律使用小写。
如#aaa,与#AAA是不同的，在xhtml中，p和P也是不同的.他们之间不会覆盖。
如果在css中定义了#aaa，在html元素中使用AAA来应用将不能得到#aaa中定义的样式。
示例代码：

1. CSS:
2. #aaa{border:1px solid #ccc}  
3. HTML:
4. <div id="AAA">显示不出来1个像素的边线</div>

复制代码

5、CSS的最近优先原则
如果对一个元素定义了多次样式，则以最近的一级优先，最近一级的样式将覆盖其他的样式定义。
如：

1. CSS:
2. p{color:red}
3. .blue{color:blue}
4. .yellow{color:yellow}
5. HTML:
6. <p>此处显示为红色</p>
7. <p class="blue">此处显示为蓝色</p>
8. <p class="blue" style="color:green">此处显示为绿色</p>
9. <p class="blue yellow">此处显示为黄色</p>

复制代码

注意：
（1）注意样式的几个优先顺序(优先级由上至下递减)：
--元素style设定
--head区<style></style>中的设定
--外部引用css文件
（2）优先级不是按访问顺序来设定的，而是又css中的声明顺序来设定的。
如上例中<p class="yellow blue">此处显示为黄色</p>也显示为黄色，因为在css定义中.yellow在.blue的后面。

6、使用子选择器减少id和class的定义
例如：

1. #contain{..}
2. #contain_ul{...}
3. .contail_li{...}
4. <div id="contain">
5.         <ul id="contain_ul">
6.                 <li class="contain_li"></li>
7.                 <li class="contain_li"></li>
8.         </ul>
9. </div>

复制代码

可以更改为：

1. #contain{..}
2. #contain ul{...}
3. .contain ul li{...}
4. <div id="contain">
5. <ul>
6.         <li></li>
7.         <li></li>
8. </ul>
9. </div>

复制代码

7、不要给背景图片路径加引号
将background:url("xxx.gif")改为background:url(xxx.gif)
因为对于部分浏览器加引号反而会引起错误。

8、背景图片的路径是相对与当前css页面的路径。

例如：
有如下目录结构
|--images
   |--xxx.gif
|--css
   |--xx.css
|--index.html
代码内容
index.html引用xx.css文件。<link rel="stylesheet" href="css/xx.css" />
xx.css要引用xxx.gif图片其写法为：background:url(../images/xxx.gif)

9、使用组选择器为不同元素应用相同的样式
如h1,h2,h3,div{font-size:16px;font-weight:bold}
则h1,h2,h3,div元素的样式都为字体16像素，字体粗体

10、书写正确的链接样式
当用css定义链接的各种状态时，一定要注意其书写顺序，即：:link :visited :hover :active。
如果不按照该顺序书写可能无法达到自己希望的效果。为了记忆该顺序我们抽取每个单词的首字母：L V H A，你可以通过记忆LoVe,Hate,两个单词来记住其顺序。

11、禁止内容换行与强制内容换行
在表格或层中我们可能希望内容不换行或强制换行，我们可以通过一些css属性来达到这些要求。
禁止换行：white-space:nowrap
强制换行：word-wrap: break-word; word-break: normal;

12、区别relative和absolute
Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认 依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位， 位置将由TRBL决定。

Relative，CSS中的写法是：position:relative;  他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以 BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

13、区别div和span
div是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。
span是一个内联元素，没有实际意义，它的存在纯粹是为了应用样式，给一段内容加上<span></span>标记可以通过在span上定义样式来设定其内容的样式。

14、区别display和visibility
display:none和visibility:hidden都可以隐藏一个元素
但visibility:hidden只是隐藏了元素的内容，但其使用的位置空间仍然被保留。
而display:none则相当把元素从页面中去除，其占用位置也将被删除。

 

**********************************************************************************************************************************

1.div的垂直居中问题

vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

2. margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
例如：
<#div id=”imfloat”>
相应的css为
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}

3.浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;

4 IE与宽度和高度的问题

IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两 个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

5.页面的最小宽度

min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当 做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类, 然后CSS这样设计：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

6.DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
<div id="box">
<div id="left"></div>
<div id="right"></div>
</div>

7.IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

8.float的div闭合;清除浮动;自适应高度;

① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;)
这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签 闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会 产生异常。 并且将clear这种样式定义为为如下即可： .clear{ clear:both;}

②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义：
.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:
<div id=”page”>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>
比 如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决
<div id=”page”>
<div id=”bg” style=”float:left;width:100%”>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>
</div>
再嵌入一个float left而宽度是100%的DIV解决之

④万能float 闭合(非常重要!)
关 于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下 代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.
/* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}

9.高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。
例：
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box">
<p>p对象中的内容</p>
</div>
解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

10 .IE6下为什么图片下有空隙产生

解 决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.

11.如何对齐文本与文本输入框

加上 vertical-align:middle;
<style type="text/css">
<!--
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
-->
</style>

12.web标准中定义id与class有什么区别吗

一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.

二.属性的优先级问题
ID 的优先级要高于class,看上面的例子

三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

13. LI中内容超过长度后以省略号显示的方法

此方法适用与IE与OP浏览器

<style type="text/css">
<!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}

-->
</style>

14.为什么web标准中IE无法设置滚动条颜色了

解决办法是将body换成html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
</style>

15.为什么无法定义1px左右高度的容器

IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如verflow:hidden | zoom:0.08 | line-height:1px

16.怎么样才能让层显示在FLASH之上呢

解决的办法是给FLASH设置透明
<param name="wmode" value="transparent" />

17.怎样使一个层垂直居中于浏览器中

这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
<style type="text/css">
<!--
div {
position:absolute;
top:50%;
lef:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>

 

 

 ******************************************************************************************************

1.去除img之间间隙的一些方法

img写成一行；display：block；img后加<br />；给图片的父类font-size:0

2.ul text-indent:45px; letter-spacing:1px;

3.李氏居中布局给body加width

4.background：颜色 背景图

 

5.margin-left:auto:表示左边有多少就margin多少

6.做导航时加入用图片的话，a中要放上文字，然后将其滚蛋text-indent:-9999px;

 

 

7.cursor:pointer;鼠标变成手型   ie6不支持li：hover

###不会跳定点

 

8.一个盒子里面一般不能为空的

9.相对定位于绝对定位的结合使用，一般不要直接相对于body进行定位，因为这样会因浏览器尺寸而有所不同

 

10.少用margin，ie6老出问题

 

11.li a:hover{padding:1px}

 

12.两个div设置margin的问题,解决办法：外div加overflow：hidden；

 

 

子元素与父元素上边缘重叠margin-top就会出现这个情况，父元素加个overflow：hidden就行了

13.ie不同版本浏览器对行高的解析不一样

 

14.dl dt dd的使用，一般用于图文并茂

 

 

15.解决定位中出现的刚打开错位问题，给body加relative

 

16.用给盒子加背景的方法可以检测宽度等等

宽度用%的形式有时会省事好多喔

 

17.内联元素也是可以浮动的喔，设置日期列表是有的做洛

 

 

 

18.设置padding后 width还可以auto或去掉，不一定非得拿着计算机格纳算

 

三列布局中间和右边一列用定位

清除浮动ie会出现不兼容的问题，此时用定位解决

19.浮动元素的父元素要有高度或者无高度但需overflow：hidden

20.当父子div同时设置了margin-top,只有父div会起作用，并且是两个margin-top中的大值

21.span行内元素：竖直方向的margin，padding不可以设置，水平方向倒是可以的；width和height也不可以设置！

22.段落缩进：text-indent

初始化代码：雅虎的一个工程师提供的。腾讯。网易。淘宝等等的

23.在新闻网站中h与p经常成对出现

图片是内联替换元素，替换元素是可以设置宽和高；一般使用时先将其转为block，然后清除margin等；

24.li前面的样式我们一般用背景图片+padding的形式去使用，防止不兼容现象的发生！

25.超链接和图片的title属性表示 鼠标放上去要显示的文字

26.切记描点是相对于a标签来说的

27.link，visited，hover，active（一般不必写），注意顺序（LVHA），a:link可以简写为a

28.图片的边可以通过border或padding加背景实现

29.当出现兼容性问题时，首先考虑的是：是否明确声明

 

iebug常见bug及原因（搜索ie6的更多bug）

1.盒模型bug   使用严格doctype

2.双倍margin bug  _display:inline

3.不认识a:link   不加：link

4.3像素margin bug   规范浮动与清除浮动

border-radius画圆角喔

z-index属性

当使用input时一定要有name属性喔，当是radio，checkbox，select、option等等时还要有value值喔

 

百度地图生成器：http://api.map.baidu.com/lbsapi/creatmap/index.html

 

 

如果给父元素设置了overflow:hidden或overflow:auto，在IE7、IE8、FF中能起到清除浮动的作用，也就是说父元素能正确适应高度了，即使里面有浮动元素也一样有效。但是在IE6中，却是无效的,因为layout没有触发，这时只需添加一个zoom:1或height:1px就可以了

对于标准浏览器我们还可以使用after伪类的方法来清除浮动

父div:after {content:".";display:block;height:0;clear:both;visibility:hidden;}

 

 

1.替换元素：img、input、select、textarea、object、form等等可以设置宽和高

 

 

当子元素有浮动的时候一定要给父元素加上高或者overflow