web前端面试题

1、前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js

2、标签上 title 与 alt 属性的区别是什么？
Alt 当图片不显示是 用文字提示。Title 鼠标悬停 显示提示信息。

3、清除浮动的几种方式，各自的优缺点？
1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）。
2.使用 overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,使用 zoom:1用于兼容 IE）。
overflow: auto如果超出范围会自动生成一个滚动条，
而overflow: hidden可能会导致超出部分直接隐藏且不占用文档流的空间
3.是用 afert 伪元素清除浮动(用于非 IE 浏览器)。

4、添加些 css 让其水平垂直居中。

颜海镜

5、CSS 布局：两列，左边宽度自适应，右边宽度固定 200px？写出代码

我是左边

我是右边边

6、列举常见的行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6
空(void)元素:br、meta、hr、link、input、img

7、介绍一下 CSS 的盒子模型？
盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

8、列出 display 的值，说明他们的作用？
1、none 此元素不会被显示，并且不占据页面空间。
2、inline 行内元素 元素会在一行内显示，超出屏幕宽度自动换行，不能设置宽度和高度，元素的宽度和高度只能是靠元素内的内容撑开。
3、block 块级元素 会独占一行，如果不设置宽度，其宽度会自动填满父元素的宽度，可以设置宽高，即使设置了宽度，小于父元素的宽度，块级元素也会独占一行。
示例元素：div,h1-h6,ul,ol,dl,p
4、inline-block 行内块元素 与行内元素一样可以再一行内显示，而且可以设置宽高，可以设置margin和padding。
5、list-item 列表元素
6、table 会作为块级表格来显示(类似于

)，表格前后带有换行符。
7、inline-table 会作为内联表格来显示(类似于)，表格前后没有换行符。
8、flex 弹性布局。

9、列出position 的值，分别说明他们的意义？
1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。　　
3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

10、简述一下 src 与 href 的区别？
1、href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。
2、 src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。
当浏览器解析到该元素时，会暂停浏览器的渲染，知道该资源加载完毕。
src用于替换当前元素；href用于在当前文档和引用资源之间建立联系。

11、行内元素和块级元素的具体区别是什么？
块级元素(block)特性：
•总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：
•和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的 left 和right 是可以设置的），就是里面文字或图片的大小。

12、如何垂直居中一个浮动元素？
// 方法一：已知元素的高宽
#div1{
background-color:#6699FF;
width:200px; height:200px;
position: absolute; //父元素需要相对定位
top: 50%; left: 50%;
margin-top:-100px ; //二分之一的 height，width
margin-left: -100px;
}
//方法二:未知元素的高宽
#div1{
width: 200px; height: 200px;
background-color: #6699FF;
margin:auto;
position: absolute; //父元素需要相对定位
left: 0; top: 0; right: 0; bottom: 0;
}

13、display:none 与 visibility:hidden 的区别是什么？
•display : 隐藏对应的元素但不挤占该元素原来的空间。
•visibility: 隐藏对应的元素并且挤占该元素原来的空间。

14、简述 border:none 以及 border:0 的区别，并给出使用建议？
border:none表示边框样式无,border:0表示边框宽度为0;当定义了border:none,即隐藏了边框的显示,实际就是边框宽度为 0.
当定义边框时,必须定义边框的显示样式.因为边框默认样式为不显示 none,所以仅设置边框宽度,由于样式不存在,边框的宽度也自动被设置为 0.

15、HTTP 请求方法有哪些，有什么区别？

16、HTTP 状态码及其含义？
1XX ：信息状态码
2XX ：成功状态码
3XX ：重定向
4XX ：客户端错误
5XX: 服务器错误

17、link 与@import 的区别？
link 是 HTML 方式， @import 是 CSS 方式
link 最大限度支持并行下载，@import 过多嵌套导致串行下载，出现 FOUClink 可以通过 rel="alternate stylesheet"指定候选样式浏览器对 link 支持早于@import，可以使用@import 对老浏览器隐藏样式@import 必须在样式规则之前，可以在 css 文件中引用其他文件
总体来说：link 优于@import

18、CSS 有哪些继承属性？
font, text-align,line-height，Color等等

19、display, float, position 的关系？
①如果 display 为 none，那么 position 和 float 都不起作用，这种情况下元素不产生框否则，
②如果display不为none，假设为inline，然后设置float不为none，如 float: left;
此时经浏览器计算后是属性是float: left; display: block; 这种情况下float会强制更改元素display属性；
③如果display不为none，假设为inline，然后设置position: absolute/fixed; float: left;
此时经浏览器计算后是属性是 position: absolute; float: none; display: block;
这种情况下position会比float和display厉害，然后强制改变float为none、display为block

20、你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？