web学习笔记7-面试题总结

HTML

Doctype(文档类型)的作用

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，它必须声明在HTML⽂档的第⼀⾏。书写声明，浏览器就会按照W3C的标准来解析，即进入标准模式。如果不声明，浏览器就会按照自己的标准来解析，即进入怪异模式。不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。

Head标签有什么作用，其中有什么标签必不可少

Head标签用于定义文档的头部，它是所有头部元素的容器。Head元素可以引用脚本、指示浏览器在哪里找到样式表，提供元信息等

文档的头部描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及和其他文档的关系。绝大多数文档头部包含的数据都不会真正作为内容显示给读者

Title标签是head中必不可少的标签，表示的是html文档的标题，现在默认是document

常用的meta标签有哪些

Charset 编码类型，常用编码utf-8,俗称万国码

viewport适配移动端，可以控制视口的大小和比例：一般width=device-width

src和href的区别

src用于替换当前的元素，href用于在当前文档和引用资源之间确立练习。

Src

Src是source的缩写，指向外部的资源的位置，指向的内容将会嵌入到文档中当前的标签所在的位置；在请求src资源时会将其指向的资源下载并应用到文档中，例如js脚本、img图片等。当浏览器解析到该元素时，会暂停其他资源的下载，优先把该资源加载编译执行，这也是为什么js的脚本文件放在body的最后引用。

Href

指向资源所在的位置，建立当前元素与资源之间的联系，如果在文档中添加那么浏览器识别该文档为css文件，就会并行下载资源并且不会停止对文档的处理。

对html语义化（结构化）的理解

语义化是h5提出的根据html内容与结构选择合适的标签，这样的标签无论是对机器还是开发人员都是十分友好的

对机器：语义化的标签能够让我们的搜索引擎，网络爬虫快速的确定页面中那些内容是比较重要的部分，提升搜索速率。

对于开发人员：语义化标签使得代码的可读性增强

语义化标签：header头部 nav导航栏 section节 article文章内容 aside侧边栏 footer底部

说一说H5新增的input表单控件

Number 数字控件

Color    颜色控件

Date       日期控件  month 月份控件   week 星期控件

search    搜索控件

range     范围控件

Label的作用是什么？如何使用？

在一些页面中，我们需要将文字或其他一些元素同按钮、输入框等关联起来，使得能够同时获得焦点，这个时候我们就需要使用label来完成这一操作。

1通过label的for id绑定

2将需要绑定的内容写到label当中，不推荐这样的作法。

Iframe有哪些优缺点

Iframe元素可以帮助我们引用其他文档中已经写好的模块，直接在本文档中生效。是前端模块化开发的一种，增强代码的复用性。

优点：

• 用来加载速度较慢的内容（如广告）
• 可以使脚本可以并行下载
• 可以实现跨子域通信

缺点：

• iframe 会阻塞主页面的 onload 事件
• 无法被一些搜索引擎索识别
• 会产生很多页面，不容易管理

行内元素、块级元素、空（void）元素对应的html标签有哪些

空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签（单标签）

行内元素有：a b span img input select strong；

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；

空元素：<br>、<hr>、<img>、<input>、<link>、<meta>；

CSS

常用CSS选择器及其优先级

ID选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器>兄弟选择器（~）=相邻兄弟选择器（+）=子代选择器（>）=后代选择器=通配符选择器（*）

伪元素和伪类的区别和作用

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码找到它们，因此，称为“伪”元素。例如：::before在内容前面添加元素，::after在内容后面添加元素

伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：:link  :visited :hover :active 选择的是元素的不同状态。这样既不用添加新的元素还能为元素的不同状态添加不同的样式进行区分。

Display的属性值及其作用

display:none; 元素不显示，并且会从文档流中移除

display:block; 将元素强制转化成块级元素，独占一行，默认宽度为父级元素的百分百，可以设置宽高

display:inline; 行内元素类型，高宽均靠内容撑起来，不可自设置，在一行显示，宽度不够再换行

display:inline-block; 行内块元素，兼顾行内和块级元素的特点，同行显示，可自设宽高

