请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。
作者前言：
最近身边好多小伙伴已经开始面试找工作了，在面试的过程中，无可避免的要去应对各种各样的面试题。
在之前的工作过程中，我也一直在有意识的记录各种面试题。
现在一起分阶段的分享给大家，希望大家能够在未来的一段时间中，面试顺利。
2016年11月16日17:07:33
| 题目序号 | 题目备注 |
|---|---|
| 1 | 在页面内居中（水平和垂直方向）*3 |
| 2 | 如何让链接访问过后的hover消失(ie8下只能给a) |
| 3 | Ie6中为什么不能设置1px高的div(ie有默认高度19) |
| 4 | div中内容没有撑开高度的原因，怎么解决?(现代浏览器，ie下面会被撑开 min-height:200px; hack _height:200px) |
| 5 | 双倍边距bug(ie6 float, 横向margn 块元素) |
| 6 | 如何让div水平排列 |
| 7 | 定义id名和class名有什么区别 |
| 8 | CSS有几种引入方式？link和@import有什么区别 |
| 9 | 表格的标签 |
| 10 | 在IE中给div设display:inline-block;它还会占一行不 |
| 11 | 如何制作渐变效果（不使用CSS3） |
| 12 | 上下两个div分别设置了margin-bottom和margin-top，两个div之间的距离是多少？ |
| 13 | 除了ul、ol还用什么写列表 |
| 14 | 如果不写头部声明会有什么问题 |
| 15 | 如何优化你的页面 |
| 16 | 两栏自适应布局，右侧div宽高不定 |
| 17 | 响应式布局是什么怎么用？ |
| 18 | IE6 png的问题。 |
| 19 | Hack是什么怎么用？ |
| 20 | Border 虚边有什么问题？ |
| 21 | li在ie6与ie8下的高度问题 |
| 22 | Css常见兼容性问题，如何解决？ |
| 23 | Css常见选择器有哪些？优先级？ |
| 24 | 你如何理解绝对定位和相对定位的？都用在什么地方？有什么优点和缺点？ |
| 25 | 左侧样式固定，右侧文本宽度自适应如何布局 |
| 26 | 下面的布局如何实现,如何不用浮动还能使用什么布局方式 |
| 27 | HTML静态页面出现中文乱码如何解决？ |
| 28 | 下列哪个选择器优先级是最高的？ |
| A.#a | |
| B..a .b .c .d .e .f .g .h .i .j .k .l .m .n .o | |
| C.#a .b | |
| D.div.b#a | |
| 29 | 写CSS命令，设置字体为宋体，12px大小，颜色为#eeeeee,加粗。 |
| 30 | 常用布局属性有哪些？有什么特点？ |
| 31 | 一个div，css设置如下：{width:200px;margin:200px 20px;padding:50px 60px 70px;border:100px solid red;overflow:hidden;}在IE6怪癖解析下，这个div的实际宽是多少？在正常解析下，这个div的实际宽度是多少? |
| 32 | web网页中常见的图片格式有哪些？分别有什么特点？ |
| 33 | 在HTML中，SEO常见的白帽优化技巧有哪些？ |
| 34 | 块属性标签与行属性标签的区别？哪些标签是块属性的，哪些是行的？ |
| 35 | IE6和IE7有什么不同？ |
| 36 | 一个div，要求实现当内容过少时，div的最低高度为200px，当内容较多时，div的高度被内容撑开。 |
| 37 | 实现一个布局，分左中右三栏。左栏固定宽为200px，右栏固定150px，中栏随屏幕宽自动适应。写出html和css。 |
| 38 | a标签的四个伪类是什么？如何排序？为什么？ |
| 39 | 如何实现浮动元素居中 |
| 40 | 已知一个div内有一个img，两者的高度均不知道，但图片的高度一定小于div的高度。用css实现图片在div内的垂直居中。 |
| 41 | HTML静态页面出现中文乱码如何解决？ |
| 42 | 下列标签既是行内属性标签又可以设宽高的标签是？ |
| A. div | |
| B. span | |
| C. input | |
| D. img | |
| E. h1 | |
| 43 | 用一两句话说一下你对“盒模型”这个概念的理解，和它都涉及到哪些css属性。 |
| 44 | 外边距、内边距、边框有几种书写形式,列举说明。 |
| 45 | 有上下两个div，上一个div 设置margin-bottom：10px；下一个div设置margin-top： 5px；那么两个div最后的间距是多少？ |
| 46 | 写出下列CSS命令的最简写法{margin-left:20px; margin-bottom:50px; margin-right:20px; margin-top:20px;}
|
| 47 | 我们用hack调兼容时，用到如下命令 div{height：300px；*height：400px；_height：500px;}，在ie6里div显示高度是多少，火狐里显示高度是多少？ |
| 48 | 三层嵌套用在什么地方最合适，有什么优点。 |
| 49 | 背景图合并用在什么地方最适合，有什么优点。 |
| 50 | 页面如何在浏览器里达到居中，并且左右自适应？ |
| 51 | HTML5版本类型声明怎么写。有什么用？ |
| 52 | XHTML1.0版本你知道么，跟html5版本有什么区别 |
| 53 | 书写ol，ul，table的嵌套规范 |
| 54 | 前端页面有哪三层构成，分别是什么？作用是什么？ |
| 55 | img的alt和title有什么区别？ |
| 56 | HTML代码的书写规范有哪些？ |
| 57 | 浏览器的调试工具有哪些？都有什么功能？ |
| 58 | table的合并边框属性是什么？跨行是什么？跨列是什么？别写反了 |
| 59 | CSS是什么？有什么用处。 |
| 60 | 你知道less,sass这些东西么? |
| 61 | 解释W3C |
| 62 | 页面重构 |
| 63 | div+css与table布局的有何区别？ |
| 64 | 后台编码格式不是UTF-8怎么办？ |
| 65 | 一个CSS文件如果过大的话，加载会很慢，占用过大带宽，如果解决？ |
| 66 | input标签存在的兼容问题？ |
| 67 | input中disabled与readonly有何区别？ |
| 68 | input属性有哪些？ |
| 69 | display的属性值有哪些？ |
| 70 | 标签的隐藏（display:none和visibility:hidden）的区别 |
| 71 | 使用display:inline-block在IE6中不能正常显示，如何解决？ |
| 72 | png图片有几种格式 |
| 73 | position属性值，如只写了absolute，是相对谁定的位？ |
| 74 | CSS选择器中div.ps是什么意思 |
| 75 | 写一个2个div的布局，一个div在右侧宽200px,一个div在左侧宽度可扩展。 |
| 76 | 有三个兄弟div,设制样式div{float:left}如何使第二个div不浮动（不能用CSS3选择器） |
| 77 | 写出两个div并排显示的css样式，要求左侧的div宽度200px；字体加粗；行高30px；与右侧div的外边距10px；右侧的div宽度自适应，边框1px灰色； |
| 78 | css样式引用和js引入的位置问题（为什么会放在头部或者底部）。 |
| 79 | 下列成立的是（） |
| A. null==undefined | |
| B. NaN!＝NaN | |
| C.false==0 | |
| D."5"==5 | |
| E.undefined==0 | |
| 80 | 在下面的XHTML标签中，正确地标记折行的是（） |
A. <br />
| |
B. <break>
| |
C. <br>
| |
D.</br>
| |
| 81 | 下面不支持overflow-y属性的浏览器是（） |
| A. IE7 | |
| B. Firefox3.1 | |
| C. Safari3.1 | |
| D. Opera 9.5 | |
| 82 | 见最后 |
| 83 | 见最后 |
| 84 | 标签语义化和CSS命名语义化有什么好处？ |
| 85 | 某种效果，有两种实现方案都可以实现，方案一：<img>标签；方案二：背景图，两个方案如何取舍？衡量的标准是什么? |
| 86 | 应用DIV+CSS写出一个固定宽度的三列布局，能够使内容根据屏幕大小自适应居中。 |
| 87 | CSS布局中，拥有布局(haslayout)有什么作用？怎样触发元素拥有布局？块级格式化范围(Block Formatting Context简称BFC)有什么作用？怎样触发元素BFC特性？ |
| 88 | 你做的页面在哪些浏览器测试过？这些浏览器的内核是什么？经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？（至少说3个） |
| 89 | 什么是CSS浮动问题？如何清除浮动？写出所有你知道的方法 |
| 90 | 触发haslayout的方法 |
| 91 | ie浏览器Hack的写法 |
| 92 | 清除浮动的方法 |
| 93 | 用css分别实现某个DIV元素上下居中和左右居中。 |
| 94 | 表单中有一些checkbox该如何提交值，name一样吗 |
| 95 | 你能描述一下渐进增强和优雅降级之间的不同吗? |
| 96 | 你如何对网站的文件和资源进行优化？ |
| 97 | 如果你接到了一个使用Tab来缩进代码的项目，但是你喜欢空格，你会怎么做？ |
| 98 | 你都使用那些工作来测试代码的性能？ |
| 99 | 'data-'属性的作用是什么？ |
| 100 | 描述css reset的作用和用途。 |
| 101 | 解释css sprites,如何使用。 |
| 102 | 你使用CSS预处理器吗？如果有请简单介绍一下 |
| 103 | 谈谈你对WEB标准以及W3C的理解与认识。 |
| 104 | 英文首字母大写 |
| 105 | 下面那几项是HTML4.01中不建议使用的（） |
A. <font></font>
| |
B. <em></em>
| |
C. <u></u>
| |
D. <i></i>
| |
| 110 | 对WEB标准以及W3C的理解与认识 |
| 111 | xhtml和html有什么区别 |
| 112 | Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? |
| 113 | 行内元素有哪些？块级元素有哪些？CSS的盒模型？ |
| 114 | CSS引入的方式有哪些? link和@import的区别是? |
| 115 | CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？ |
| 116 | 前端页面有哪三层构成，分别是什么？作用是什么？ |
| 117 | css的基本语句构成是？ |
| 118 | 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? |
| 119 | 写出几种IE6 BUG的解决方法 |
| 120 | 标签上title与alt属性的区别是什么？ |
| 121 | 描述css reset的作用和用途。 |
| 122 | 解释css sprites，如何使用。 |
| 123 | 浏览器标准模式和怪异模式之间的区别是什么？ |
| 124 | 你如何对网站的文件和资源进行优化？期待的解决方案包括： |
| 125 | 什么是语义化的HTML？ |
| 126 | 清除浮动的几种方式，各自的优缺点 |
| 127 | overflow-x 属于 CSS2 还是 CSS3 |
| 128 | 请列举几种可以清除浮动的方法（至少两种） |
| 129 |
display:none 和 visibility:hidden 的区别是什么 |
| 130 | 见最后 |
| 131 | 如何让一段文本中的所有英文单词的首字母大写 |
| 132 | 以下哪个不是 HTML5 的新标签 |
a. <article>
| |
b. <section>
| |
c. <address>
| |
d. <time>
| |
| 133 | 正确使用 HTML 和 CSS 实现以下效果:中间方框部分表示图片，右侧为文字列表(不要用浮动) |
| 134 |
<img>标签上title与alt属性的区别是什么？ |
| 135 | 分别写出以下几个HTML标签：文字加粗、下标、居中、字体 |
| 136 | 写出一个文本输入框，属性为只读，最大输入字符为20个 |
| 137 | css左边固定，右边可变的布局实现方法，如果要求在源码顺序中左边必须在前，如何实现 |
| 138 | 图片和文字一起如何通过css实现居中 |
| 139 | 请简述一下css中的样式继承和css的选择器？ |
| 140 | 请简述一下各个选择器之间的优先级 |
| 141 | 在同等优先级的情况下如何选择样式 |
| 142 | 盒子模型，请简述一下盒子模型 |
| 143 | 如何使一个div的背景图像距这个Div的顶部10像素，左边15像素，且不重复？ |
| 144 | 如何增加某一个链接的可点击面积，而下划线仍然与链接一样长？如，鼠标移至td空白区域后下划线也能消失，点击后即相当于点击了链接文字 |
| 145 | 一个元素的上边框为红色，其他边框黑色，里面文字的颜色是蓝色； |
| 146 | 打开（隐藏）、关闭（显示）一个对象，style的display以及visibility的参数是什么？ |
| 147 | 用CSS和Div实现3列或2列的页面布局，并说明与table布局相比有哪些优缺点 |
| 148 | 定宽网页两列内容布局，试写出你所知道的几种布局代码（HTML+css），再简单描述下各种布局的优缺点。 |
82 读下面一段代码，相邻div的垂直外边距是多少？
<!—xhtml1.0-->
<html>
<head>
<style type="text/css">
div{height: 50px; margin: 50px; background-color: #999;}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
83 读下面一段代码，div#a和div#b哪个叠放层次更高，a覆盖b还是b覆盖a？
<!—xhtml1.0-->
<html>
<head>
<style type="text/css">
body{margin: 0;padding: 100px;background-color: #000;}
div.elem{width: 100px;height: 120px;margin-top: -40px;
background-color:#FCE5A6;border: 1px solid #FFF;
position: absolute;
}
div.box{margin-top: -50px;padding: 10px 20px;
width: 100px;height: 100px;
background-color: #F97C01;border: 1px solid #FFF;
position: relative;
}
</style>
</head>
<body>
<div class="box" style="z-index: 2;">
<div class="elem" id="a" style="z-index: 3;">a</div>
</div>
<div class="box" style="margin-left: 60px; z-index: 1;" >
<div class="elem" id="b" style="z-index: 4;">b</div>
</div>
</body>
</html>
130 请缩写以下代码：
box {
background-position: 10px 20px;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: red;
background-image: url(box.png);
}
网友评论