HTML、CSS、浏览器 相关面试题总结

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

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

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

2. 请简述 css 盒子模型

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

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

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

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

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

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

视频：<video src=””></video>

视频标签属性：

src 需要播放的视频地址

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

autoplay 是否自动播放

controls 是否显示控制条

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

loop 是否循环播放

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

性，perload 属性会失效。

muted 静音模式

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

<audio>

<source src=”” type=””>

</audio>

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 的

兼容）

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