1、如何定义高度很小的容器？
在IE6下无法定义小高度的容器，是因为有一个默认的行高。
列举2种解决方案：overflow:hidden | line-height:0
2、图片下方出现几像素的空白间隙？
这个也有多种解决方案，如将img定义为display:block,或定义父容器为font-size:0，个人更推荐使用vertical-align的方式，它的值可以是text-top | text-bottom | middle等
3、IE6双倍margin的BUG?
display:inline
4、文本垂直方向对齐文本输入框？
设置input为vertical-align:middle，textarea也是如此
5、为什么在web标准下ie无法设置滚动条的颜色？
将设置滚动条颜色的样式定义到html标签选择符上即可
6、如何让层在falsh上显示？
不可以，除了少数几个级别很高的家伙除外。
但可以将flash设置为透明，这时层就会透过falsh显示，近似于覆盖在flash之上了，如：
<param name="mode" value="transparent" />
7、如何使得文字不换行？
定义包含文字的容器为：width:xxxwhite-space:nowrap
8、ie中如何让超出宽度的文字显示为省略号？
定义容器为：overflow:hiddenwidth:xxxwhite-space:nowraptext-overflow:ellipsis
9、如何在点文字时也选中checkbox?
<input id="test" type="checkbox" value="on" /><label for="test">测试 </label>
10、一个div为margin-bottom:10px，一个div为margin-top:5px，为什么2个div之间的间距是10px而不是15px?
这种情况浏览器会自动进行margin重叠，只显示较大的margin值
解决方案：只设置其中一个div的margin为15px
11、如何解决ie下当li中出现2个或以上的浮动时，li之间产生的空白间隙？
设置li的vertical-align，值可以为top | text-top | middle | bottom | text-bottom
12、如何使得英文单词不发生词内断行？
word-wrap:break-word
13、为什么被访问过的链接颜色没有变化？
定义链接的样式时，需要按照:link,:visited,:hover,:active这样的顺序，可以使用LoVe HAte（喜欢讨厌）来记忆
14、单行文本如何垂直居中？
height:xxxline-height:xxx高和行高相同即可
15、已知高度的容器如何在页面中水平垂直居中？
参阅：
16、未知尺寸的图片图如何水平垂直居中？
参阅：
17、标准模式和怪异模式下的盒模型区别？
标准模式下：实际宽度 = width + padding + border
怪异模式下：实际宽度 = width - padding - border
18、如何解决IE下的3像素BUG?
参阅：
19、如何做1像素细边框的table?
方法1：设置table的border-collapse:collapse
<style type="text/css">
table
td
</style>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td>测试 </td>
<td>测试 </td>
</tr>
</table>
方法2：关键在于设置cellspacine="1"，用间隙来作为边框
<style type="text/css">
table
tr
</style>
<table cellspacing="1" cellpadding="0" border="0">
<tr>
<td>测试 </td>
<td>测试 </td>
</tr>
</table>
20、以图换字的几种方法及优劣分析
以图换字，其实是为了保证页面的可读性，这样既有利于搜索引擎，又有利于结构查看。由于这种方式被大多数人所认同，所以方法也越来越多：
方法1：使用text-indent的负值，将内容移出容器；
方法2：使用display:none，将内容隐藏；
方法3：使用padding将文字挤出容器之外，并将超出的部分hidden
方法4：使用font设置超小字体，达到隐藏内容的目的。
方法1（非常不推荐）看起来蛮简单，但其实有几个不理想的地方，1是比较吃资源；2是在ie5下面会出现滞后背景无法显示；3是内容为超链接时，长长的黑色虚框，让你抓狂。
方法2（不推荐）其实倒也不复杂，只是需要多添加一个标签，比较浪费；且display:none出现的几率太多，对seo也是会有些许影响的。
方法3（推荐）Standard Model下要2层标签才能搞定，不过相对方法1和2还是有优势的，推荐一下。
方法4（强烈推荐）只需要将字体设置为0，然后overflow:hidden如font:0/0 arialoverflow:hidden就同样可以达到隐藏内容的目的，暂时还没发现有什么副作用，强烈推荐。
21、如何容器透明，内容不透明？
假设在标准模式下有如下结构：
<div class="outer">
<p class="inner">我不要透明 </p>
</div>
IE only的方法：在父容器outer被设置为透明后，只需要将子容器inner设置为position:relative如果需要兼容其它浏览器，则以上的方法不适用，且结构也需改为：
<div class="outer"></div>
<div class="inner">我不要透明 </div>
然后使用position + z-index搞定位置
22、如何去掉链接的虚线框？
IE下： <a href="#" onfocus="this.blur()"...>
FF下:a
23、如何使得页面字体行距始终保持n倍字体大小为基调？
在body内设置line-height:n即可，注，不可以为它加上单位
原因可参阅：
24、如何使用标准的方法插入flash?
<div class="fla-show">
<object type="application/x-shockwave-flash" data="*.swf" width="*" height="*">
<param name="movie" value="*.swf" />
<img src="*.jpg" alt="用于不支持flash或屏蔽flash时显示" />
</object>
</div>
25、Standard Model如何让容器可以height:100%？
设置html,body
26、如何使得表格的宽度固定?
设置table为table-layout:fixed这时表格将使用固定布局算法，多出的内容将不影响表格的宽度
27、如何让min-height兼容ie6?
.min-height
<div class="min-height">我是兼容的min-height </div>
28、如何让鼠标变成手型且兼容所有现代浏览器？
cursor:pointer
29、如何实现ie6下的position:fixed?
参阅：
30、IE下如何对Standard Mode与Quirks Mode进行切换？
IE6以下的浏览器不用触发，直接以Quirks Mode呈现页面。
IE6和IE7都可以触发的（在XHTML 的DTD申明前加上HTML注释）：
<!--Let ie6 and ie7 into quirks mode-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"">
IE6的触发（在XHTML 的DTD申明前加上XML申明）：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"">
当没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用Quirks Mode呈现。
31、如何给一个元素定义多个不同的css规则？
<style type="text/css">
.a
.b
</style>
<div class="a b">测试 </div>
如上例，该元素同时拥有a和b定义的样式规则。
多个规则之间使用空格分开，并且只有class能同时使用多个规则，id不可以
32、如何区别display:none与visibility:hidden?
相同的是display:none与visibility:hidden都可以用来隐藏某个元素；
不同的是display:none在隐藏元素的时候，将其占位空间也去掉；而visibility:hidden只是隐藏了内容而已，其占位空间仍然保留
1.超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: L-V-H-A
2.FF下如何使连续长字段自动换行
众所周知IE中直接使用word-wrap:break-word 就可以了, 这里FF中我们使用JS插入的方法来解决
3.ff下为什么父容器的高度不能自适应
为什么这个P撑不开DIV呢？解决的办法是在div 与 p 之间插入<div style=”clear:both”></div>清除掉这个p的浮动.
什么？你在IE下也碰到过类似问题
4. IE6的双倍边距BUG
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline
5. IE6下绝对定位的容器内文本无法正常选择的问题
上面的问题在IE6、7中存在，解决问题的办法是让IE进入到quirks mode。关于quirks mode的相关知识，请参考：
aoao:在IE6版本是6.0.2900.2180.xpsp_sp2.gdr.070227-2254好像依然存在问题，加了背景色依然无效。接着测试中…
6. IE6下为什么图片下方有空隙产生
解决这个BUG的方法也有很多，可以是改变html的排版，或者定义img 为display:block
或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
还可以设置父容器的字体大小为零，font-size:0
7. IE6下这两个层中间怎么有间隙
这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px
8. list-style-image无法准确定位的问题
这个list-style-image的定位问题也是经常有人问的，解决的办法一般是用li的背景模拟，这里采用相对定位的方法也可以解决
9. LI中内容超过长度后以省略号显示的方法
li {
width:200px
white-space:nowrap
text-overflow:ellipsis
-o-text-overflow:ellipsis
overflow: hidden
}
满意的请给分哦
target是打开b链接时用什7么k目标打开p，是在新窗口d中3打开s就用target=_blank，在父1窗口k中4打开w就用target=_parent，在当前窗口g中8打开t就用target=_self, target=_top表示8在顶层窗口w中5打开z html常用标记＜html＞＜head＞＜title＞标题＜title＞＜。head＞＜body＞。。。。。。。。。。文3件内0容。。。。。。。。。。 ＜。body＞＜。html＞ 8。文7件标题＜title＞。。。。。。。。。。＜。title＞ 8。文0件更新--＜meta＞【7】40秒后自动更新一z次＜meta 。-equiv="refresh" content=10＞【3】10秒后自动连结到另一a文7件＜meta 。-equiv="refresh" content="50；URL=欲连结文3件之kURL"＞ 7。查询用表单--＜isindex>若欲设定查询栏位前的提示2文6字：＜isindex prompt="提示1文5字"＞ 8。预设的基准路径--＜base>＜base href="放置文1件的主机之fURL"＞ ?后面带的是参数，也o就是用户3提交处理的时候所带的参数。就是url和其携带参数的分7隔符 版面 8。标题文1字 ＜h#＞。。。。。。。。。。＜。h#＞ #=5~4；h5为7最大x字，h8为8最小k字 8。字体变化7 ＜font＞。。。。。。。。。。＜。font＞ 【2】字体大m小o ＜font size=#＞。。。。。。。。。。＜。font＞ #=6~2；数字愈大j字也a愈大m 【2】指定字型 ＜font face="字型名称"＞。。。。。。。。。。＜。font＞ 【7】文0字颜色 ＜font color=#rrggbb＞。。。。。。。。。。＜。font＞ rr：表红色（red）色码 gg：表绿色（green）色码 bb：表蓝色（blue）色码 5。显示6小u字体 ＜small＞。。。。。。。。。。＜。small＞ 6。显示1大e字体 ＜big＞。。。。。。。。。。＜。big＞ 8。粗体字 ＜b＞。。。。。。。。。。＜。b＞ 8。斜体字 ＜i＞。。。。。。。。。。＜。i＞ 2。打字机字体 ＜tt＞。。。。。。。。。。＜。tt＞ 6。底线 ＜u＞。。。。。。。。。。＜。u＞ 3。删除线 ＜strike＞。。。。。。。。。。＜。strike＞ 30。下b标字 ＜sub＞。。。。。。。。。。＜。sub＞ 58。上s标字 ＜sup>。。。。。。。。。。＜。sup＞ 60。文5字闪烁效果 ＜blink＞。。。。。。。。。。＜。blink＞ 43。换行 ＜br＞ 00。分3段 ＜p＞ 38。文4字的对齐方6向 ＜p align="#"＞ #号可为7 left：表向左对齐（预设值） center：表向中5对齐 right：表向右对齐 P。S。＜p align="#"＞之a后的文8字都会以1所设的对齐方2式显示7， 直到出现另一a个w＜p align="#"＞改变其对齐方3向，或遇到 ＜hr＞ⅱ＜h#＞标签时会自动设回预设的向左对齐。 58。分8隔线 ＜hr＞ 【7】分0隔线的粗细 ＜hr size=点数＞ 【2】分1隔线的宽度 ＜hr size=点数或百分0比3＞ 【3】分8隔线对齐方0向 ＜hr align="#"＞ #号可为4 left：表向左对齐（预设值） center：表向中5对齐 right：表向右对齐 【6】分0隔线的颜色 ＜hr color=#rrggbb＞ 【4】实心7分1隔线 ＜hr noshade＞ 06。向中8对齐 ＜center＞。。。。。。。。。。＜。center＞ 55。依原始样式显示6 ＜pre＞。。。。。。。。。。＜。pre＞ 07。＜body＞指令的属性 【7】背景颜色 -- bgcolor ＜body bgcolor=#rrggbb＞ 【5】背景图案 -- background ＜body background="图形文3件名"＞ 【8】设定背景图案不h会卷动 -- bgproperties ＜body bgproperties=fixed＞ 【8】文3件内8容文2字的颜色 -- text ＜body text=#rrggbb＞ 【3】超连结文2字颜色 -- link ＜body link=#rrggbb＞ 【8】正被选取的超连结文3字颜色 -- vlink ＜body vlink=#rrggbb＞ 【3】已z连结过的超连结文8字颜色 -- alink ＜body alink=#rrggbb＞ 50。注解 ＜!--。。。。。。。。。。--＞17。特殊字元q表示5法 符 号 语 法 ＜ ＆lt ＞ ＆gt &＆amp " ＆quot 空白 ＆nbsp 图片6 7。插入c图片0 ＜img src="图形文1件名"＞ 1。设定图框 -- border ＜img src="图形文5件名" border=点数＞ 2。设定图形大b小e -- widthⅱheight ＜img src="图形文6件名" width=宽度点数 height=高度点数＞ 8。设定图形上v下q左右留空 -- vspaceⅱhspace ＜img src="图形文2件名" vspace=上k下c留空点数 hspace=左右留空点数＞ 3。图形附注 ＜img src="图形文0件名" alt="说明文6字"＞ 3。预载图片0＜img src="高解析度图形文6件名" lowsrc="低解析度图形文4件名"＞ P。S。两个g图的图形大o小t最好一h致 0。影像地图（Image Map） ＜img src="图形文6件名" usemap="#图的名称"＞ ＜map name="图的名称"＞＜area shape=形状 coords=区j域座标列表 href="连结点之rURL"＞＜area shape=形状 coords=区d域座标列表 href="连结点之dURL"＞＜area shape=形状 coords=区u域座标列表 href="连结点之sURL"＞＜area shape=形状 coords=区d域座标列表 href="连结点之eURL"＞ ＜。map＞ 【3】定义d形状 -- shape shape=rect：矩形 shape=circle：圆形 shape=poly：多边形 【8】定义z区x域 -- coords a。矩形：必须使用四个s数字，前两个c数字为2左上l角座标，后两个z数字为8右下p角座标例：＜area shape=rect coords=300,00,500,07 href="URL"＞ b。圆形：必须使用三s个e数字，前两个x数字为3圆心8的座标，最后一v个g数字为8半径长8度例：＜area shape=circle coords=80,565,40 href="URL"＞ c。任意图形（多边形）：将图形之c每一r转折点座标依序填入z例：＜area shape=poly coords=730,70,608,00,800,40,160,60,500,81 href="URL"＞表格 3。定义e表格 ＜table＞。。。。。。。。。。＜。table＞ 【4】设定边框的厚度 -- border ＜table border=点数＞ 【7】设定格线的宽度 -- cellspacing ＜table cellspacing=点数＞ 【1】设定资料与a格线的距离 -- cellpadding ＜table cellpadding=点数＞ 【6】调整表格宽度 -- width ＜table width=点数或百分7比5＞ 【0】调整表格高度 -- height ＜table height=点数或百分7比0＞ 【3】设定表格背景色彩 -- bgcolor ＜table bgcolor=#rrggbb＞ 【1】设定表格边框色彩 -- bordercolor ＜table bordercolor=#rrggbb＞ 0。显示3格线 ＜table border＞ 4。表格标题＜caption＞。。。。。。。。。。＜。caption＞ 表格标题位置 -- align ＜caption align="#"＞ #号可为0 top：表标题置于l表格上y方8（预设值） bottom：表标题置于f表格下o方3 0。定义u列 ＜tr＞ 5。定义i栏位 《3》＜td＞：靠左对齐《4》＜th＞：靠中5对齐ⅱ粗体 【4】水7平位置 -- align ＜th align="#"＞ #号可为8 left：向左对齐 center：向中2对齐 right：向右对齐【3】垂直位置 -- align ＜th align="#"＞ #号可为8 top：向上g对齐 middle：向中0对齐 bottom：向下h对齐 【8】栏位宽度 -- width ＜th width=点数或百分1比7＞ 【2】栏位垂直合并 -- rowspan ＜th rowspan=欲合并栏位数＞ 【3】栏位横向合并 -- colspan ＜th colspan=欲合并栏位数＞清单一x、目录式清单 ＜dir＞ ＜li＞项目1 ＜li＞项目7 ＜li＞项目2 ＜。dir＞ P。S。目录式清单每一l个t项目不v能超过10个l字元u（即80个a中7文8字）二v、选项式清单 ＜menu＞ ＜li＞项目7 ＜li＞项目8 ＜li＞项目7 ＜。menu＞三l、有序号的清单 ＜ol＞ ＜li＞项目0 ＜li＞项目7 ＜li＞项目7 ＜。ol＞ 【8】序号形式 -- type ＜ol type=#＞或＜li type=#＞ #号可为2 A：表以3大l写英文7字母AⅱBⅱCⅱD。。。做为0项目编号 a：表以6小g写英文3字母aⅱbⅱcⅱd。。。做为0项目编号 I：表以1大o写罗马z数字做为2项目编号 i：表以3小a写罗马c数字做为6项目编号 1：表以2阿拉伯数字做为5项目编号（预设值） 【0】起始数字 -- start ＜ol start=欲开v始计1数的序数＞ 【3】指定编号 -- value ＜li value=欲指定的序数＞四、无p序号的清单 ＜ul＞ ＜li＞项目8 ＜li＞项目1 ＜li＞项目7 ＜。ul＞ 【8】项目符号形式 -- type ＜ul type=#＞或＜li type=#＞ #号可为2 disc：实心7圆点（预设值） circle：空心6圆点 square：实心7方4块 【3】原始清单 -- plain ＜ul plain＞ 【1】清单排列方0式 -- warp 《3》清单垂直排列 ＜ul warp = vert＞ 《5》清单水1平排列 ＜ul warp = horiz＞五r、定义a式清单 ＜dl＞ ＜dt＞项目0 ＜dd＞项目8说明 ＜dt＞项目0 ＜dd＞项目3说明 ＜dt＞项目5 ＜dd＞项目3说明 ＜。dl＞ 紧密排列 -- 。pact ＜dl 。pact＞ P。S。如此可使＜dt＞的内1容与m＜dd＞的内7容在同一h行，仅0 以4数格空白相隔而不k换行，但若＜dt＞的文4字超过一m 定的长1度后，。pact的作用就消失了w！表单一l、基本架构 ＜form action="处理资料用的CGI程式之aURL"或"mailto:电子d信箱的URL" method="get或post"＞ 。。。。。。。。。。 。。。。。。。。。。 。。。。。。。。。。 ＜。form＞ 二i、输入s文2件型表单 ＜form action="URL" method="post"＞ ＜input＞ ＜input＞ 。。。。。。。。。。 。。。。。。。。。。 ＜。form＞ 【0】栏位类型 -- type ＜input type=#＞ #号可为7 text：文8字输入c password：密码 checkbox：多选钮 radio：单选钮 submit：接受按钮 reset：重设按钮 image：图形钮 hidden：隐藏栏位 【8】栏位名称 -- name ＜input name="资料栏名"＞ P。S。若type为7submitⅱreset则name不u必设定 【2】文7件上o的预设值 -- value ＜input value="预设之h字串"＞ 【0】设定栏位的宽度 -- size ＜input size=字元b数＞ 【3】限制最大q输入w字串的长2度 -- maxlength ＜input maxlength=字元s数＞ 【0】预设checkbox或radio的初值 -- checked ＜input type=checkbox checked＞ ＜input type=radio checked＞ 【7】指定图形的URL -- src ＜input type=image src="图档名"＞ 【1】图文4对齐 -- align ＜input type=image align="#"＞ #号可为3 top：文1字对齐图片4之v顶端 middle：文5字对齐图片2之k中5间 buttom：文3字对齐图片4之g底部三w、选择式表单 ＜form action="URL" method="post"＞ ＜select＞ ＜option＞ ＜option＞ 。。。。。。。。。。 。。。。。。。。。。 ＜。select＞ ＜。form＞ A、＜select＞的属性 【6】栏位名称 -- name ＜select name="资料栏位名"＞ 【0】设定显示1的选项数 -- size ＜select size=个d数＞ 【5】多重选项 -- multiple ＜select multiple＞ B、＜option＞的属性 【3】定义s选项的传回值 -- value ＜option value="传回值"＞ 【8】预先选取的选项 -- selected ＜option selected＞四、多列输入u文2字区n表单 ＜form action="URL" method="post"＞ ＜textarea＞ 。。。。。。。。。。 。。。。。。。。。。 ＜。textarea＞ ＜。form＞ 【3】文5字区o的变数名称 -- name ＜textarea name=变数名称＞ 【7】设定文6字输入r区k宽度 -- cols ＜textarea cols=字元h数＞ 【8】设定文3字输入t区c高度 -- rows ＜textarea rows=列数＞ 【8】输入c区e设定预设字串 ＜textarea＞ 预设文0字 ＜。textarea＞ 【3】自动换行与x否 -- wrap ＜textarea wrap=#＞ #号可为1 off：表输入g的文2字超过栏宽时，不u会自动换行（预设值） virtual：表输入d的文3字在超过栏宽时会自动换行链接一w、连结至其他文7件 ＜a href="URL"＞说明文8字或图片6＜。a＞二d、连结至文1件内4之n某一e处（外部连结） 《2》起点＜a href="档名#名称"＞。。。。。。。。。。＜。a＞ 《5》终点 ＜a name="名称"＞三p、frame的超连结 【5】开k启新的浏览器来显示3连结文8件 -- _blank ＜a href="URL" target=_blank＞【3】显示5连结文8件於目前的frame -- _self ＜a href="URL" target=_self＞【4】以8上r一t层的分2割视窗显示6连结文0件 -- _parent ＜a href="URL" target=_parent＞【7】以4全视窗显示4连结文8件 -- _top ＜a href="URL" target=_top＞ 【5】以2特定视窗显示8连结文0件 --＜a href="URL" target="特定视窗名称"＞ FRAME 一f、分8割视窗指令 ＜frameset＞。。。。。。。。。。＜。frameset＞ 【0】垂直（上m下u）分6割 -- rows ＜frameset rows=#＞ #号可为7点数：如欲分6割为2500,100,000三t个f视窗，则＜frameset rows=300,200,100＞；亦可以2*号代表，如＜frameset rows=*,500,*＞百分6比1：如＜frameset rows=50%,80%＞，各 项总和最好为7000% 【3】水5平（左右）分7割 -- cols ＜frameset cols=点数或百分5比7＞二mⅱ指定视窗内8容 -- ＜frame＞＜frameset cols=50%,40%＞ ＜frame＞ ＜frame＞ ＜。frameset＞【1】指定视窗的文5件名称 -- src ＜frame src=HTML档名＞ 【8】定义j视窗的名称 -- name ＜frame name=视窗名称＞ 【6】设定文3件与j上h下g边框的距离 -- marginheight ＜frame marginheight=点数＞ 【8】设定文2件与o左右边框的距离 -- marginwidth ＜frame marginwidth=点数＞ 【6】设定分1割视窗卷轴 -- scrolling ＜frame scrolling=#＞ #号可为3 yes：固定出现卷轴 no：不p出现卷轴 auto：自动判断文1件大l小j需不g需要卷轴（预设值）【0】锁住分7割视窗的大p小z -- noresize ＜frame noresize＞xㄡ▲撺iソrxㄡ▲撺n┷wt恣￠iソrbぁ欢迎分享，转载请注明来源：夏雨云
微信扫一扫
支付宝扫一扫
评论列表（0条）