整理一份面试宝典 Web & H5 篇

最近在准备找工作，准备一份面试宝典放在这里，同样在找工作的小伙伴一起看

H5 移动 web 开发

H5 的新特性有哪些？C3 的新特性有哪些？（必会）

H5 新特性

1. 拖拽释放(Drap and drop) API ondrop

2. 自定义属性 data-id

3. 语义化更好的内容标签(header,nav,footer ,aside, article, section)

4. 音频 ,视频(audio, video) 如果浏览器不支持自动播放怎么办? 在属性中添加 autoplay(谷歌浏览器不支持音频自动播放，但是视频支持静音自动播放)

5. 画布 Canvas

   • getContext() 方法返回一个用于在画布上绘图的环境 Canvas.getContext(contextID) 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API
   • cxt.stroke() 绘制线条
   • canvas 和 image 在处理图片的时候有什么区别? image 是通过对象的形式描述图片的,canvas 通过专门的 API 将图片绘制在画布上.

6. 地理(Geolocation) API 其实 Geolocation 就是用来获取到当前设备的经纬度（位置）

7. 本地离线存储 localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除

8. sessionStorage 该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

9. 表单控件 calendar , date , time , email , url , search , tel , file , number

10. 新的技术 webworker, websocket , Geolocation

CSS3 新特性

1 颜色: 新增 RGBA , HSLA 模式 0. 文字阴影(text-shadow) 0. 边框: 圆角(border-radius) 边框阴影 : box-shadow 0. 盒子模型: box-sizing 0. 背景:background-size background-origin background-clip 0. 渐变: linear-gradient , radial-gradient 0. 过渡 : transition 可实现属性的渐变 0. 自定义动画 animate @keyfrom 0. 媒体查询 多栏布局 @media screen and (width:800px) {…} 0. border-image 图片边框 0. 2D 转换/3D 转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y) 0. 字体图标 iconfont/icomoon 0. 弹性布局 flex

如何使一个盒子水平垂直居中？（必会）

html结构

    <div class="parent">      
        <div class="child">我是子元素</div>  
    </div>

1. 利用定位（常用方法,推荐）

.parent {   
    width: 500px;   
    height: 500px;   
    border: 1px solid #000;   
    position: relative;   
    }
.child {
     width: 100px;   
     height: 100px;   
     border: 1px solid #999;   
     position: absolute;   
     top: 50%;   
     left: 50%;   
     margin-top: -50px;   
     margin-left: -50px;   
     }

2. 利用 margin:auto;

.parent {
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    position: relative;
    }
.child {
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    }

3. 利用 display:table-cell

.parent {
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    }
.child {
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    display: inline-block;
    }

4. 利用 display：flex;设置垂直水平都居中

.parent {
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    }
.child {
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    }

5. 计算父盒子与子盒子的空间距离(这跟方法一是一个道理)

.parent {
   width: 500px;
   height: 500px;
   border: 1px solid #000;
   }
.child {
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    margin-top: 200px;
    margin-left: 200px;
    }

6. 利用 transform

