1.如何设置标签的背景颜色?

1.如何设置背景图片?

注意点:

1.如何控制背景图片的平铺方式?

应用场景:可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度

1.如何控制背景图片的位置?

注意点:同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色

1.背景属性缩写的格式

2.注意点：background属性中， 任何一个属性都可以被省略

3.什么是背景关联方式？

4.如何修改背景关联方式？

1.背景图片和插入图片区别?

1.什么是CSS精灵图

CSS精灵图是一种 图像合成技术

2.CSS精灵图作用

可以减少请求的次数, 以及可以降低服务器处理压力

3.如何使用CSS精灵图

CSS的精灵图需要配合背景图片和背景定位来使用

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：

body {text-align: centerbackground: url(small2.png)background-size: 60%}

3、浏览器运行index.html页面，此时成功通过css控制了div居中显示，背景图片的大小为60%。

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

来源：外卖怪