移动web自测

---

theme: channing-cyan

一.H5移动web开发

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

H5新特新

1. 拖拽释放 (Drap and drop) API ondrop
   • 拖放是一种常见的特性，即抓取对象以后拖到另一个位置,在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
2. 自定义属性 data-id
3. 语义化更好的内容标签 (header,nav,footer ,aside, article, section)
4. 音频、视频(audio,video)
   • 如果浏览器不支持持自动播放怎么办? 在属性中添加autoplay(谷歌浏览器不支持音频自动播放，但是视频支持静音自动播放)
5. 画布 canvas
6. 地理(Geolocationn)API其实 Geolocation 就是用来获取到当前设备的经纬度(位置)
7. 本地离线存储localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
8. 临时存储 sessionStorage 该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
9. 表单控件 alendar , 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 backgroun-origin background-clip
6. 渐变：linear-gradient, radial-gradient
7. 过渡：transition可实现属性的渐变
8. 自定义动画 annimate @keyform
9. 媒体查询 多栏布局 @media screen and(width:800px) {}
10. 图片边框：border-image
11. 2D转换/3D转换：transform:translate(x,y) rotate(x,y) skew(w,y) scale(x,y)
12. 字体图标 iconfont/icommon 13.弹性布局：flex

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

• 方法一:利用定位(常用方法,推荐)

```html

我是子元素

```

```css .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; } + 方法二：利用 margin:auto; css .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; } + 方法三：display：table-cell css .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; } + 方法四：利用 `display：flex;`设置垂直水平都居中 css .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; } ```

• 方法五：利用 transform ```css .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%); } ```

3.CSS 的盒模型？

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

• 盒子模型分为两种:
  • 第一种是 W3C 标准的盒子模型(标准盒模型)
  • 第二种 IE 标准的盒子模型(怪异盒模型)

• 标准盒模型与怪异盒模型的表现效果的区别之处：

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

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

• 怪异盒模型中的 width 指的是内容、边框、内边距总的宽度(content + border + padding)；height 指的是内容、边框、内边距总的高度
  • 怪异盒模型下盒子的大小 = width(content + border + padding) + margin

除此之外，我们还可以通过属性 box-sizing 来设置盒子模型的解析模式可以为 box-sizing 赋 两个值：

• content-box：默认值，border 和 padding 不算到 width 范围内，可以理解为是 W3c 的标 准模型(default)，总宽= width + padding + border + margin
• border-box：border 和 padding 划归到 width 范围内，可以理解为是 IE 的怪异盒 模 型，总宽 = width + margin

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

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

权重

5.CSS 中哪些属性可继承，哪些不可以？

能继承的属性

1. 字体系列属性：font、font-family、font-weight、font-size、font-style;
2. 文本系列属性:
   • 内联元素：color、line-height、word-spacing、letter-spacing、 text-transform;
   • 块级元素：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;

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

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

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

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

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

7.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 值代入 x js document.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 编辑器插件开发时， 单 位计算复杂

8.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 会引起重绘

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

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

为什么需要清除浮动

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

清除浮动的方式

1. 使用 CSS 中的 clear:both;(放一个空的标签，并设置上述 css，注意该标签必须是块元素), 属性来清除元素的浮动 可解决 2、3 问题
2. 对于问题 1，添加如下样式，给父元素添加 clearfix 样式： ```css .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }

/* for IE / .clearfix { *zoom: 1; } 3. 给父级元素设置双伪元素 html

aaa

```

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

10.如何解决 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. 利用伪元素给父元素的前面添加一个空元素 css .father::before { content" ''; display:table; }

11.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