欢迎来到爱学习爱分享,在这里,你会找到许多有趣的技术 : )

CSS经典面试题【php编程建站】

PHP编程 lbbniu 3405℃

1IE6双边距问题?

IE6的浏览器中明明设置的是10pxmargin却为什么显示的是20pxmargin其实这个Ie6的一个双边距BUG
例如:
<style type="text/css">
body {margin:0}
div { float:left; margin-left:10px; width:300px; height:300px; border:1px solid red; }
</style>
因为加上浮动后就会多出一倍的边距,浮动后本来外边距10px,但IE6会解析成20px,只需要在div的样式里加上display:inline;就可以解决以上问题。


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

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


3、如何定义1px左右高度的容器?
  IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line- height:1px


4为什么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


5、怎样使一个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>
  这里使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二


6firefox浏览器中嵌套div标签的居中问题的解决方法
  假定有如下情况:

<div id="a">
<div id="b"> </div>
</div>
  如果要实现ba中居中放置,一般只需用CSS设置atext-align属性为center。这样的方法在IE里看起来一切正常;但是在Firefoxb却会是居左的。
  解决办法就是设置b的横向marginauto。例如设置bCSS样式为:margin: 0 auto;。


7、超链接点击过后hover样式就不出现的问题?
  被点击访问过的超链接样式不再具有hoveractive样式了,解决方法是改变CSS属性的排列顺序: L-V-H-A

link-visited-hover-active


8、.img 下的留白,大家看这段代码有啥问题:

<div>
<img src=”" mce_src=”" />
</div>

divborder打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,要消除必须这样写

<div>
<img src=”" mce_src=”" /></div>

后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案:给img设定 display:block


9、怎么样才能让flash透明显示在层上面之上呢?
<div class="banner" style="background:url(../images/ad.jpg);width:1108px;height:72px;
overflow:hidden; ">
<EMBED align=right src="../images/3.swf" width="1108" height="72" type=application/octet-stream
wmode="transparent"quality="high" ></EMBED>
<EMBED align=left src="../images/95.swf" width=1108 height=72 type=application/octet-stream
wmode="transparent"quality="high" ></EMBED>
</div>

宽和高一定要和层的一样


10、为什么FF下文本无法撑开容器的高度?
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉he ight设置min-height:200px; 这里为了照顾不认识min-heightIE6 可以这样定义:

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


11IE6断头台问题

<div id="layout">

<div id="left">

<p>从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了从打火机发动机是分开了</p>

</div>

<a href="#">链接1</a>

<a href="#">链接2</a>

<a href="#">链接3</a>

<a href="#">链接4</a>

#layout{width:400px; border:5px solid #d4ca25;}

#left{width:200px; float:left;border:5px solid #35bb0c;}

当网页打开的时候页面显示正常,但鼠标指向右面对象“链接3”以及“链接4”的时候,主对象#layout下面被切掉,剩下的高度刚好是4个链接的高度。当鼠标再回到“链接1”,左侧的高度又恢复,

解决方法:把四个链接用<div id=right></div>包起来,给#right{floatleft;}


DIVspan的区别

2个都是用来划分区间但是没有实际语义的标签,差别就在于div是块级元素,不会其他元素在同一行;span是内联元素~可以与其他元素位于同一行~

这两个元素都是逻辑结构,没有任何语义。也正是因为没有任何语义,才可以被赋给一些特定的呈现和语义。
div元素实现一个块级元素,span元素实现一个行内级元素。这两个元素一般是和css配合使用。

p为段落标记,<p></p>包含文本内容 span是行内元素 就是在行内定义一块区域。

html标签分块元素和行内元素,divp都是块元素,span是行内元素。
divspan是没有意义的标签,而p是代表一段话,一排文字的意思。
主要是这两方面。

spanP的不同之处在于span是内联的,用在一小块的内联HTML中,前后不断行.
P(想想Pision是什么意思)元素是块级的(简单地说,它等同于其前后有断行),用于组合一大块的代码。
p(段落)元素是块级的,前后断行,而且还要再隔一行.相当于断两行.

a 标签对是一个网站的一条信息链接定义的

a:link {} /* 未访问的链接 */
a:visited {} /* 已访问的链接 */
a:hover {} /* 当有鼠标悬停在链接上 */
a:active {} /* 被选择的链接 */

clear属性其属性值有四个clear:both|left|right|none;
简单来说呢,clear属性的作用就是清除浮动。
如果某元素设置clear:left;表示该元素左边不存在浮动元素
相应的,clear:right;表示该元素右边不存在浮动元素;clear:both;表示该元素两边都不存浮动元素。clear:none表示两边允许有浮动元素。

CSSPosition属性很重要,有以下几个值:staticrelativeabsolutefixed

Static:静态定位。如果你没有设置position属性,那么缺省就是statictopleftbottomright等属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一。

Relative:相对定位。元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍然会分配给它,它两边的元素不会向它靠近来填充那个空间,但它们也不会从元素的新位置被挤走。

Absolute:绝对定位。元素将按照包含它的元素的位置进行调整,比如它嵌套在另一个绝对定位的元素中,那么就相对于那个元素定位。

Fixed:固定定位。元素将被设置在浏览器上一个固定位置上,不会随其他元素滚动。形象点说,上下拉动滚动条的时候,fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。


注意:很多网页都是居中的,这样,当对元素进行绝对定位的时候,在不同的分辨率下显示会有偏差,这时,我们可以通过类似下面的方法来处理:

<div style="position: relative;">

<div style="position: absolute; top: 10px; left: 10px;"></div>

</div>

CSSoverflow属性用法介绍

overflow属性规定如何处理如何处理不符合元素框的内容。用法如下:Object.style.overflow=visible|hidden|scroll|auto

参数介绍:

visible:内容不会被修剪,会呈现在元素框之外。

hidden:内容会被修剪,但是浏览器不会显示供查看内容的滚动条。 隐藏溢出

scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto:由浏览器决定如何显示。如果需要,则显示滚动条。

css样式兼容不同浏览器问题

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FFCSS样式的兼容,不然,你的网乱可能出去不想出现的效果!


所有浏览器通用
height: 100px;

IE6 专用
_height: 100px;

IE6 专用
*height: 100px;

IE7 专用
*+height: 100px;

IE7FF 共用
height: 100px !important;

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FFCSS样式的兼容,不然,你的网乱可能出去不想出现的效果!


所有浏览器通用
height: 100px;

IE6 专用
_height: 100px;

IE6 专用
*height: 100px;

IE7 专用
*+height: 100px;

IE7FF 共用
height: 100px !important;

一、CSS HACK

1, !important

随着IE7!important的支持, !important 方法现在只针对IE6HACK.(注意写法.记得该声明位置需要提前.)

以下为引用的内容:
<style>
#wrapper
{
width: 100px!important;
width: 80px;
}
</style>


2, IE6/IE7FireFox

以下为引用的内容:
*+html *html IE特有的标签, firefox 暂不支持.*+html 又为 IE7特有标签.
<style>
#wrapper
{
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
}
</style>

注意:
*+html IE7HACK 必须保证HTML顶部有如下声明:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”>

三、其他兼容技巧

1, FF下给 div 设置 padding 后会导致 width height 增加, IE不会.(可用!important解决) width:115px !important;width:120px;padding:5px;

 必须注意的是, !important; 一定要在前面。


2, 居中问题.
1).垂直居中. line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)


3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)


4, FF IE BOX 理解的差异导致相差 2px 的还有设为 floatdivie margin加倍等问题.


5, ul 标签在 FF 下面默认有 list-style padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)


6, 作为外部 wrapper div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.


7, 关于手形光标. cursor: pointer. hand 只适用于 IE.


4 浮动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;

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


6 页面的最小宽度

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


7 清除浮动

.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}
或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,
以并不影响到IE/WIN浏览器。这种的最麻烦的……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}


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

左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}
HTML代码<div id=”box”> <div id=”left”></div> <div id=”right”></div></div>


9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}
这个对于IE6.0IE6.0以下的版本都隐藏,FFOPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,p[id],所有p标签中有id的都是同样式的.


CSS hack

一些hack
#test{
color:red; /* 所有浏览器都支持 */
color:red !important;/* FirefoxIE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6IE7支持 */
*+color:red; /* IE7支持 */
color:red\9; /* IE6IE7IE8支持 */
color:red\0; /* IE8支持 */
}
body:nth-of-type(1) p{color:red;} /* ChromeSafari支持 */
*+html .list1 li{line-height:18px} //IE7hack

/* Firefox 1 - 2 */
body:empty #firefox12
{display: block;}

/* Firefox */
@-moz-document url-prefix()
{#firefox { display: block; }}

/* Webkit-Safari-Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0){
color:red
}

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{head~body #opera { display: block; }}

1. ie8下兼容问题,这个最好处理,转化成ie7兼容就可以。在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了
<meta http-equiv="x-ua-compatible" content="ie=7" />

2. flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如
margin-left:10px !important;/*IE7,IE8,FF下是10PX*/;
margin-left:5px;/*IE6下属性写的是5PX,但在显示出来的是10px

3. 清除块display,这个可以解决浮动造成的块,造成块后,当DIV背景填色或填图片的时候,会出现背景断开或差一小块。这种兼容出现的不太多,我做到现在,只遇到过两次,方法是在出现兼容的DIVCSS中写一个display:block,或其它属性,中文什么意思我不知道,我英语差,但能达到想要的效果,6 e" Z+ e% |8 G# |

4. 很多朋友DIV+CSS的时候,会出现,在IE的几个浏览器下都好了,但是在FF出问题了,用!important又会把IE7做的不兼容,很头疼,在想,有没有什么方法只对FF下进行操做,我用过这个方法,感觉得是百试不爽,就是在属性前面加符号如:*&,¥,#@+,加过符号的属性只有IE的浏览器才识别,而FF不识别,方法如下(注意有符号的属性和没符号的属性的顺序)
height:100px;/*FF下显示100的高*/
+height:120px;/*IE678下显示120*/

5. 有时候,会在布局的时候,发现,有一个DIV浮动了,接下来的一个DIV本来是要在下面显示的,结果跑上面去了,这种情况一般在FF下面会出现,解决的办法就是清除一下浮动,在设置过浮动的那个DIV下面加一个DIVCSS面写个clear:both;如下<div style="float:left;height:100px; width:500px;">
<div style="clear:both;">
<div style="height:100px; width=300px">

6. 再就是居中问题,这个问题在新手身上很多,主要原因是对盒子模型不够理解,没熟记盒子模型,如果发现你的页面没有局中,我现在知道的,有这几个原因:1. 一个是没盒子,就是BODY后的一个大DIV把所有DIV装起来的那个,你没写。2.就是你写了,但是宽度没用绝对宽度:而是用一个相对的宽度,想局中,必须用绝对宽度。-

7. 扩展:如果我想在设计的时候,实现IE6IE7,FF下出现三种不同的效果,比如IE6下背景红色,IE7下蓝色FF下绿色,这里,我自己试过,可以,用兼容的方法(注意顺序,可以好好理解一下)。7 L& t- o7 k- a1 I
background:red;/*FF里显示的红色*/
+background:blue !important;/*IE7下面显示的蓝色*/
+background:green;/*IE6下面显示的绿色*/S

转载请注明:爱学习爱分享 » CSS经典面试题【php编程建站】

喜欢 (6)or分享 (0)