行内、行内块、块级元素的区别是？

三种元素最大的区别就是是否独占一行，是否可以自设宽高

块级元素：独占一行，可以自设宽高

行内块：同行显示，可自设宽高

行内元素：同行显示，宽高靠内容撑起

说说你对盒子模型的理解

盒模型都是由四个部分组成的，分别是margin、border、padding和content。

盒子模型分两种：内容盒子、边框盒子（怪异盒模型）

内容盒子：设置的宽高给到的是content区域，border和padding设置值时，会增加整个和模型的宽高。

边框盒子：设置的宽高就是盒模型的宽高。border和padding设置值时，会向内压缩内容区域的宽高，盒模型整体宽高不会改变。

Margin无论再那种模型当中，都不会计算到盒模型的宽高当中

如果两张图片之间想要留一点空白，可以有那些实现方案？那种好？为什么？

1在引入图片的标签img之间加一个空格

2将图片放在盒子当中，为盒子设置外间距。

设置外间距方法更好，空白可以调整

如何隐藏一个元素，有哪几种方法

1. 1. 修改显示模式，display:none;元素不显示，且失去文档流
   2. 显示隐藏，visibility: hidden：元素在页面中仍占据空间，
   3. Opacity:0; 修改透明度为透明
   4. Transform:scale(0,0)将缩放设为0 ，元素仍在文档中占据空间
   5. 移出可视空间

Transition和animation的区别

Transition是过渡属性，实现元素位置，大小，颜色等的一种变化过程，过渡需要进行触发才能发生，如onclick 、hover 、keydown等事件的发生

Animation 动画属性 ，不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画

对CSSprites的理解

精灵图在html中的应用，可以用一张图片包裹页面大部分的小图标样式，这样就可以减少频繁加载图片造成的性能损失。但是在图片合并时，要把多张图片有序的，合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。而且如果在自适应的页面中，很有可能造成图片失真。

Css优化和提高性能的方法有哪些

提高加载性能：

Css压缩：将写好的css进行打包压缩，可以减小文件体积

Css单一样式：在查看框架底层代码时我们可以发现，样式的设置都是单一样式进行设置的，如外边距就是margin 上下左右四个方向单都设置，而不是写在一起。

减少@import的使用，尽量使用link引用，因为link在页面加载时一起加载，而@import则是等待页面加载完成以后再加载

选择器性能：

（1）关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；

（2）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。

（3）避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素进行选择。

（4）尽量少的去对标签进行选择，而是用class。

（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。

（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

渲染性能：

（1）慎重使用高性能属性：浮动、定位。

（2）尽量减少页面重排、重绘。

（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。

（4）属性值为0时，不加单位。

（5）属性值为浮动小数0.**，可以省略小数点之前的0。

（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。

（7）不使用@import前缀，它会影响css的加载速度。

（8）选择器优化嵌套，尽量避免层级过深。

（9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。

（10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。

（11）不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

可维护性、健壮性：

（1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。

1. 样式与内容分离：将css代码定义到外部css中。

说一说常见的CSS尺寸单位

px  像素值 1px=一个像素点

em 父节点字体大小的百分比值 1em等于一个字体大小

rem html根节点的字体大小，在Google浏览器，1rem = 16px

vw  相对于设备宽度的百分比单位，100vw = 设备宽度

vh  相对于设备高度的百分比单位，100vh = 设备高度

对flex布局的理解及其使用场景

Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿水平主轴排列。

以下6个属性设置在容器上：

• flex-direction属性决定主轴的方向（即项目的排列方向）。
• flex-wrap属性定义，如果一条轴线排不下，如何换行。
• flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
• justify-content属性定义了项目在主轴上的对齐方式。
• align-items属性定义项目在交叉轴上如何对齐。
• align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

以下6个属性设置在项目上：

• order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
• align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

简单来说：

flex布局是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。一个容器默认有两条轴：一个是水平的主轴，一个是与主轴垂直的交叉轴。可以使用flex-direction来指定主轴的方向。可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。对于容器中的项目，可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例，还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。

Flex:1表示什么？

