如果是在回调里置顶DIV的话（比如点击事件），可以用scrollIntoView。 scrollIntoView如果不想吸顶 可以加个before伪类设置高度 CSS3滚动置顶目前有两种解决方案： 第一种（主流）：transform: translate3d(x,y,z) 第二种（未来）：position: stickytop:xxx 假设需求： 需求一：滚动过程中A ,C区域不吸顶，B区域吸顶 VUE框架推荐直接使用vantUI插件,indexbar索引栏。https://youzan.github.io/vant/#/zh-CN/index-barvantUI原理用的是transform。 以上面图片为例大致讲解： 1.transform对JS的能力要求高些，页面加载完毕后，给每个B区域对应的DIV设置translate3d的Y轴值，值为B对应div离顶部的高度。 2.当开始滚动起来后，Y轴值为原来值减去滚动条滚动距离值 3.当Y轴值小于0的时候，锁死为0，就自动吸顶了 4.当待置顶DIV的translate3d Y轴值小于DIV的高度时，已置顶DIV的Y轴值开始变为负数，这样会有一个顶出的效果 5.已置顶DIV被待置顶DIV顶出一定距离（一般两倍DIV高度），取消translate3d属性， 6.回滚反向计算即可 需求二：滚动过程中 C不吸顶，B吸顶，A一直吸顶 B在A下面 这个需求vantUI（v2.9.3）目前解决不了,采用translate太复杂，决定采用CSS3新属性position: sticky。 如果是2018年使用该属性兼容性还是个问题，但来到2020年下半年，对大部分生产环境都不是问题。博主测试的IOS11和安卓小米 华为 都支持该属性。博主的建议是：如果是公司APP内嵌H5页面或者微信打开可以使用该属性，如果纯H5页面 ，建议translate. position: sticky字面意思就是粘性定位。 可以粘顶部也可以粘底部 右侧 左侧。 所以除了position: sticky还要给一个定位值，比如top:0px或者right:0px就可以了 非常简单。 比如直接给Bdiv设置下面样式就行 实际使用要注意下面几点： 1.如果想兼容IOS12 IOS11 必须带position: -webkit-sticky而且要在样式表里写，不能写在style里。 2.容器相关。只有要移除容器范畴才起作用。比如body的height不要设置100%，height：100%表示所有元素一直在屏幕范围

1.网络中使用最多的图片格式有哪些

JPEG,GIF,PNG,最流行的是 jpeg 格式，可以把文件压缩到最小 在 ps 以

jpeg 格式存储时，提供 11 级压缩级别

2. 请简述 css 盒子模型

一个 css 盒子从外到内可以分成四个部分：margin（外边距），border

（边框），padding（内边距），content（内容）。默认情况下，盒子的

width 和 height 属性只是设置 content（内容）的宽和高，

盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框

盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框

3. 视频 / 音频标签的使用

视频：

视频标签属性：

src 需要播放的视频地址

width/height 设置播放视频的宽高，和 img 标签的宽高属性一样

autoplay 是否自动播放

controls 是否显示控制条

poster 没有播放之前显示的展位图片

loop 是否循环播放

perload 预加载视频（缓存）与 autoplay 相冲突，设置了 autoplay 属

性，perload 属性会失效。

muted 静音模式

音频: 音频属性和视频属性差不多，不过宽高和 poster 属性不能用

4.HTML5 新增的内容有哪些

新增语义化标签

新增表单类型

表单元素

表单属性

表单事件

多媒体标签

5.Html5 新增的语义化标签有哪些

语义化标签优点：1.提升可访问性 2.seo 3.结构清晰，利于维护

Header 页面头部 main 页面主要内容 footer 页面底部

Nav 导航栏 aside 侧边栏 article 加载页面一块独立内容

Section 相 当 于 div

figure 加 载 独 立 内 容 （ 上 图 下 字 ）

figcaption figure 的标题

Hgroup 标题组合标签 mark 高亮显示 dialog 加载对话框标签（必须

配合 open 属性）

Embed 加载插件的标签 video 加载视频 audio 加载音频（支持格式

ogg，mp3，wav）

6.Css3 新增的特性

边框：

border-radios 添加圆角边框

border-shadow：给框添加阴影 （水平位移，垂直位移，模糊半径，阴

影尺寸，阴影颜色，insetr（内/外部阴影））

border-image：设置边框图像

border-image-source 边框图片的路径

border-image-slice 图片边框向内偏移

border-image-width 图片边框的宽度

border-image-outset 边框图像区域超出边框的量

border-image-repeat 图像边框是否平铺（

repeat 平铺 round 铺满

stretch 拉伸）

背景：

Background-size 背景图片尺寸

Background-origin规定background-position属性相对于什么位置定

位

Background-clip 规定背景的绘制区域（padding-box，border-box，

content-box）

渐变：

Linear-gradient（）线性渐变

