前端20个问题集锦.docxVIP

前端20个问题集锦 　　1、前端页面有哪三层构成，分别是什么?作用是什么? 结构层(由 HTML 或 XHTML 之类的标记语言负责创建)、表现层(由CSS控制)、行为层(Javascript 语言和 DOM 主宰的领域) 2、啥子是css内联式，外联式，嵌入式? 　　内联式就是样式的属性内容直接跟在将要修饰的html标记里，如： 　　外联式就是通过 或者 @import url(my.css); 方式引入css 嵌入式就是用方式把CSS直接写在网页中 　　3、去掉链接的虚线框方法 　　a{blr:expression(this.onFocus=this.blur());}/*只支持IE，过多使用效率低 */ 　　a:focus{outline:none;}//FF下 其实这里还不算全部的解决方法，另篇文章里我COPY来了一份网上别人总结出来的方法，可以点这里查看 　　4、a链接的顺序 l-v-f-h-a 既：link-visited-focus-hover-active 这里可能大家很少用到的就是focus，这个其实也是一种链接状态，就是当你在键盘上按Tab键时获得焦点的那个链接的即时状态，遗憾的是ie并不支持(ie中按Tab键显示的效果为a:active时的状态)，只有在FF,Opera等浏览器下才能看到效果。就经常性我们就会用成L-V-H-A，这个东西其实还真有点不好记，好多人觉得老是混淆特别是那个A，这里有高人把它比如成“由爱生恨” Love Hate(LV-HA)，哈哈 好记了吧! 　　5、css hack 　　*: IE6-7 　　_: IE6 　　\0: IE8-9 　　\9: IE6-9 　　!important: FF、IE7-9 CSS HACK书写顺序:先写FF等非IE浏览器所需样式，其次写IE8所需样式，接着是IE7的，再接着才是IE6的! 　　6、list-style-type 在ie6、ie7中不显示的解决 解决方法是给项目符号腾空间，代码：li{margin-left:25px;} 　　7、在IE9和FF中如何改变选择文本颜色和背景色 　　::selection { background:色值;color:色值; } /*Ie9+,Webkit,Opera9.5+*/ 　　::-moz-selection { background:色值;color:色值; } /*Mozilla Firefox*/ 　　8、如何关闭iOS中键盘自动大写 在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写 　　9、table中word-wrap:break-word;失效怎么解决 　　在table加上 　　word-wrap:break-word; 　　; 　　10、IE6双边距 display:inline; 　　11、如何解决IE6及更早浏览器下当li内部元素是定义了display:block的内联元素时底部产生空白的问题? 　　BUG重现： 　　a,span{display:block;background:#ddd;} 　　AppUE 　　AppUE 　　AppUE 　　测试li内部元素为设置了display:block的内联元素时底部产生空白 如上代码，IE6及更早浏览器每个li内部的内联元素底部都会产生空白。解决方案是给li内部的内联元素再加上zoom:1 　　12、如何解决IE7及更早浏览器下子元素相对定位时父元素overflow属性的auto|hidden失效的问题? 　　div{overflow:auto;width:260px;height:80px;border:1px solid #ddd;} 　　p{position:relative;margin:0;} 　　如果我是相对定位，我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器，你将可以看到这个BUG 　　如果我是相对定位，我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器，你将可以看到这个BUG 如上代码，在IE7及更早浏览器下你会看到div的滚动条将无法工作。解决方案是给div也设置相对定位position:relative 　　13、如何清除图片下方出现几像素的空白间隙? 　　方法1： 　　img{display:block;} 　　方法2： 　　img{vertical-align:top;}除了top值，还可以设置为text-top | middle | bottom |