Web前端常见面试题

Web前端常见面试题

1,是什么？有什么作用？
决定浏览器渲染方式
：告知 浏览器当前的 HTML 或 XML 文档是哪一个版本. Doctype 是一条 声明, 而不是一个标签; 也可以把它叫做 “文档类型声明”, 或 简称为 "DTD".
：用HTML5的doctype声明文件包含HTML5标记

2,什么是语义化？语义化的作用？
简单讲就是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析，有利于SEO，便于团队开发和维护

3，选择器的优先级如何计算？
a.内联样式表的权值为1000
b.ID选择器的权值为100
c.class类选择器的权值为10
d.HTML标签选择器的权值为1
我们可以把选择器中规则对应多加法，比较权值，如果权值相同那就后面的覆盖前面的。

4,可继承的元素有哪些？
1）、字体系列属性
　　font-family：字体系列
　　font-weight：字体的粗细
　　font-size：字体的大小
font-style：字体的风格
line-height：行高
2）、文本系列属性
　　text-indent：文本缩进
　　text-align：文本水平对齐
color：文本颜色
text-decoration：文本修饰

5,简述盒模型的概念
盒模型又称框模型（Box Model）,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；

元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。

6,使用margin外边距的常见问题及解决方法
父子元素margin合并问题
在父元素里面有子元素时，若父元素在没有设置overflow:hidden或者是border属性，则父元素的margin-top的值为父元素和子元素中的margin-top的最大值。
父子元素margin合并问题解决办法
方法一：设置父元素的overflow属性为hidden。
方法二：设置父元素的border属性，如：border:1px solid red;
兄弟元素margin合并问题
当元素是兄弟元素时，在不设置float和position:absolute时，margin-bottom和margin-top会合并为两者中的最大值。
兄弟元素margin合并问题解决方法
使兄弟元素不在同一个BFC区域下，具体做法如：将兄弟元素分别触发BFC或将兄弟元素包在不同的div下，这些不同的div再分别触发BFC。

7,块级元素与行内元素有那些区别？
Html中常见行级标签：span、a、em、strong、b …
特点：在一行内显示（在一行中可以并列多个行级标签），不能设置宽高属性，水平方向的padding和margin可以设置，垂直方向的无效。
Html中常见块级标签：div、p、ul、li、dl、td、dd、h1~h6 …
特点：独占一行，能设置width，height，margin和padding等属性

8,浮动会带来那些问题？清浮动的方法？
浮动元素引起的问题：
浮动元素脱离文档流之后在文档流中不占位，父元素的高度无法被撑开，影响与父元素同级的元素
清楚浮动的方法：
（1）给父级元素加高度（不推荐使用，它只适合高度固定的布局，一般父盒子都是为由内容撑起来）
（2）在结尾处添加空div标签clear:both。具体做法：添加一个div标签并定义一个cl的类名，给cl类名添加样式clear:both，将该div标签放到父元素内容结束前的位置（缺点：会多加CSS和HTML标签）。
（3）给父级元素定义 overflow:hidden（推荐使用，缺点：不能和position配合使用，因为超出的尺寸的会被隐藏）
（4）给父级div定义伪类：after和zoom（推荐使用）
/清除浮动代码/ .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1}
然后父级元素添加clearfloat类名即可
（5）给父级元素添加浮动（缺点：会产生新的浮动问题）

9,如何使一个盒子水平垂直居中？
方案1、margin 负间距
1.必需知道该div的宽度和高度，
2.然后设置位置为绝对位置，
3.距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指盒子左上角顶点距离页面左、上边界的50%，
4.最后将该div分别左移和上移，使整个盒子居中，左移和上移的大小就是该DIV(包括border和padding)宽度和高度的一半。
方案2、margin:auto实现绝对定位元素的居中（该方法兼容ie8以上浏览器）
此方案代码关键点：
1、上下左右均0位置定位；
2、margin: auto;

10,BFC规则
内部的标签会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠
每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。
BFC的区域不会与float的标签区域重叠
计算BFC的高度时，浮动子标签也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然

BFC解决的问题
解决外边距折叠
特性的第②条：垂直方向上的距离由margin决定。在常规文档流中，两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，而是以较大的为准。特性的第⑥条：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签，同样外面的标签不会影响到BFC内的标签。所以可以让其中的一个标签处于一个BFC中
自适应两栏或三栏布局
左边固定宽度，右边不设宽，因此右边的宽度自适应，随浏览器窗口大小的变化而变化。
左右两边固定宽度，中间不设宽，因此中间的宽度自适应，随浏览器的大小变化而变化。
浮动的标签会覆盖正常标签根据第④条规则，BFC的区域不会与float的标签区域重叠，
所以我们只需要创建一个BFC，它就会自动缩小，以不被浮动的标签遮盖，就能够实现右侧栏自适应。
防止字体环绕
浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。
清除浮动
利用overflow:hidden清除浮动，因为浮动的盒子无法撑出处于标准文档流的父盒子的height。根据特性第⑤条。计算BFC的高度时，浮动子标签也参与计算。

