CSS入门级指导
[b]为什么这个P撑不开DIV呢?[/b]解决的办法是在div 与 p 之间插入<div style="clear:both"></div>清除掉这个p的浮动;
[b]浮动(float)后外边距×2问题?[/b]
浮动(float)后本来外边距10px,但IE解释为20px,解决办法是加上;display:inline
[b]浮动出错?[/b]
浮动(float)以后一定要给层定义width;
[b]IE6下为什么图片下方有空隙产生?[/b]
解决这个BUG的方法也有很多，可以是改变html的排版，或者设置img 为display:block;或者设置vertical-align属性为 vertical-align:top | bottom |middle |text-bottom
都可以解决.
[b]IE6下这两个层中间怎么有间隙?[/b]
这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;
[b]list-style-image无法准确定位的问题?[/b]
这个list-style-image的定位问题也是经常有人问的，解决的办法一般是用li的背景模拟，这里采用给li中的元素相对定位(;)的方法也可以解决
[b]LI中内容超过长度后以省略号显示的方法?[/b]
===================Code Start===================
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
===================Code End===================
此方法适用与IE与OP浏览器
[b]web标准中定义id与class有什么区别吗?[/b]
一、web标准中是不容许重复ID的,比如 div 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.
二、属性的优先级问题
ID 的优先级要高于class,看上面的例子
三、方便JS等客户端脚本，如果在页面中要对某个对象进行脚本操作，那么可以给他定义一个ID，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个ID来得简单.
[b]如何垂直居中文本？[/b]
给容器设置一个与其高度相同的行高就可以了height:30px;line-height:30px;
[b]如何对齐文本与文本输入筐？[/b]
遇到此种问题，设置文本框的vertical-align:middle;就可以了。
[b]为什么FF下面不能水平居中呢?[/b]
FF下面设置容器的左右外补丁为auto就可以了。
[b]为什么web标准中IE无法设置滚动条颜色了?[/b]
解决办法是将body换成html。
===================Code Start===================
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;
}
===================Code End===================
[b]为什么无法定义1px左右高度?[/b]
IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px
[b]怎么样才能让层显示在FLASH之上呢?[/b]
解决的办法是给FLASH设置透明<param value="transparent" />或者<param value="opaque" />
[b]怎样使一个层垂直居中于浏览器中?[/b]
这里我们使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二
[b]如何让三列横向排列?[/b]
横向排列DIV可以使用浮动的方式比如float:left,或者用内联方式，还可以绝对定位对象等等.
1、3个都float:left;
2、
===================Code Start===================
<style>
div {
;
top:50%;
left:50%;
margin:-100px 0 0 -300px;
}
</style>
<div style="background:#404040;width:200px;height:200px;">1</div>
<div style="background:#FD7C03;width:200px;height:200px;margin:-100px 0 0 -100px;">2</div>
<div style="background:#eee;width:200px;height:200px;margin:-100px 0 0 100px;">3</div>
===================Code End===================
3、
===================Code Start===================
<style>
span {
margin:0;
display:-moz-inline-box;
display:inline-block;
width:300px;
height:200px;
background:orange;
}
</style>
<span></span>
<span></span>
<span></span>
===================Code End===================
[b]通用的加入收藏夹代码？[/b]
经常有朋友说他的加入收藏夹代码只支持IE,下面的例子可以很好的解决这个问题,在IE6-7. FF2.0 OP9.0中测试通过
===================Code Start===================
<script type="text/javascript">
// <![CDATA[
function bookmark(){
var title=document.title
var url=document.location.href
if (window.sidebar) window.sidebar.addPanel(title, url,"");
else if( window.opera && window.print ){
var mbm = document.createElement('a');
mbm.setAttribute('rel','sidebar');
mbm.setAttribute('href',url);
mbm.setAttribute('title',title);
mbm.click();}
else if( document.all ) window.external.AddFavorite( url, title);
}
// ]]>
</script>
<a href="">加入收藏夹</a>
===================Code End===================
页:
[1]