.parent {
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    position: relative;
    }
 .child {
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

如何实现双飞翼（圣杯）布局？（必会）

html 结构

<div class="father">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

1. 利用定位实现两侧固定中间自适应

   • 父盒子设置左右 padding 值
   • 给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处.
   • 中间盒子自适应

   .father {
       height: 400px;
       background-color: pink;
       position: relative;
       padding: 0 200px;
   }
   .left,.right {
       width: 200px;
       height: 300px;
       background-color: yellow;
       position: absolute;
       top: 0;
   }
   .left {
       left: 0;
   }
   .right {
       right: 0;
   }
   .center {
       background-color: blue;
       height: 350px;
   }
   

2. 利用 flex 布局实现两侧固定中间自适应

   • 父盒子设置 display:flex;
   • 左右盒子设置固定宽高
   • 中间盒子设置 flex:1 ;

   .father {
       height: 400px;
       background-color: pink;
       display: flex;
       }
   .left {
       width: 200px;
       height: 300px;
       background-color: yellow;
       }
   .right {
       width: 200px;
       height: 300px;
       background-color: yellow;
       }
   .center {
       flex: 1;
       background-color: blue;
       }
   

3. 利用 bfc 块级格式化上下文, 实现两侧固定中间自适应

   • 左右固定宽高，进行浮动
   • 中间 overflow: hidden;

   .father {
       height: 500px;
       background-color: pink;
       }
   .left {
       float: left;
       width: 200px;
       height: 400px;
       background-color: blue;
       }
   .right {
       float: right;
       width: 200px;
       height: 400px;
       background-color: blue;
       }
   .center {
       height: 450px;
       background-color: green;
       overflow: hidden;
       }
   

CSS 的盒模型？（必会）

盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分

盒子模型分为两种:

• 标准盒模型

  标准盒模型中 width 指的是内容区域 content 的宽度

  height 指的是内容区域 content 的高度

  标准盒模型下盒子的大小 = content + border + padding + margin

• 怪异盒模型

  怪异盒模型中的 width 指的是内容、边框、内边距总的宽度（content + border +padding）；

  height 指的是内容、边框、内边距总的高度

  怪异盒模型下盒子的大小=width（content + border + padding） + margin

CSS 中选择器的优先级以及 CSS 权重如何计算？（必会）

！Important>行内样式>ID 选择器>类选择器>标签>通配符>继承>浏览器默认属性

权重

CSS 权重选择器优先级计算表格：

选择器	选择器权重通
继承 或者 *	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID 选择器	0，1，0，0
行内样式 style=" "	1，0，0，0
!important 重要的	∞ 无穷大

优先级注意点:

1 权重是有 4 组数字组成,但是不会有进位。 0. 可以理解为类选择器永远大于元素选择器, id 选择器永远大于类选择器,以此类推.. 0. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。 0. 可以简单记忆法: 通配符和继承权重为 0, 标签选择器为 1,类(伪类)选择器为 10, id 选择器 100, 行内样式表为 1000, !important 无穷大. 0. 继承的权重是 0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

• div ul li ------> 0,0,0,3

• .nav ul li ------> 0,0,1,2

• a:hover ------> 0,0,1,1

• .nav a ------> 0,0,1,1

列举 5 个以上的 H5input 元素 type 属性值？（必会）

值	描述
button	定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
checkbox	定义复选框
color	定义拾色器.
date	定义日期字段（带有 calendar 控件）
month	定义日期字段的月（带有 calendar 控件）
time	定义日期字段的时、分、秒（带有 time 控件）
email	定义用于 e-mail 地址的文本字段
file	定义输入字段和 "浏览..." 按钮，供文件上传
hidden	定义隐藏输入字段
image	定义图像作为提交按钮
number	定义带有 spinner 控件的数字字段
password	定义密码字段。字段中的字符会被遮蔽。
radio	定义单选按钮。
search	定义用于搜索的文本字段
submit	定义提交按钮。提交按钮向服务器发送数据
text	默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
url	定义用于 URL 的文本字段。

CSS 中哪些属性可继承，哪些不可以？（必会）

• 能继承的属性

  • 字体系列属性:font、font-family、font-weight、font-size、font-style;

  • 文本系列属性:

    • 内联元素：color、line-height、word-spacing、letter-spacing、

    text-transform;

    • 块级元素：text-indent、text-align;

  • 元素可见性：visibility

  • 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout;

  • 列表布局属性：list-style

• 不能继承的属性

  • display：规定元素应该生成的框的类型；
  • 文本属性：vertical-align、text-decoration;
  • 盒子模型的属性：width、height、margin 、border、padding;
  • 背景属性：background、background-color、background-image;
  • 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip;

CSS 单位中 px、em 和 rem 的区别？（必会）

1. px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位

2. em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字 体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小因此并不是一个固定的值

3. rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素

4. 区别：

   IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通 过它 既可 以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐 层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem

rem 适配方法如何计算 HTML 根字号及适配方案？（必会）

• 通用方案

  1. 设置根 font-size：625%（或其它自定的值，但换算规则 1rem 不能小于 12px）
  2. 通过媒体查询分别设置每个屏幕的根 font-size
  3. CSS 直接除以 2 再除以 100 即可换算为 rem

  优：有一定适用性，换算也较为简单

  劣：有兼容性的坑，对不同手机适配不是非常精准；需要设置多个媒体查询来适应不同

  手机，单某款手机尺寸不在设置范围之内，会导致无法适配

• 网易方案

  1. 拿到设计稿除以 100，得到宽度 rem 值

  2. 通过给 html 的 style 设置 font-size，把 1 里面得到的宽度 rem 值代入 xdocument.documentElement.style.fontSize=document.documentElement.clientWidth / x + ‘px‘;

  3. 设计稿 px/100 即可换算为 rem

优：通过动态根 font-size 来做适配，基本无兼容性问题，适配较为精准，换算简便

劣：无 viewport 缩放，且针对 iPhone 的 Retina 屏没有做适配，导致对一些手机的适配

不是很到位

• 手淘方案

  1. 拿到设计稿除以 10，得到 font-size 基准值
  2. 引入 flexible
  3. 不要设置 meta 的 viewport 缩放值
  4. 设计稿 px/ font-size 基准值，即可换算为 rem

  优：通过动态根 font-size、viewpor、dpr 来做适配，无兼容性问题，适配精准。

  劣：需要根据设计稿进行基准值换算，在不使用 sublime text 编辑器插件开发时，

  单 位计算复杂

display：none 与 visibility：hidden 的区别？（必会）

元素隐藏和显示最常用的为 display:none 和 visibility:hidden

dispaly:none 设置该属性后，该元素下的元素都会隐藏，占据的空间消失

visibility:hidden 设置该元素后，元素虽然不可见了，但是依然占据空间的位置

区别

1. visibility 具有继承性，其子元素也会继承此属性，若设置 visibility:visible，则子元素会显示
2. visibility 不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行着。
3. 在 CSS3 的 transition 中支持 visibility 属性，但是不支持 display，因为 transition 可以延迟执行，因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以提高用户体验
4. display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘

position 的值有哪些，分别有哪些作用？（必会）

• 静态定位：static 默认值不脱离文档流，top，right，bottom，left 等属性不生效

• 绝对定位：absolute

  绝对定位的关键是找对参照物：找到最近的一级带有带定位的父级元素进行位置移动，如果找不到，那么相对于浏览器窗口进行定位

  注：设置了 position:absolute;属性后，元素会脱离正常文档流，不在占据空间；左右 margin 为 auto 将会失效；我们通过 left、top、bottom、right 来决定元素位置

• 相对定位：relative

  参照物：元素偏移前位置

  注：设置了相对定位，左右 margin 为 auto 仍然有效、并且不会脱离文档流。

• 固定定位：fixed

  参照物：浏览器窗口；

  注：固定定位会脱离文档流；

  当绝对定位和固定定位参照物都是浏览器窗口时的区别： 当出现滚动条时，固定定位的元素不会跟随滚动条滚动，绝对定位会跟随滚动条滚动

为什么会出现浮动？浮动元素会引起什么问题？如何清除浮；动？（必会）

浮动将元素排除在普通流之外，即元素将脱离文档流，不占据空间。浮动元素碰到包含它的边界或者浮动元素的边界停留

• 为什么需要清除浮动

  1. 子元素浮动后，不占位置，父元素的高度无法被撑开，影响与父元素同级的元素；
  2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后；
  3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构解决方法

• 清除浮动的方式

  1. 使用 CSS 中的 clear:both（; 放一个空的标签，并设置上述 css，注意该标签必须是块元素）, 属性来清除元素的浮动 可解决 2、3 问题

  2. 对于问题 1，添加如下样式，给父元素添加 clearfix 样式：

     .clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
     }
     /* for IE */
     .clearfix{
     *zoom:1;
     }
     

  3. 给父级元素设置双伪元素；

     <div class="container clearfix">
     <div class="wrap">aaa</div>
     </div>
     .clearfix:after{
     content:""; /*设置内容为空*/
     height:0; /*高度为 0*/
     line-height:0; /*行高为 0*/
     display:block; /*将文本转为块级元素*/
     visibility:hidden; /*将元素隐藏*/
     clear:both; /*清除浮动*/
     }
     .clearfix{
     zoom:1; /*为了兼容 IE*/
     }
     

  4. 给父级元素设置 overflow：hidden；或 overflow：auto；本质是构建一个 BFC

