H5移动web开发

目录

1、H5 的新特性有哪些？C3 的新特性有哪些？

2、如何使一个盒子水平垂直居中？

方法一：利用定位（常用方法,推荐）

方法二：利用 margin:auto

方法三：利用 display:table-cell

方法四：利用 display：flex;设置垂直水平都居中

方法五：利用 transform

3、如何实现双飞翼（圣杯）布局？

方法1、利用定位实现两侧固定中间自适应

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

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

4、CSS 的盒模型？

5、CSS 中选择器的优先级以及 CSS 权重如何计算？

6、列举 5 个以上的 H5input 元素 type 属性值？

7、CSS 中哪些属性可继承，哪些不可以？ 

8、CSS 单位中 px、em 和 rem 的区别？

9、rem 适配方法如何计算 HTML 根字号及适配方案？

10、display：none 与 visibility：hidden 的区别？

11、position 的值有哪些，分别有哪些作用？

12、为什么会出现浮动？浮动元素会引起什么问题？如何清除浮动？

13、简述弹性盒子 flex 布局及 rem 布局？

14、如何解决 margin“塌陷”

15、::before 和::after 中双冒号和单冒号有什么区别、作用？

16、CSS3 新增伪类，以及伪元素？

17、Bootstrap 栅格系统的工作原理？

 18、BFC 是什么？

9、什么是渐进增强和优雅降级?它们有什么不同？

20、iframe 有哪些优缺点？

21、使用 CSS 怎么让 Chrome 支持小于 12px 的文字比如 10px？

1、H5 的新特性有哪些？C3 的新特性有哪些？

H5性特性

1、 拖拽释放(Drapanddrop)APIondrop
拖放是一种常见的特性， 即抓取对象以后拖到另一个位置
在HTML5中， 拖放是标准的一部分， 任何元素都能够拖放
2、 自定义属性data-id
3、 语义化更好的内容标(header,nav,footer,aside,article,section)
4、 音频,视频(audio,video)如果浏览器不支持自动播放怎么办?在
属性中添加autoplay(谷歌浏览器不支持音频自动播放， 但是视频支
持静音自动播放)
5、 画布Canvas
5.1） getContext()方法返回一个用于在画布上绘图的环境
Canvas.getContext(contextID)参数contextID指定了您想要在画布上
绘制的类型。 当前唯一的合法值是“2d” ， 它指定了二维绘图， 并且导
致这个方法返回一个环境对象， 该对象导出一个二维绘图API
5.2） cxt.stroke()绘制线条
5.3） 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 模式
2、文字阴影(text-shadow)
3、边框: 圆角(border-radius) 边框阴影 : box-shadow

4、盒子模型: box-sizing
5、背景:background-size background-origin background-clip
6、渐变: linear-gradient , radial-gradient
7、过渡 : transition 可实现属性的渐变
8、自定义动画 animate @keyfrom
9、媒体查询 多栏布局 @media screen and (width:800px) {…}
10、border-image 图片边框
11、2D 转换/3D 转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
12、字体图标 iconfont/icomoon
13、弹性布局 flex

2、如何使一个盒子水平垂直居中？

方法一：利用定位（常用方法,推荐）

这种方法的优点是简单直观，主要是利用了定位，元素定位之后，再使用margin样式将元素根据自身的宽高值的一半进行偏移调整，让其实现居中

缺点也很明显，我们得知道子元素的宽高，如果我们不能确定子元素的宽高，那么这个方法并不很适合哦

方法二：利用 margin:auto

这个方法主要利用了定位的另外一个特性，通过设置四个方向上的值，让元素自动的计算出与四个方向上的距离

方法三：利用 display:table-cell

这个方法是修改了元素本身的块级属性，让其能够支持垂直对齐

方法四：利用 display：flex;设置垂直水平都居中

这个方法重要利用了伸缩布局的属性，这也是开发中常用的方法

方法五：利用 transform

3、如何实现双飞翼（圣杯）布局？

方法1、利用定位实现两侧固定中间自适应

1.1）父盒子设置左右 padding 值

1.2）给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处.

1.3）中间盒子自适应

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

2.1）父盒子设置 display:flex;

2.2）左右盒子设置固定宽高

2.3）中间盒子设置 flex:1 ;

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

3.1）左右固定宽高，进行浮动

3.2）中间 overflow: hidden;

4、CSS 的盒模型？

