前端20个问题集锦
  1、前端页面有哪三层构成，分别是什么?作用是什么?
结构层(由 HTML 或 XHTML 之类的标记语言负责创建)、表现层(由CSS控制)、行为层(Javascript 语言和 DOM 主宰的领域)
2、啥子是css内联式，外联式，嵌入式?
  内联式就是样式的属性内容直接跟在将要修饰的html标记里，如：
  外联式就是通过 或者 @import url(my.css); 方式引入css
嵌入式就是用方式把CSS直接写在网页中
　　3、去掉链接的虚线框方法
  a{blr:Focus=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中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，移动版本web
kit为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;}
css去掉滚动条
  如果我是相对定位，我的父元素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 | text-bottom，甚至特定的和 值都可以
  方法3：
#img{font-size:0;line-height:0;}#img为img的父元素
  14、如何让文本垂直对齐文本输入框?
  input{vertical-align:middle;}
  15、为什么Standard mode下IE无法设置滚动条的颜?
　html{scrollbar-3dlight-color:#999;scrollbar-darkshadow-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、如何使文本溢出边界不换行强制在一行内显示?
  #test{white-space:nowrap;width:150px;}
设置容器的宽度和white-space为nowrap即可，其效果类似标签
  17、如何使文本溢出边界显示为省略号?
  (此方法Firefox5.0尚不支持)：
#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。
  18、如何使连续的长字符串自动换行?
  #text{width:150px;word-wrap:break-word;}
word-wrap的break-word值允许单词内换行
　19、如何让已知高度的容器在页面中水平垂直居中?　
　#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -
100px;}
　　20、如何让未知尺寸的图片在已知宽高的容器内水平垂直居中?
  #test{display: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：未知尺寸的图片如何水平垂直居中

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。