简述弹性盒子 flex 布局及 rem 布局？（必会）

rem 是 CSS3 新增的一个相对单位，相对于根节点(html)字体大小的值，r 就是 root

例如：html{font-size:10px} 则 2rem=20px

通过它就可以做到只修改根元素的大小，就能成比例地调整所有的字体大小，只依赖 html 字体的大小

• 适配方案步骤：

  1. 首先动态计算 html 的 font-size

  2. 将所有的 px 换算成 rem(计算过程请看下面代码和注释（注意：rem 的换算是根据设计图稿的像素计算的，下面的计算只是动态计算 html 的 font-size 大小），请看下面的注意事项

     <meta name="viewport" content="width=device-width,user-scalable=no"/>
     <style>
     body{
         margin: 0;
         }
     div{
         /*width: 80px;*/
         height: 100px;
         width: 4rem;
         height: 4rem;
         /*1rem=20; nrem=80; n=80/rem; n=80/20; n=4*/
         background: green;
         float: left;
         }
     <style>
     <body>
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     </body>
     <script>
     (function(){
         var html=document.documentElement;
         var width=html.getBoundingClientRect().width; //获取屏幕宽度(设备独立像素)如 iPhone6 为414
      html.style.fontSize=width/16+'px'; // html 的 font-size = 20px
         //iphone5 下 1rem=20 这里之所以除以 16，是因为要把宽度分成 16 份，这个数并没有固定，一般选 15，16，以 ipone5 为准是 16，因为一除可以得到整数 20，好计算。
     })();
     </script>
     

• 注意：

  1. 必需动态的去设置 html 的大小，才能适配

  2. 根据页面的宽度除以一个系数，把算出的这个值赋给 html 的 font-size 属性，rem 换算值是根据 psd 设计图的宽度/系数的 rem 系数以 640px 设计稿和 750px 的视觉稿，网易这样处理的：

     var width = document.documentElement.clientWidth; // 屏幕的布局视口宽度
     var rem = width / 7.5; // 750px 设计稿将布局视口分为 7.5 份
     var rem = width / 6.4; // 640px 设计稿将布局视口分为 6.4 份
     

     这样不管是 750px 设计稿还是 640px 设计稿，1rem 等于设计稿上的 100px。故 px 转换 rem 时：1rem = 1px * 0.01;

     在 750px 设计稿上：

     设计稿上 75px 对应 0.75rem, 距离占设计稿的 10%；

     在 ipone6 上：

     width = document.documentElement.clientWidth = 375px；

     1rem = 375px / 7.5 = 50px;

     0.75rem = 37.5px;

     (37.5/375=10%；占屏幕 10%)

     在 ipone5 上：

     width = document.documentElement.clientWidth = 320px；

     rem = 320px / 7.5 = 42.667px;

     0.75rem = 32px; (32/320=10%；占屏幕 10%)

     故对于设计稿上任何一个尺寸换成 rem 后，在任何屏下对应的尺寸占屏幕宽度的百分比相同。故这种布局可以百分比还原设计图

     • 什么要除一个数字，原因是：一个页面里，不可能全都是整屏的元素，肯定有一行中放多个元素。所以就把一行分成 n 份

     • 除一个数字的话，那 1 个 rem 就是屏幕的宽度，这个值太大，如果一个元素的宽度比它小的话，就不方便计算

     • 个系数，自己定。多少都可以，但是建议给一个能整除的值（这个能整除的数，是还要根据设计稿能整除的数。）

  3. 对于切的图片，尺寸是根据设计图的尺寸宽度的，显示起来会很大，如果是 Img 标签，可以设置宽度为切出的图片尺寸，换算成 rem，如果是 background-img，用 background-size 属性，设置设计图尺寸宽高，换算成 rem 进行图片的缩放适配。

  对于上述的第二点，根据设计稿动态转换 rem，这里说一下，前面的计算是动态的设置 html 的 font-size 的大小，这是根据设备的独立像素计算的。而设计稿往往是根据物理像素，即设备像素设计的，往往很大，是 750px 及以上，所以在转换 rem 的时候，转换是根据 psd 设计稿的像素进行转换，即 1rem = 设计稿像素宽度/系数，例如，如果是 1080px 的设计稿，那么，就用 1rem = 1080/18 = 60px（这里用 18 做系数，是因为能整除），然后布局的时候就根据设计稿的元素尺寸转换，例如设计稿一个元素的高为 60px，那么就可以转化为 1rem 了

• 特点：

  1. 所有有单位的属性会根据屏幕的尺寸自动计算大小

  2. 同样一个元素，在不同的设备下的大小是不一样的。在尺寸小的设备下显示的小，在尺寸大的设备下显示的大

  3. 一般以 iphone6 为基准，以它的宽度 750 除上一个系数，再去算 rem

     Tips：上述步骤 2 中换算可以通过 Hbuilder 将 px 自动转 rem 以及通过 less 自动计算成 rem，sublime 也可以通过插件进行自动转换

     1. 打开 Hbuilder，顶部栏的工具》选项》Hbuilder》代码助手》px 自动转 rem 设置

     2. less 自动转换：Hbuilder 也可以将 less 文件自动转成 css 文件。less 文件的书写如下所示

        比如想设置宽度为 187px，高度为 100px 的元素，可以通过下面方式计算适配

        @rem：25rem； /*这是 1rem = X px 的 X 的值，但是用了 rem 做单位而已*/
        div{
        width: 187/@rem;
        height: 100/@rem;
        }
        

        弹性布局适配(会配合 rem 适配使用 )

• 兼容情况

  IE10 及以上、ios9 及以上、android4.4 及以上版本支持

• 特点

  1. 默认所有子元素都会在一行中显示，即使给子元素一个很大的宽度

  2. 父级加了这条属性，子级的 float、vertical-align 就会失效

  3. 如果兼容低版本的机型要加前缀-webkit-，包括后面讲的所有属性

     容器属性（父元素样式） 具体看菜鸟教程或阮一峰的教程，这里说一下一些重点知识

     • flex-direction：子元素排列方向（主轴的方向，如果设置了 column，则意味着主轴旋转了 90 度）
     • flex-wrap：换行方式
     • flex-flow：以上两种方式的简写
     • justify-content：水平对齐方式（子元素在主轴上的对齐方式）
     • align-items：垂直对齐方式（子元素在交叉轴上的对齐方式）
     • align-content：多行垂直对齐方式（多根轴线的对齐方式）

• 项目属性（子元素样式）

  1. order：排列位置 //如果有两个的值是相等，按书写顺序排列

  2. flex-grow：扩展比例

  3. flex-grow 当父级的宽度大于所有子元素宽度之和时，根据父级的剩余空间，设置子元素的扩展比例（设置后，元素给的固定宽度会被覆盖）它是一个系数默认为 0，即如果存在剩余空间也不扩展

     剩余空间：剩余空间=父级的宽度-所有子元素的宽度和

     注意：如果没有设置初始宽度，也没有内容，则默认为 0，否则为内容的宽度。例如设置了

     文字，会撑开有初始宽度

     子元素宽度计算公式

     子元素的宽度=（父级的宽度-所有子元素的宽度和）/所有子元素的 flex-grow 属性值之和*子元

     素的 flex-grow 属性值+子元素初始宽度

  4. flex-shrink：收缩比例 flex-shrink：收缩比例

     flex-shrink 当所有子元素宽度之和大于父级宽度的时候，根据超出的空间，设置子元素的

     收缩比例（设置后，元素给的固定宽度会被覆盖）它是一个系数默认为 1，如果给个 0 的话，就不会收缩

     超出空间：超出空间=所有子元素的宽度和-父级的宽度

     子元素宽度计算公式

     • 算出超出空间，所有子元素的宽度和-父级的宽度
     • 子元素的初始宽度*子元素的 flex-shrink 值
     • 算出第二步所有结果的和
     • 每个子元素的第二步/第三步*第一步
     • 子元素的初始宽度-第四步

  5. flex-basis：元素的大小

  6. flex：以上三个属性的简写

  7. align-self：单独的垂直对齐方式（交叉轴方向上）

如何解决 margin“塌陷”？（必会）

外边距塌陷共有两种情况:

1. 两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给 margin-top，那么他们两个的间距会重叠，以大的那个计算。解决这种情况的方法为：两个外边距不同时出现
2. 两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生上边距，父子元素会进行粘连。

解决方案：

1. 为父盒子设置 border，添加 border 后父子盒子就不是真正意义上的贴合（可以设置成透明：border：1px solid transparent）；

2. 为父盒子添加 overflow：hidden；

3. 为父盒子设定 padding 值；

4. 为父盒子添加 position：fixed；

5. 为父盒子添加 display：table；

6. 利用伪元素给父元素的前面添加一个空元素

   .father::before { 
        content:''; 
        display:table; 
    }
   

::before 和::after 中双冒号和单冒号有什么区别、作用？（必会）

区别

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等

伪元素在 CSS1 中已存在，当时语法是用 : 表示，如 :before 和 :after

后来在 CSS3 中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类

由于低版本 IE 对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素

单冒号（:）用于 CSS3 的伪类

双冒号（::）用于 CSS3 的伪元素

想让插入的内容出现在其它内容前，使用::before，否则，使用::after；

在代码顺序上，::after 生成的内容也比::before 生成的内容靠后

作用：

• ::before 和::after 的主要作用是在元素内容前后加上指定内容伪类与伪元素都是用于向选择器加特殊效果

伪类与伪元素的本质区别就是是否抽象创造了新元素

伪类只要不是互斥可以叠加使用

伪元素在一个选择器中只能出现一次，并且只能出现在开始和末尾

伪类与伪元素优先级分别与类、标签优先级相同

CSS3 新增伪类，以及伪元素？（必会）

CSS3 新增伪类

• :first-of-type 选择属于其父元素的首个元素
• :last-of-type 选择属于其父元素的最后元素
• :nth-child(n) 选择属于其父元素的第 n 个子元素
• :nth-last-child(n) 选择属于其父元素的倒数第 n 个子元素
• :nth-of-type(n) 选择属于其父元素第 n 个元素
• :nth-last-of-type(n) 选择属于其父元素倒数第 n 个元素
• :last-child 选择属于其父元素最后一个子元素
• :target 和锚点链接一起使用 URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。
• :not(p) 选择非

  元素

• :enabled 选中不在禁用状态下的表单控件
• :disabled 选中禁用状态下的表单控件
• :checked 选中 单选框或复选框被选中 的元素

伪元素

• ::first-letter 将样式添加到文本的首字母
• ::first-line 将样式添加到文本的首行
• ::before 在某元素之前插入某些内容
• ::after 在某元素之后插入某些内容

Bootstrap 栅格系统的工作原理？（必会）

原理

1. 行（row）必须包含在.container(固定宽度)或.container-fluid(100%宽度)中，以便为其赋予合适的排列（aligment）和内补（padding）
2. 通过行（row）在水平方向创建一组列（column）
3. 自己内容应当放置于列（column）内，并且，只有列可以作为行（row）的直接子元素
4. 类似.row 和.col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化布局
5. 通过为列设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为.row 元素设置负值 margin 从而抵消为.container 元素设置的 padding，也就间接为行（row）所包含的列（column）抵消掉了 padding
6. 栅格系统的列是通过指定 1 到 12 的值来表示其跨越范围。例如三个等宽的列可以使用三个.col-xs-4 来创建
7. 如果一行（row）中包含了的列（column）大于 12，多余的列所在的元素将作为一个整体另起一行排列
8. 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕覆盖栅格类

使用 Bootstrap 响应式布局

首先需要在 head 中引入 meta 标签，添加 viewpirt 属性，content 中宽度等于设备宽度，initial-scale:页面首次被显示可见区域的缩放级别，取值 1 则页面按实际尺寸显示，无任何缩放；maximum-scale:允许用户缩放到的最小比例；user-scalable:用户是否可以手动缩放。代码如下：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">

下面为使用 Bootstrap 布局的页面（登录表单界面），针对的是手机超小屏幕（iphone5s） 和PC 屏幕（>=1200px)。col-xs-12:小屏幕占 12 列大小，col-lg-5：大屏幕占 5 列大小， col-lg-offset-3: 大屏幕缩进 3 列大小。这是一个比较简单的实例，想要适应其他屏幕如平板可添加 col-md-* 属性，大屏手机可添加 col-sm-*属性。具体的屏幕使用哪个属性，可参考文档中的针对不同屏幕 Bootstrap栅格系统的不同使用。

