移动web自测

MINT
67 阅读9分钟

一.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.如何使一个盒子水平垂直居中？

  • 方法一:利用定位（常用方法,推荐）
<div class="parent">
    <div class="child">我是子元素</div>
</div>

.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;
.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
.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;设置垂直水平都居中
.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
.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

image.png

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

image.png

除此之外，我们还可以通过属性 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 选择器>类选择器>标签>通配符>继承>浏览器默认属性

权重

image.png

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
document.documentElement.style.fontSize = document.documentElement.clientWidth / x + 'px';
  1. 设计稿 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 样式：
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

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

<div class="container clearfix">
    <div class="wrap">aaa</div>
</div>
  1. 给父级元素设置 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. 利用伪元素给父元素的前面添加一个空元素
.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
avatar
文章
阅读
粉丝