《前端20个问题集锦.docx》由会员分享，可在线阅读，更多相关《前端20个问题集锦.docx（5页珍藏版）》请在三一办公上搜索。
1、前端20个问题集锦前端20个问题集锦 1、前端页面有哪三层构成，分别是什么?作用是什么? 结构层(由 HTML 或 XHTML 之类的标记语言负责创建)、表现层(由CSS控制)、行为层(Javascript 语言和 DOM 主宰的领域) 2、啥子是css内联式，外联式，嵌入式? 内联式就是样式的属性内容直接跟在将要修饰的html标记里，如： 外联式就是通过 或者 import url(my.css); 方式引入css 嵌入式就是用方式把CSS直接写在网页中 3、去掉链接的虚线框方法 ablr:expression(this.onFocus=this.blur);/*只支持IE，过多使用效率低
2、*/ a:focusoutline: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
3、，这里有高人把它比如成“由爱生恨” 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中不显示的解决 解决方法是给项目符号腾空间，代码：limargin-left:25px; 7、在IE9和FF中如何改变选择文本颜色和背景色 :selection background:色值;color:色值;
4、/*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:
5、inline; 11、如何解决IE6及更早浏览器下当li内部元素是定义了display:block的内联元素时底部产生空白的问题? BUG重现： a,spandisplay:block;background:#ddd; AppUE AppUE AppUE 测试li内部元素为设置了display:block的内联元素时底部产生空白 如上代码，IE6及更早浏览器每个li内部的内联元素底部都会产生空白。解决方案是给li内部的内联元素再加上zoom:1 12、如何解决IE7及更早浏览器下子元素相对定位时父元素overflow属性的auto|hidden失效的问题? divoverflow:auto;w
6、idth:260px;height:80px;border:1px solid #ddd; pposition:relative;margin:0; 如果我是相对定位，我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器，你将可以看到这个BUG 如果我是相对定位，我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器，你将可以看到这个BUG 如上代码，在IE7及更早浏览器下你会看到div的滚动条将无法工作。解决方案是给div也设置相对定位position:relative 13、如何清除图片下方出现几像素的空
7、白间隙? 方法1： imgdisplay:block; 方法2： imgvertical-align:top;除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的和 值都可以 方法3： #imgfont-size:0;line-height:0;#img为img的父元素 14、如何让文本垂直对齐文本输入框? inputvertical-align:middle; 15、为什么Standard mode下IE无法设置滚动条的颜色? htmlscrollbar-3dlight-color:#999;scrollbar-darksha
8、dow-color:#999;scrollbar-highlight-color:#fff;scrollbar-shadow-color:#eee;scrollbar-arrow-color:#000;scrollbar-face-color:#ddd;scrollbar-track-color:#eee;scrollbar-base-color:#ddd; 将原来设置在body上的滚动条颜色样式定义到html标签选择符上即可 16、如何使文本溢出边界不换行强制在一行内显示? #testwhite-space:nowrap;width:150px; 设置容器的宽度和white-space为no
9、wrap即可，其效果类似标签 17、如何使文本溢出边界显示为省略号? (此方法Firefox5.0尚不支持)： #testwidth:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; 首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。 18、如何使连续的长字符串自动换行? #textwidth:150px;word-wrap:break-word; word-wrap的break-word值允许单词
10、内换行 19、如何让已知高度的容器在页面中水平垂直居中? #testposition:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px; 20、如何让未知尺寸的图片在已知宽高的容器内水平垂直居中? #testdisplay:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;#test p*position:absolute;*top:50%;*left:50%;margin:0;#test p img*position:relative;*top:-50%;*left:-50%;vertical-align:middle; #test是img的祖父节点，p是img的父节点。Know More：未知尺寸的图片如何水平垂直居中