<div class="container-fluid login">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-5 col-lg-offset-3">
            <form class="form-horizontal loginForm">
                <h3 class="form-signin-heading">用户登录</h3>
                <div class="form-group">
                    <label for="email" class="col-sm-2 col-xs-3 control-label">邮箱</label>
                    <div class="col-sm-8 col-xs-8">
                        <input type="text" class="form-control" name="email" placeholder="请输入邮箱">
                        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-2 col-xs-3 control-label">密码</label>
                    <div class="col-sm-8 col-xs-8">
                        <input type="password" class="form-control" name="password" placeholder="请输入密码">
                        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-4 col-xs-4 ">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox">
                                记住我 
                            </label>
                        </div>
                    </div>
                    <div class="col-sm-4 col-xs-4 control-label" >
                        <a href="resetPwd.html" id="forget">忘记密码？</a>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12 col-lg-12">
                        <button type="button" class="btn btn-primary btn-block" id="submit">登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

BFC 是什么？（高薪常问）

定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干

布局规则

1. 内部的 Box 会在垂直方向，一个接一个地放置
2. Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin会发生重叠
3. 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
4. BFC 的区域不会与 float box 重叠
5. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
6. 计算 BFC 的高度时，浮动元素也参与计算

哪些元素会生成 BFC：

