CSS重构最有可能遇到的八个面试问题
2008/12/29 09:56 | by 李茵 ]
被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A
二、IE6的双倍边距BUG
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline
三、为什么FF下文本无法撑开容器的高度？
标准浏览器中固定高度值的容器是不会象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.qi21.com/">:</a>
<pre lang="html" line="1">
<param name="wmode" value="transparent" />
七、怎样使一个层垂直居中于浏览器中？
div {position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; width:200px; height:200px;
border:1px solid red; }
这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二
八、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;。
单行一列
body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
两行一列
body { margin: 0px; padding: 0px; text-align: center;}
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
三行一列
body { margin: 0px; padding: 0px; text-align: center; }
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
单行两列
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 410px;}
两行两列
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 410px;}
三行两列
#header{ width: 700px;margin-right: auto; margin-left: auto; }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }
#bodycenter #dv1 { float: left;width: 280px;}
#bodycenter #dv2 { float: right; width: 410px;}
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
单行三列
绝对定位
#left { position: absolute; top: 0px; left: 0px; width: 120px; }
#middle {margin: 20px 190px 20px 190px; }
#right {position: absolute;top: 0px; right: 0px; width: 120px;}
float定位一
xhtml:
<div id="warp">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">这里是第三列</div>
<div class="clear"></div>
</div>
CSS:
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
float定位二
xhtml:
<div id="center" class="column">
<h1>This is the main content.</h1>
</div>
<div id="left" class="column">
<h2>This is the left sidebar.</h2>
</div>
<div id="right" class="column">
<h2>This is the right sidebar.</h2>
</div>
CSS:
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
.column {position: relative;float: left;}
#center {width: 100%;}
#left {width: 180px; right: 240px;margin-left: -100%;}
#right {width: 130px;margin-right: -100%;}
两行三列
xhtml:
<div id="header">这里是顶行</div>
<div id="warp">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">这里是第三列</div>
<div class="clear"></div>
</div>
CSS:
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
三行三列
xhtml:
<div id="header">这里是顶行</div>
<div id="warp">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">这里是第三列</div>
<div class="clear"></div>
</div>
<div id="footer">这里是底部一行</div>
CSS:
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}
#footer{width:100%; height:auto;}
PS:这里列出的是常用的例子，而非研究之用，对一每个盒子，都没有设置margin,padding,boeder等属
| 事件 | 浏览器支持 | 描述 |
| onClick | IE3|N2|O3 | 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 |
| onDblClick | IE4|N4|O | 鼠标双击事件 |
| onMouseDown | IE4|N4|O | 鼠标上的按钮被按下了 |
| onMouseUp | IE4|N4|O | 鼠标按下后，松开时激发的事件 |
| onMouseOver | IE3|N2|O3 | 当鼠标移动到某对象范围的上方时触发的事件 |
| onMouseMove | IE4|N4|O | 鼠标移动时触发的事件 |
| onMouseOut | IE4|N3|O3 | 当鼠标离开某对象范围时触发的事件 |
| onKeyPress | IE4|N4|O | 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] |
| onKeyDown | IE4|N4|O | 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] |
| onKeyUp | IE4|N4|O | 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] |
| 事件 | 浏览器支持 | 描述 |
| onAbort | IE4|N3|O | 图片在下载时被用户中断 |
| onBeforeUnload | IE4|N|O | 当前页面的内容将要被改变时触发的事件 |
| onError | IE4|N3|O | 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误 |
| onLoad | IE3|N2|O3 | 页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成 |
| onMove | IE|N4|O | 浏览器的窗口被移动时触发的事件 |
| onResize | IE4|N4|O | 当浏览器的窗口大小被改变时触发的事件 |
| onScroll | IE4|N|O | 浏览器的滚动条位置发生变化时触发的事件 |
| onStop | IE5|N|O | 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断 |
| onUnload | IE3|N2|O3 | 当前页面将被改变时触发的事件 |
| 事件 | 浏览器支持 | 描述 |
| onBlur | IE3|N2|O3 | 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可] |
| onChange | IE3|N2|O3 | 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可] |
| onFocus | IE3|N2|O3 | 当某个元素获得焦点时触发的事件 |
| onReset | IE4|N3|O3 | 当表单中RESET的属性被激发时触发的事件 |
| onSubmit | IE3|N2|O3 | 一个表单被递交时触发的事件 |
| 事件 | 浏览器支持 | 描述 |
| onBounce | IE4|N|O | 在Marquee内的内容移动至Marquee显示范围之外时触发的事件 |
| onFinish | IE4|N|O | 当Marquee元素完成需要显示的内容后触发的事件 |
| onStart | IE4|N|O | 当Marquee元素开始显示内容时触发的事件 |
| 事件 | 浏览器支持 | 描述 |
| onBeforeCopy | IE5|N|O | 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件 |
| onBeforeCut | IE5|N|O | 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件 |
| onBeforeEditFocus | IE5|N|O | 当前元素将要进入编辑状态 |
| onBeforePaste | IE5|N|O | 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件 |
| onBeforeUpdate | IE5|N|O | 当浏览者粘贴系统剪贴板中的内容时通知目标对象 |
| onContextMenu | IE5|N|O | 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的<body>中加入onContentMenu="return false"就可禁止使用鼠标右键了] |
| onCopy | IE5|N|O | 当页面当前的被选择内容被复制后触发的事件 |
| onCut | IE5|N|O | 当页面当前的被选择内容被剪切时触发的事件 |
| onDrag | IE5|N|O | 当某个对象被拖动时触发的事件 [活动事件] |
| onDragDrop | IE|N4|O | 一个外部对象被鼠标拖进当前窗口或者帧 |
| onDragEnd | IE5|N|O | 当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了 |
| onDragEnter | IE5|N|O | 当对象被鼠标拖动的对象进入其容器范围内时触发的事件 |
| onDragLeave | IE5|N|O | 当对象被鼠标拖动的对象离开其容器范围内时触发的事件 |
| onDragOver | IE5|N|O | 当某被拖动的对象在另一对象容器范围内拖动时触发的事件 |
| onDragStart | IE4|N|O | 当某对象将被拖动时触发的事件 |
| onDrop | IE5|N|O | 在一个拖动过程中，释放鼠标键时触发的事件 |
| onLoseCapture | IE5|N|O | 当元素失去鼠标移动所形成的选择焦点时触发的事件 |
| onPaste | IE5|N|O | 当内容被粘贴时触发的事件 |
| onSelect | IE4|N|O | 当文本内容被选择时的事件 |
| onSelectStart | IE4|N|O | 当文本内容选择将开始发生时触发的事件 |
| 事件 | 浏览器支持 | 描述 |
| onAfterUpdate | IE4|N|O | 当数据完成由数据源到对象的传送时触发的事件 |
| onCellChange | IE5|N|O | 当数据来源发生变化时 |
| onDataAvailable | IE4|N|O | 当数据接收完成时触发事件 |
| onDatasetChanged | IE4|N|O | 数据在数据源发生变化时触发的事件 |
| onDatasetComplete | IE4|N|O | 当来子数据源的全部有效数据读取完毕时触发的事件 |
| onErrorUpdate | IE4|N|O | 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件 |
| onRowEnter | IE5|N|O | 当前数据源的数据发生变化并且有新的有效数据时触发的事件 |
| onRowExit | IE5|N|O | 当前数据源的数据将要发生变化时触发的事件 |
| onRowsDelete | IE5|N|O | 当前数据记录将被删除时触发的事件 |
| onRowsInserted | IE5|N|O | 当前数据源将要插入新数据记录时触发的事件 |
| 事件 | 浏览器支持 | 描述 |
| onAfterPrint | IE5|N|O | 当文档被打印后触发的事件 |
| onBeforePrint | IE5|N|O | 当文档即将打印时触发的事件 |
| onFilterChange | IE4|N|O | 当某个对象的滤镜效果发生变化时触发的事件 |
| onHelp | IE4|N|O | 当浏览者按下F1或者浏览器的帮助选择时触发的事件 |
| onPropertyChange | IE5|N|O | 当对象的属性之一发生变化时触发的事件 |
| onReadyStateChange | IE4|N|O | 当对象的初始化属性值发生变化时触发的事件 |
＜li＞和＜hr＞的样式定义
2008/12/24 17:02 | by 李茵 ]
li的这个样式定义是将列表项目使用图片来代替显示的小圆点。当然您也可以显示成其它效果，详细请参阅下面的定义:
列表项目效果的CSS定义
*list-style-type: circle(可换成自己想要的样式); 列表项目样式
disc : CSS1 实心圆
circle : CSS1 空心圆
square : CSS1 实心方块
decimal : CSS1 阿拉伯数字
lower-roman : CSS1 小写罗马数字
upper-roman : CSS1 大写罗马数字
lower-alpha : CSS1 小写英文字母
upper-alpha : CSS1 大写英文字母
none : CSS1 不使用项目符号
armenian : CSS2 传统的亚美尼亚数字
cjk-ideographic:CSS2 浅白的表意数字
georgian : CSS2 传统的乔治数字
lower-greek : CSS2 基本的希腊小写字母
hebrew : CSS2 传统的希伯莱数字
hiragana : CSS2 日文平假名字符
hiragana-iroha: CSS2 日文平假名序
katakana : CSS2 日文片假名字符
katakana-iroha: CSS2 日文片假名序号
lower-latin : CSS2 小写拉丁字母
upper-latin : CSS2 大写拉丁字母
*list-style-image: url(images/disc.gif); 用图像disc.gif代替列表项目显示
*list-style-position : outside | inside
outside: 列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inside : 列表项目标记放置在文本以内，且环绕文本根据标记对齐
hr{border:1px dashed #86BCD4; height:1;}
在HTML代码中，还有一些特殊的如水平条hr，也可以在风格管理中加上定义，以更改其默认的显示效果:
水平条效果的CSS定义
BORDER-BOTTOM-STYLE: dotted;
BORDER-LEFT-STYLE: dotted;
BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted;
height:1;
width:100%;
align:left;
color:#86BCD4;
Shade:no;
水平条虚线效果定义
border:1px dashed #86BCD4; height: 1;
来源：iTbulo.COM
span div p 之间的不同区别
2008/12/23 11:58 | by 李茵 ]
| span div p 之间的不同区别 |
| 时间: 2007-4-10 21:16:52 浏览：2060 |
|
HTML只是赋予内容的手段，大部分HTML标签都有其意义（标签p创建段落，h1标签创建标题等等）的，然而span和div标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们被用得十分广泛。 它们被用来组合一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来，见CSS中级指南的类和id选择符。 span和div的不同之处在于span是内联的，用在一小块的内联HTML中，前后不断行. <div id="scissors"> <p>This is <span class="paper">crazy</span></p> </div> 在实践中，div，特别是span不应该滥用，尽管有其他相左的意见。比如，你要强调单词“crazy”和加粗类“paper”，可能会用这样的代码： <div id="scissors"> <p>This is <strong class="paper">crazy</strong></p> </div> 这是做法比再加一个span比较好。 你所需要记住的是，span和div 是“无意义”的标签。 |