盒模型是CSS控制页面布局的一个非常重要的概念，页面上的所有元素，包括文本、图像、超级链接、div块等，都可以被看作盒子。

由盒子将页面中的元素包含在一个矩形区域内，这个矩形区域则称为“盒模型”

盒子模型分为两种:

第一种是 W3C 标准的盒子模型（标准盒模型）
第二种 IE 标准的盒子模型（怪异盒模型）

5、CSS 中选择器的优先级以及 CSS 权重如何计算？

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

 

优先级注意点:

1. 权重是有四位数字组成,但是不会有进位.

2. 可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,依次类推.

3. 等级判断从左向右,如果某一位数值相同,则判断下一位数值.

4. 可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器100,行内样式为1000, ！Important无穷大.

5. 继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0

权重叠加: 如果是复合选择器,则会有权重叠加,需要计算权重.

6、列举 5 个以上的 H5input 元素 type 属性值？

 

7、CSS 中哪些属性可继承，哪些不可以？ 

能继承的属性
1. 字体系列属性:font、font-family、font-weight、font-size、font-style;
2. 文本系列属性:
2.1）内联元素：color、line-height、word-spacing、letter-spacing、
text-transform;
2.2）块级元素：text-indent、text-align;
3. 元素可见性：visibility
4. 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、
table-layout;
5. 列表布局属性：list-style
不能继承的属性
1. display：规定元素应该生成的框的类型；
2. 文本属性：vertical-align、text-decoration;
3. 盒子模型的属性：width、height、margin 、border、padding;
4. 背景属性：background、background-color、background-image;
5. 定位属性：float、clear、position、top、right、bottom、left、min-width、
min-height、max-width、max-height、overflow、clip;

8、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

9、rem 适配方法如何计算 HTML 根字号及适配方案？

通用方案
1、设置根 font-size：625%（或其它自定的值，但换算规则 1rem 不能小于 12px）
2、通过媒体查询分别设置每个屏幕的根 font-size
3、CSS 直接除以 2 再除以 100 即可换算为 rem
优：有一定适用性，换算也较为简单
劣：有兼容性的坑，对不同手机适配不是非常精准；需要设置多个媒体查询来适应不同
手机，单某款手机尺寸不在设置范围之内，会导致无法适配

10、display：none 与 visibility：hidden 的区别？

区别：

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

11、position 的值有哪些，分别有哪些作用？

静态定位：static 默认值不脱离文档流，top，right，bottom，left 等属性不生效
绝对定位：absolute
绝对定位的关键是找对参照物：找到最近的一级带有带定位的父级元素进行位置移动
如果找不到，那么相对于浏览器窗口进行定位
注：设置了 position:absolute;属性后，元素会脱离正常文档流，不在占据空间；左右 margin
为 auto 将会失效；我们通过 left、top、bottom、right 来决定元素位置
相对定位：relative
参照物：元素偏移前位置
注：设置了相对定位，左右 margin 为 auto 仍然有效、并且不会脱离文档流。
固定定位：fixed
参照物：浏览器窗口；
注：固定定位会脱离文档流；
当绝对定位和固定定位参照物都是浏览器窗口时的区别： 当出现滚动条时，固定定位
的元素不会跟随滚动条滚动，绝对定位会跟随滚动条滚动

12、为什么会出现浮动？浮动元素会引起什么问题？如何清除浮动？

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

浮动元素引起的问题？

• 父元素的高度无法被撑开，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素会跟随其后
• 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

清除浮动的方式如下：

给父级div定义height属性
最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式
包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
使用 :after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout**
 

13、简述弹性盒子 flex 布局及 rem 布局？

flex布局方式
采用flex布局的元素,成为flex为容器,所有的子元素,都包含在容器内,容器存在两个默认的轴
水平主轴
主轴的开始位置(与边框的交叉点)叫做main start结束位置叫做main end
垂直交叉轴
交叉轴的起始位置叫做cross start结束位置叫做cross end
常用属性
flex-direction(决定主轴的排列方向)
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap(默认都在一行显示,该属性课实现换行排列)
nowrap(默认值): 不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content(定义了项目在主轴上的对齐方式)
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items(定义项目在交叉轴上如何对齐)
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content(定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用)
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等，所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴
rem布局方式
rem是什么?
rem（font size of the root element）是指相对于根元素的字体大小的单位，简单的说它就是一个相对单位,看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位,它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算
rem布局
原理是，先按定高宽设计出来页面，然后转换为rem单位，配合js查询屏幕大小来改变html的font-size，最终做出所谓的完美自适应
rem使用场景
rem+js是宽度自适应，无法做到高度自适应，所以那些对高度要求很高的rem+js无法实现,改变浏览器宽度，你会发现，页面所有元素的高宽都等比例缩放，也就是大屏幕下导航是横的，小屏幕下还是横的只不过变小了
优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应
缺点：碰到重视高度的设计，或者重视元素间间距的设计，那就玩不开了
 