1. 根元素
2. float 属性不为 none
3. position 为 absolute 或 fixed
4. display 为 inline-block， table-cell， table-caption， flex， inline-flex
5. overflow 不为 visible

什么是渐进增强和优雅降级?它们有什么不同？（了解）

优雅降级和渐进增强印象中是随着 CSS3 流出来的一个概念。由于低级浏览器不支持 CSS3，但 CSS3 的效果又太优秀不忍放弃，所以在高级浏览中使用 CSS3 而低级浏览器只保证最基本的功能。关键的区别 是他们所侧重的内容，以及这种不同造成的工作流程的差异

举个例子

a {
display：block；
width：200px；
height： 100px；
background：aquamarine；
/*我就是要用这个新 css 属性*/
transition：all 1s ease 0s；
/*可是发现了一些低版本浏览器不支持怎么办呢*/
/*往下兼容*/ -webkit-transition：all 1s ease 0s；
-moz-transition：all 1s ease 0s；
-o-transition： all 1s ease 0s；
/*那么通常这样考虑的和这样的侧重点出发的 css 就是优雅降级*/
}
a:hover{
height：200px；
}
/ *那如果我们的产品要求我们要从低版本的浏览器兼容开始*/
a {
/*优先考虑低版本的*/ -webkit-transition：all 1s ease 0s；
-moz-transition：all 1s ease 0s；
-o-transition： all 1s ease 0s；
/*高版本的就肯定是渐进渐强*/
transition：all 1s ease 0s；
} 
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站
“渐进增强”观点则认为应关注于内容本身

