前端面试题总结-XHTML阶段

2019年6月1日 177次阅读来源: MR_LIXP

请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。

作者前言：
最近身边好多小伙伴已经开始面试找工作了，在面试的过程中，无可避免的要去应对各种各样的面试题。
在之前的工作过程中，我也一直在有意识的记录各种面试题。
现在一起分阶段的分享给大家，希望大家能够在未来的一段时间中，面试顺利。
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);
}

    原文作者：MR_LIXP
    原文地址: https://www.jianshu.com/p/2e90932631d6
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。