冯海滨个人博客 - DIV+CSShttp://www.161818.cn/海滨旗下博客网站 - RainbowSoft Studio Z-Blog 1.8 Walle Build 91204zh-CN海滨网络版权所有 Copyright @ 2008-2009 座右铭：做事先做人，做人简单，做事勤奋！ Wed, 08 Sep 2010 15:16:29 +0800您需要了解的DIVCSS网页布局的8条面试题目a@b.com (happyfhb)http://www.161818.cn/post/493.htmlWed, 27 Jan 2010 20:26:45 +0800http://www.161818.cn/post/493.htmlCSSer与其他IT职位一样，在找工作的时候，都会面临着面试官提出的问题，或者给出的试卷。今天52CSS.com收集了常见的8条面试题目，希望对您有所帮助。

一、超链接点击过后hover样式就不出现的问题？

被点击访问过的超链接样式不再具有hover和active样式了,解决方法是改变CSS属性的排列顺序: L-V-H-A

二、IE6的margin双倍边距bug问题

例如：

 


<style type="text/css">
    body {margin:0;}
    div {float:left; margin-left:10px; width:200px; height:200px; border:1px solid red;}
</style>
 

 

浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline;

三、为什么中火狐浏览器下文本无法撑开容器的高度？

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：

 

div { height:auto!important; height:200px; min-height:200px; }

 

四、为什么web标准中无法设置IE浏览器滚动条颜色了？

原来样式设置：

 


<style type="text/css">
    body { 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>
 

 

解决办法是将body换成html

五、如何定义1px左右高度的容器？

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

六、怎么样才能让层显示在FLASH之上呢？

解决的办法是给FLASH设置透明:

 

<a href="http://www.chinaz.com/">:</a>
<pre lang="html" line="1">
<param name="wmode" value="transparent" />

七、怎样使一个div层居中于浏览器中？

 


<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>
 

 

这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二

八、firefox浏览器中嵌套div标签的居中问题的解决方法

假定有如下情况：

 


<div id="a">
<div id="b"> </div>
</div>
 

 

如果要实现b在a中居中放置，一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切正常；但是在Firefox中b却会是居左的。

解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为：margin: 0 auto;

]]>DIV+CSShttp://www.161818.cn/post/493.html#commenthttp://www.161818.cn/http://www.161818.cn/feed.asp?cmt=493http://www.161818.cn/cmd.asp?act=tb&id=493&key=e9efd8bediv中英文无法自动换行的解决方法a@b.com (happyfhb)http://www.161818.cn/post/487.htmlFri, 22 Jan 2010 21:31:39 +0800http://www.161818.cn/post/487.html问题：

在一个设定好宽度的div中，当我们输入的中文文字长度超过了设定宽度时，会自动换到下一行。但是，如果输入的是英文字母，那么，无论你div设定宽度为多少，英文字母都是不换行直接在同一行输出，导致div的宽度远远超出设定的大小。


原因：这是因为div中，英文字母之间没有空格的话，它会默认认为这是一个英文单词，所以单词就一次输出不换行。那么，难道我们得在每个字母中间加入一个空格来解决这个问题么？其实不用的，可以通过CSS实现。


解决办法：在div的style中设定word-break:break-all;即可实现自动换行。添加后的div代码大致如下


<div style="word-break:break-all;width:20px“ >现在这里的英文达到20px长度就会自动换到下一行了</div>
 

]]>DIV+CSShttp://www.161818.cn/post/487.html#commenthttp://www.161818.cn/http://www.161818.cn/feed.asp?cmt=487http://www.161818.cn/cmd.asp?act=tb&id=487&key=fadee9cb解决IE浏览器不支持min-height 的问题a@b.com (happyfhb)http://www.161818.cn/post/394.htmlFri, 02 Oct 2009 20:36:11 +0800http://www.161818.cn/post/394.html根据海滨的实践.

min-height样式IE是不支持的 唯有FF支持. 但是可以用下面的办法搞定最小高度问题.

height:auto!important; height:400px; /*假定最低高度是400px*/ min-height:400px;

]]>DIV+CSShttp://www.161818.cn/post/394.html#commenthttp://www.161818.cn/http://www.161818.cn/feed.asp?cmt=394http://www.161818.cn/cmd.asp?act=tb&id=394&key=efb3585cmin-height 用法a@b.com (happyfhb)http://www.161818.cn/post/393.htmlFri, 02 Oct 2009 20:31:59 +0800http://www.161818.cn/post/393.html以前的时候很少用到这个标签.

不过某些时候这个标签真的非常好.

不过 min-height IE6 IE 8 好像都不支持.未免有点可惜.

用法就是 设置某个层的最小高度. 当文章内容撑破这个高度的时候才自适应.