iframe 有哪些优缺点？（了解）

iframe 的优点

1. 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，加快了网页下载速度)
2. 技术易于掌握，使用方便，使用者众多，可主要应用于不需搜索引擎来搜索的页面

iframe 的缺点：

1. iframe 会阻塞主页面的 Onload 事件；
2. 会产生很多页面，不容易管理
3. 不容易打印（目前只能实现分框架页面的打印，不能实现对 frameset 的打印）
4. 浏览器的后退按钮无效（只能针对实现当前光标所在页面的前进与后退，无法实现frameset 整个页面的前进与后退）
5. 代码复杂,无法被一些搜索引擎索引到（有些搜索引擎对框架结构的页面不能正确处理，会影响到搜索结果的排列名次）
6. 多数小型的移动设备（手机）无法完全显示框架
7. 多框架的页面会增加服务器的 http 请求，影响页面的并行加载。

（并行加载：同一时间针对同一域名下的请求。一般情况，iframe 和所在页面在同一个域下面，而浏览器的并加载的数量是有限制的

使用 CSS 怎么让 Chrome 支持小于 12px 的文字比如 10px？（了解）

做法：

针对谷歌浏览器内核，加 webkit 前缀，用 transform:scale()这个属性进行缩放！

<style>
p span{
    font-size:10px;
    -webkit-transform:scale(0.8);
    display:block;
    } 
</style>
<p>
<span>哈哈哈 10px</span>
</p>

本篇是web和h5移动开发相关，后续继续整理js相关面试资源,在这里预祝各位小伙伴都能找到理想的工作

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情