Flex:1是flex-grow:1  flex-shrink:1  flex-basic:auto 三个属性的缩写，flex:1自动适应弹性盒的剩余空间，因此我们在用弹性盒做单飞翼，双飞翼布局时，需要自动适应的部分就添加flex:1。

响应式设计的概念及基本原理

响应式网站设计（Responsive Web design）是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

关于原理： 基本原理是通过媒体查询（@media）查询检测不同的设备屏幕尺寸做处理。

关于兼容： 页面头部必须有mate声明的viewport。

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

对BFC的理解，如何创建BFC

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗来讲：BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

创建BFC的条件：

• 根元素：body；
• 元素设置浮动：float 除 none 以外的值；
• 元素设置绝对定位：position (absolute、fixed)；
• display 值为：inline-block、table-cell、table-caption、flex等；
• overflow 值为：hidden、auto、scroll；

BFC的特点：

• 垂直方向上，自上而下排列，和文档流的排列方式一致。
• 在BFC中上下相邻的两个容器的margin会重叠
• 计算BFC的高度时，需要计算浮动元素的高度
• BFC区域不会与浮动的容器发生重叠
• BFC是独立的容器，容器内部元素不会影响外部元素
• 每个元素的左margin值和容器的左border相接触

BFC的作用：

• 解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
• 解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。
• 创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。

.left{

     width: 100px;

     height: 200px;

     background: red;

     float: left;

 }

 .right{

     height: 300px;

     background: blue;

     overflow: hidden;

 }

<div class="left"></div>

<div class="right"></div>

左侧设置float:left，右侧设置overflow: hidden。这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局。

什么是margin重叠问题？如何解决？

问题描述：

两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。

计算原则：

折叠合并后外边距的计算原则如下：

• 如果两者都是正数，那么就去最大者
• 如果是一正一负，就会正值减去负值的绝对值
• 两个都是负值时，用0减去两个中绝对值大的那个

解决办法：

对于折叠的情况，主要有两种：兄弟之间重叠和父子之间重叠

（1）兄弟之间重叠

• 底部元素变为行内盒子：display: inline-block
• 底部元素设置浮动：float
• 底部元素的position的值为absolute/fixed

（2）父子之间重叠

• 父元素加入：overflow: hidden
• 父元素添加透明边框：border:1px solid transparent
• 子元素变为行内盒子：display: inline-block
• 子元素加入浮动属性或定位

元素的层叠顺序

层叠顺序，英文称作 stacking order，表示元素发生层叠时有着特定的垂直显示顺序。下面是盒模型的层叠规则：

对于上图，由上到下分别是：

（1）背景和边框：建立当前层叠上下文元素的背景和边框。

（2）负的z-index：当前层叠上下文中，z-index属性值为负的元素。

（3）块级盒：文档流内非行内级非定位后代元素。

（4）浮动盒：非定位浮动元素。

（5）行内盒：文档流内行内级非定位后代元素。

（6）z-index:0：层叠级数为0的定位元素。

（7）正z-index：z-index属性值为正的定位元素。

注意: 当定位元素z-index:auto，生成盒在当前层叠上下文中的层级为 0，不会建立新的层叠上下文，除非是根元素。

 position的属性有哪些，区别是什么

position有以下属性值：

前面三者的定位方式如下：

absolute:生成绝对定位的元素，相对于static定位以外的一个父元素进行定位。元素的位置通过left、top、right、bottom属性进行规定。

relative: 生成相对定位的元素，相对于其原来的位置进行定位。元素的位置通过left、top、right、bottom属性进行规定。

fixed: 生成绝对定位的元素，指定元素相对于屏幕视⼝（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，⽐如回到顶部的按钮⼀般都是⽤此定位⽅式

inherit: 规定从父元素继承position属性的值

• relative：元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。

• fixed：元素的定位是相对于 window （或者 iframe）边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。

• absolute：元素的定位相对于前两者要复杂许多。如果为 absolute 设置了 top、left，浏览器会根据什么去确定它的纵向和横向的偏移量呢？答案是浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。如下两个图所示：