这样的好处就是最大化让网页变得美观.

]]>DIV+CSShttp://www.161818.cn/post/393.html#commenthttp://www.161818.cn/http://www.161818.cn/feed.asp?cmt=393http://www.161818.cn/cmd.asp?act=tb&id=393&key=883b964acss高度自适应a@b.com (happyfhb)http://www.161818.cn/post/392.htmlFri, 02 Oct 2009 20:27:51 +0800http://www.161818.cn/post/392.html人学习某个东西到一定程度的时候思维就固化了.

不懂得变通.

今天遇到一个css高度自适应问题 我竟然用 height:100%;

真是好搞笑.幸亏志伟兄及时指点.

应该是 height:auto;

很菜鸟的问题 但是却难了我一天 真是要好好学习了.

]]>DIV+CSShttp://www.161818.cn/post/392.html#commenthttp://www.161818.cn/http://www.161818.cn/feed.asp?cmt=392http://www.161818.cn/cmd.asp?act=tb&id=392&key=5b78e005升级到IE8 还是坚持IE7?a@b.com (happyfhb)http://www.161818.cn/post/330.htmlSat, 29 Aug 2009 14:04:10 +0800http://www.161818.cn/post/330.html       IE8用户越来越多，我一直在使用IE7，觉得还不错，因为目前不是很习惯火狐，所以一直用着以IE7为内核的世界之窗浏览器。我到底该不该升级到IE8呢？我一向都是用最新版的软件的，这问题还真的不好决定。

       在公司我用CorelDRAW14，可是同事是用12或者13，我用Photoshop CS4，而她们还是CS3，Adobe Flash也是。可是她们都被windows Update了一下，就把IE升级到IE8了，就我还用IE7。有一次新闻编辑说，网站无法插入图片了，我自己看了一下，我这边可以呀，可是她的电脑就是不行，我换了几个同事的电脑也是无法插入图片，怪了，为什么就我的不行呢？后来发现他们都突然升级到IE8了，而我们公司网站的编辑器ewebeditor版本不支持IE8，郁闷只能把ewebeditor升级了。

       我也想升级了，可是升级IE8后就不能用IE7测试网站了，虽然有一些绿色版的IE7，但是都不好用。哎，还是先用IE7吧！

      不知道各位朋友你是用IE6、IE7还是IE8，别说你只用火狐哦，IE在很多时候还是少不了的。

 

]]>DIV+CSShttp://www.161818.cn/post/330.html#commenthttp://www.161818.cn/http://www.161818.cn/feed.asp?cmt=330http://www.161818.cn/cmd.asp?act=tb&id=330&key=22bbd91b最简单的tab菜单效果a@b.com (happyfhb)http://www.161818.cn/post/307.htmlFri, 14 Aug 2009 20:43:59 +0800http://www.161818.cn/post/307.html最简单的tab菜单效果

以前自己不会的时候总觉得别人做的tab菜单很高深

看不懂里面的代码 可是自己真正去研究的时候发现也就是那么回事。

下面把我做的按列拿上来 共大家参考。

在配合一些css美化才漂亮，这里只是演示。几乎所有的tab菜单都是基于此原理的。

下面是代码。大家可以研究下。

点击查看例子

]]>DIV+CSShttp://www.161818.cn/post/307.html#commenthttp://www.161818.cn/http://www.161818.cn/feed.asp?cmt=307http://www.161818.cn/cmd.asp?act=tb&id=307&key=aa7a32e4DIV+CSS hack书写规范a@b.com (happyfhb)http://www.161818.cn/post/253.htmlFri, 26 Jun 2009 08:53:18 +0800http://www.161818.cn/post/253.htmlIE下很多地方可以省略一些层定义的浮动属性,但是FF不行,必须每个个层都写清楚,几个DIV层水平排列的时候,IE6中必须要加display:inline;,不然前端会出现双倍间距,而FF中则加不加display都显示正常.这些都是由浏览器默认值的不同而引起的,你看到那些大站的布局在各浏览器中都显示正常,是因为他们把这些默认有区别的地方都定义清楚了.

下面的兼容要点引自互联网

CSS对浏览器的兼容性具有很高的要求，通常情况下IE和Firefox(简称FF)存在很大的解析差异，这里介绍一下兼容要点。

常见的兼容问题：

1.DOCTYPE影响CSS处理

2.FireFox火狐:div设置margin-left,margin-right为auto时已经居中,IE不行

3.FireFox火狐:body设置text-align时,div需要设置margin:auto(主要是margin-left,margin-right)方可居中

4.FireFox火狐:设置padding后,div会增加height和width,但IE不会,故需要用!important多设一个height和width

5.FireFox火狐:支持!important,IE则忽略,可用!important为FireFox火狐特别设置样式

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

7.cursor:pointer可以同时在IEFireFox火狐中显示游标手指状，hand仅IE可以