14、如何解决 margin“塌陷”

外边距塌陷共有两种情况：
第一种情况：两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给
margin-top，那么他们两个的间距会重叠，以大的那个计算。解决这种情况
的方法为：两个外边距不同时出现
第二种情况：两个父子元素，内部的盒子给 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;
}

15、::before 和::after 中双冒号和单冒号有什么区别、作用？

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等
伪元素在 CSS1 中已存在，当时语法是用 : 表示，如 :before 和 :after
后来在 CSS3 中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
由于低版本 IE 对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语
法表示伪元素
单冒号（:）用于 CSS3 的伪类
双冒号（::）用于 CSS3 的伪元素
想让插入的内容出现在其它内容前，使用::before，否则，使用::after；
在代码顺序上，::after 生成的内容也比::before 生成的内容靠后
作用：
::
b
efore 和::after 的主要作用是在元素内容前后加上指定内容伪类与伪元素都是用于向
选择器加特殊效果
伪类与伪元素的本质区别就是是否抽象创造了新元素
伪类只要不是互斥可以叠加使用
伪元素在一个选择器中只能出现一次，并且只能出现在开始和末尾
伪类与伪元素优先级分别与类、标签优先级相同

16、CSS3 新增伪类，以及伪元素？

CSS3 新增伪类
p:first-of-type 选择属于其父元素的首个<p>元素
p:last-of-type 选择属于其父元素的最后<p>元素
p:nth-child(n) 选择属于其父元素的第 n 个子元素并且必须是<p>元素
p:nth-last-child(n) 选择属于其父元素的倒数第 n 个子元素并且必须是<p>元素
p:nth-of-type(n) 选择属于其父元素第 n 个<p>元素
p:nth-last-of-type(n) 选择属于其父元素倒数第 n 个<p>元素
p:last-child 选择属于其父元素最后一个子元素的并且必须是<p>元素
p:target 和锚点链接一起使用
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素
(target element)。
:target 选择器可用于选取当前活动的目标元素。
:not(p) 选择非<p>元素
:enabled 选中不在禁用状态下的表单控件
:
disabled 选中禁用状态下的表单控件
:checked 选中 单选框或复选框被选中 的元素
伪元素
::
first-letter 将样式添加到文本的首字母
::
first-line 将样式添加到文本的首行
::
b
efore 在某元素之前插入某些内容
::after 在某元素之后插入某些

17、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、栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕覆盖栅格类

 18、BFC 是什么？

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

哪些元素会生成 BFC：
1、根元素
2、float 属性不为 none
3、position 为 absolute 或 fixed
4、display 为 inline-block， table-cell， table-caption， flex， inline-flex
5、overflow 不为 visible

布局规则
1、内部的 Box 会在垂直方向，一个接一个地放置

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

9、什么是渐进增强和优雅降级?它们有什么不同？

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

20、iframe 有哪些优缺点？

iframe 的优点：
1、重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的
传输，加快了网页下载速度)
2、技术易于掌握，使用方便，使用者众多，可主要应用于不需搜索引擎来搜索的页面
iframe 的缺点：
3、iframe 会阻塞主页面的 Onload 事件；
4、会产生很多页面，不容易管理
5、不容易打印（目前只能实现分框架页面的打印，不能实现对 frameset 的打印）
6、浏览器的后退按钮无效（只能针对实现当前光标所在页面的前进与后退，无法实现
frameset 整个页面的前进与后退）
7、代码复杂,无法被一些搜索引擎索引到（有些搜索引擎对框架结构的页面不能正确
处理，会影响到搜索结果的排列名次）
8、多数小型的移动设备（手机）无法完全显示框架
9、多框架的页面会增加服务器的 http 请求，影响页面的并行加载。
（并行加载：同一时间针对同一域名下的请求。一般情况，iframe 和所在页面在同一个
域下面，而浏览器的并加载的数量是有限制的。

21、使用 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>