Radial-gradient（）径向渐变

文本效果：

Word-break：定义如何换行

Word-wrap：允许长的内容可以自动换行

Text-overflow：指定当文本溢出包含它的元素，应该干啥

Text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）

转换：

Transform 应用于 2D3D 转换，可以将元素旋转，缩放，移动，倾斜

Transform-origin 可以更改元素转换的位置，（改变 xyz 轴）

Transform-style 指定嵌套元素怎么样在三位空间中呈现

2D 转换方法：

rotate 旋转 translate（

x，y）指定元素在二维空间的位移 scale（

n）

定义缩放转换

3D 转换方法：

Perspective（

n）为 3D 转换 translate rotate scale 过渡：

Transition-proprety 过渡属性名

Transition-duration 完成过渡效果需要花费的时间

Transition-timing-function 指定切换效果的速度

Transition-delay 指定什么时候开始切换效果

动画：animation

Animation-name 为@keyframes 动画名称

animation-duration 动画需要花费的时间

animation-timing-function 动画如何完成一个周期

animation-delay 动画启动前的延迟间隔

animation-iteration-count 动画播放次数

animation-direction 是否轮流反向播放动画

7. 清除浮动的方式有哪些？请说出各自的优点

高度塌陷：当所有的子元素浮动的时候，且父元素没有设置高度，这时

候父元素就会产生高度塌陷。

清除浮动方式 1：给父元素单独定义高度

优点：快速简单，代码少 缺点：无法进行响应式布局

清除浮动方式 2：父级定义 overflow：hidden；zoom：1（针对 ie6 的

兼容）

优点：简单快速、代码少，兼容性较高 缺点：超出部分被隐藏，布局时

要注意

清除浮动方式 3：在浮动元素后面加一个空标签，clear：both；height：

0；overflow：hidden

优点：简单快速、代码少，兼容性较高。

缺点：增加空标签，不利于页面优化

清除浮动方式 4：父级定义 overflow：auto

第 5 页 第 6 页

优点：简单，代码少，兼容性好

缺点：内部宽高超过父级 div 时，会出现滚动条

清除浮动方式 5：万能清除法：

给塌陷的元素添加伪对象

.father：after{

Content：“随便写”；

Clear：both；

display：block；

Height：0；

Overflow：hidden；

Visibility：hidden

}

优点：写法固定，兼容性高

缺点：代码多

8. 定位的属性值有何区别

Position 有四个属性值：relative absolute fixed static

Relative 相对定位 不脱离文档流，相对于自身定位

Absolute 绝对定位，脱离文档流 相对于父级定位

Fixed 固定定位，脱离文档流，相对于浏览器窗口定位

Static 默认值，元素出现在正常的流中

9. 子元素如何在父元素中居中

水平居中： 第 7 页

1.子父元素宽度固定，子元素设置 margin：auto，并且子元素不能设置

浮动，否则居中失效

2.子父元素宽度固定，父元素设置 text-align：center，子元素设置

display：inline-block，并且子元素不能设置浮动，否则居中失效

水平垂直居中：

子元素相对于父元素绝对定位，子元素 top，left 设置 50%，子元素

margin-top 和 margin-left 减去各自宽高的一半

子元素相对于父元素绝对定位，子元素上下左右全为 0，然后设置子元素

margin：auto

父元素设置 display：table-cell vertical-align：middle，子元素设置

margin：auto

子元素相对定位，子元素 top，left 值为 50%，transform：translate

（

-50%，-50%）

子元素相对父元素绝对定位，子元素 top，left 值为 50%，transform：

translate（

-50%，-50%）

父元素设置弹性盒子，

display：flex； justfy-content：center ；align-item：center；

justfy-content：center

10.Border-box 与 content-box 的区别

Content-box 标准盒模型 width 不包括 padding 和 border

Border-box 怪异盒模型 width 包括 padding 和 border 第 8 页

11. 元素垂直居中

1.设置子元素和父元素的行高一样

2.子元素设置为行内块，再加 vertical-align：middle

3.已知父元素高度，子元素相对定位，通过 transform：

translateY（

-50%）

4.不知道父元素高度，子绝父相，子元素 top：50%，transform：

translateY（

-50%）

5.创建一个隐藏节点，让隐藏节点的 height 为剩余高度的一半

6.给父元素 display：

table，子元素 display：

table-cell，vertical-align：

middle

7.给父元素添加伪元素

8.弹性盒，父元素 display：flex，子元素 align-self：center

链接：https://www.waimaiguai.com/technology/article/5866382

来源：外卖怪

我知道文字滚动的标记是marquee，

Direction参数可设置:up

down

left

right

(控制滚动方向)；

Scrolldelay参数是设置=

100

(100就是速度，值越大滚动越快……)；

onMouseOut=this.start(）表示鼠标移出状态滚动；

onMouseOver=this.stop()

表示鼠标经过时停止滚动。

---