8.FireFox火狐:链接加边框和背景色，需设置display:block,同时设置float:left保证不换行。参照menubar,给a和menubar设置高度是为了避免底边显示错位,若不设height,可以在menubar中插入一个空格。

9.在mozillafirefox和IE中的BOX模型解释不一致导致相差2px解决方法：
div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

10.IE5和IE6的BOX解释不一致
IE5下
div{width:300px;margin:0 10px 0 10px;}
div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改
div{width:300px !important;width/**/:340px;margin:0 10px 0 10px}
关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持

11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
ul{margin:0;padding:0;}就能解决大部分问题

]]>DIV+CSShttp://www.161818.cn/post/253.html#commenthttp://www.161818.cn/http://www.161818.cn/feed.asp?cmt=253http://www.161818.cn/cmd.asp?act=tb&id=253&key=fbef630b经典的DIV+CSS图文混排a@b.com (happyfhb)http://www.161818.cn/post/194.htmlThu, 21 May 2009 17:07:01 +0800http://www.161818.cn/post/194.html其实这是很老的方法了。写出来只是给新手看 。

高手就不要笑话我了。呵呵。下面是代码和演示效果。

图文混排 左浮动

<div style="width:400px; height:400px; padding:5px; background-color:#CFF;word-wrap:break-word; position:relative;">
<div style="float:left; height:120px; width:120px; padding:5px; background-color:#CCC;">右浮动注意，浮动的DIV层应该放在前面。浮动顺序调节 float 就可以了。</div>
海滨博客是一个发布自己想法的个人平台，同时为大家提供精品的软件下载。希望大家经常来海滨的博客看看。每次来都会发现新的东西哦。呵呵。另外我喜欢结交很多计算机专业的好朋友。欢迎留言。欢迎大家对本博客提出自己的见解，海滨愿意和大家一起沟通。共同发展。大家的支持是我前进的动力。嘿嘿。祝大家工作顺利。万事如意。
</div>

左浮动注意，浮动的DIV层应该放在前面。浮动顺序调节 float 就可以了。
海滨博客是一个发布自己想法的个人平台，同时为大家提供精品的软件下载。希望大家经常来海滨的博客看看。每次来都会发现新的东西哦。呵呵。另外我喜欢结交很多计算机专业的好朋友。欢迎留言。欢迎大家对本博客提出自己的见解，海滨愿意和大家一起沟通。共同发展。大家的支持是我前进的动力。嘿嘿。祝大家工作顺利。万事如意。

 

图文混排 右浮动

 <div style="width:400px; height:400px; padding:5px; background-color:#CFF;word-wrap:break-word; position:relative;">
<div style="float:right; height:120px; width:120px; padding:5px; background-color:#CCC;">右浮动注意，浮动的DIV层应该放在前面。浮动顺序调节 float 就可以了。</div>
海滨博客是一个发布自己想法的个人平台，同时为大家提供精品的软件下载。希望大家经常来海滨的博客看看。每次来都会发现新的东西哦。呵呵。另外我喜欢结交很多计算机专业的好朋友。欢迎留言。欢迎大家对本博客提出自己的见解，海滨愿意和大家一起沟通。共同发展。大家的支持是我前进的动力。嘿嘿。祝大家工作顺利。万事如意。
</div>

 

右浮动注意，浮动的DIV层应该放在前面。浮动顺序调节 float 就可以了。
海滨博客是一个发布自己想法的个人平台，同时为大家提供精品的软件下载。希望大家经常来海滨的博客看看。每次来都会发现新的东西哦。呵呵。另外我喜欢结交很多计算机专业的好朋友。欢迎留言。欢迎大家对本博客提出自己的见解，海滨愿意和大家一起沟通。共同发展。大家的支持是我前进的动力。嘿嘿。祝大家工作顺利。万事如意。

 

]]>DIV+CSShttp://www.161818.cn/post/194.html#commenthttp://www.161818.cn/http://www.161818.cn/feed.asp?cmt=194http://www.161818.cn/cmd.asp?act=tb&id=194&key=f8c1efb7一个网页中Tab切换效果例子a@b.com (happyfhb)http://www.161818.cn/post/173.htmlFri, 15 May 2009 12:44:08 +0800http://www.161818.cn/post/173.html   最近同事问我怎么设计一个像网易以及许多网页中Tab切换效果。从来没做过，就在网上看了一些代码，包括网易，但是过于复杂，就想着怎么做简单一点，经过一翻研究，终于做出来了，和其它网站一样。

    Tab式切换的好处是当网页内容比较多时，同时也方便布局，常应用于网页菜单，网页内容等。传统方式，要切换必须刷新一次，影响用户体验。配合CSS，使用维护修改比较方便。
下面是的代码是一个非常简单的例子。