11,等高布局 双飞翼布局 圣杯布局
等高布局
方法一、 利用内外边距相抵消,注意父元素设置"vertlow. hidden;"
方法二、原理:利用内容撑开父元素的特点，给每- -列添加相对应用的容器，并进行相互嵌套，并在每个容器中设置背景色。(这里需要 提醒大家你有多少
列就需要多少个容器,比如说我们说的三列，那么你就需要使用三个容器)
方法三、原理:利用边框模拟背景，实现等高列显示效果
圣杯布局:
圣杯布局和双飞翼布局都是为了实现左右两栏固定宽度，中间部分自适应的三栏布局，不过两者实现的原理有所不同。以下是圣杯布局实现思路。
1.将三者都floatleft ,再加上一-个position.relative (因为相对定位后面会用到)
2. middle部分 width:100%占满
3.此时middle占满了 ,所以要把eft拉到最左边，使用margin-ett.-100%
4.这时eft拉回来了，但会覆盖middle内容的左端,要把middle内容拉出来，所以在外围container加 上padding 0220px 0 200px
5. middle内容拉回来了，但lef也跟着过来了，所以要还原，就对ef使用相对定位left: -200px同理，right地 要相对定位还原right -220px
6.到这里大概就自适应好了。如果想container高度保持一致可以给left middle right都加上min-height: 130px
双飞翼布局
双飞翼布局，始于淘宝UED。如果把三栏布局比作一只鸟， 可以把main看成是鸟的身体，let和righ则是 鸟的翅膀。这个布局的实现思路是，先把最重要的身
体部分放好，然后再将翅膀移动到适当的地方。
左翼lef设置200px,右翼right设置220px身体main自适应

1. htm1代码中 ，main要放最前边,然后是left right
   2.将main left right都loatleft
   3.将main占满width:100%
   4.此时main占满了，所以要把left拉到最左边，使用margin-eft: -100%同理right使用margin-left: -220px

12,什么是精灵图？精灵图有哪些优缺点？
英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就
是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，
“background- repeat”，“background-position”的组合进行背景定位，background-position 用数字能精确的定位出背景图片的位置。适用于一般小图标，不适合大背景大布局背景

优点：

（1）减少网页的 http 请求，从而大大的提高页面的性能

（2）图片命名上的困扰

（3）更换风格方便

缺点：
（1）固定的大小
（2）需要去计算定位位置

14,什么是语义化？语义化的作用有哪些？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }

15,用什么方法让页面中的元素消失
1.display:none;（将整个元素隐藏，并且不会占据任何的空间）

2.visibility:hidden;（元素的内容不可见，但是元素仍然保持原来的位置和大小）

3.设定它的位置,让其消失不见：

position:absolute或fixed，用z-index遮盖。

4.overflow:hidden将要隐藏的元素移除父元素的范围。

5.设置元素为透明：即opacity:0；

6.将元素的font-size，line-height,width,height设置为0；（虽然这些方法很赖皮。）

7.设置元素的transform的translateX（Y）的值为-100%；

16,CSS新增属性
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

17,固定布局
在里把viewport加好，根pc端一样，设想整个网页的宽度为320px居中即可，超出部分留白。
优点：思路沿用PC端，上手简单。
缺点：大屏幕手机及手机横屏时，两边是留白较大，且大屏幕手机下看起来页面会特别小，操作的按钮也很小，用户体验较差
流式布局
流动布局重点就是使用百分比来代替传统px，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样， 优点是流动布局可以很好解决自适应需求，缺点是通过大量的百分比布局，会出现兼容性的问题，且更适用于对横向拉伸的设计元素，设计的时候存在很多局限性。
响应式布局
根据目标用户的访问设备的主要类型做三种或四种布局。 每种布局有一个区间即可利用媒体查询@media，可以为不同分辨率的设备加载不同的样式。这种方法的优点是可以相对精确的控制显示效果，但可能需要对同一个类书写不同的样式会导致代码比较繁复，后期维护困难。
rem布局
rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。 比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。

18,rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。 比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。
rem布局实现步骤
设置页面的viewport
动态计算并设置html的fontsize值
按照pc端布局方式正常布局，把px单位换算成rem（较小的长度比如1px的边框就不需要转换成rem,直接设置px）

19,单行文本溢出显示省略号
P{ width:200px； /限定盒子的宽度/ overflow:hidden; /给元素设置溢出隐藏属性/ text-overflow:ellipsis; /文本溢出显示省略号/ white-space:nowrap; /文本不换行/ }
多行文本溢出显示省略号
方法1：利用WebKit的CSS扩展属性(只有-webkit内核才有作用)
P{
width:200px； /限定盒子的宽度/
overflow: hidden; /给元素设置溢出隐藏属性/
text-overflow: ellipsis; /文本溢出显示省略号/
display: -webkit-box; /将对象作为弹性伸缩盒子模型显示/
-webkit-line-clamp: 2;/用来限制在一个块元素显示的文本的行数,这是一个不规范的属性，它没有出现在 CSS 规范草案中。/
-webkit-box-orient: vertical;/设置或检索伸缩盒对象的子元素的排列方式/
}
方法2：利用伪元素模拟溢出显示省略号的效果（兼容性比较好）
代码部分：after中有display：block，已经绝对定位，不需要再转成块元素，将display：block删除:
实现要点：
将height设置为line-height的整数倍，防止超出的文字露出。
给 .p1:after 添加渐变背景可避免文字只显示一半。
4个background是一个意思，一个效果，只是为了兼容不同浏览器；常用浏览器使用最后一个background就可以了。

20,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局。响应式布局是根据设备屏幕宽度不同适当调整标签显示布局，在每种设备屏幕宽度的设备下呈现的界面是不同的。

响应式网站的优点：

减少工作量 网站、设计、代码、内容都 只需要一份，多出来的工作量只是JS脚本、CSS样式做一些改变

节省时间

每个设备都能得到正确的设计

响应式网站的缺点：

会加载更多的样式和脚本资源

设计比较难精确定位和控制

老版本浏览器兼容不好