前端面试题

一、HTML、CSS、浏览器 相关

1.1 网路中使用最多的图片格式有哪些？

JPEG 、GIF、PNG、SVG等。

最流行的是 jpeg格式，可以把文件压缩到最小，在 ps 以 jpeg 格式存储时，提供11级压缩级别。

1.2 请简述 css 盒子模型

        一个css盒子从外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。默认情况下，盒子的 width 和 height 属性只是设置 content （内容）的宽和高。

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

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

1.3 视频/音频标签的使用

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

        视频标签属性：

                src ：需要播放的视频地址

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

                aotoplay ：是否自动播放

                controls： 是否显示控制条

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

                loop：是否循环播放

                perload：预加载视频（缓存）与 autoplay 相冲突，设置了autoplay 属性，perload 属性会失效。

                muted：静音模式

音频：<audio src=" " type=" "></audio>

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

1.4 HTML5新增的内容有哪些？

• 新增语义化标签
• 新增表单类型
• 表单元素
• 表单属性
• 表单事件
• 多媒体标签

1.5 HTML5 新增的语义话标签有哪些？

 语义化标签优点：

        1.提升可访问性        2.seo        3.结构清晰，利于维护

标签	含义	标签	含义
Header	页面头部	main	页面主要内容
footer	页面底部	Nav	导航栏
aside	侧边栏	article	加载页面一块独立内容
section	相当于div 【 表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。 】	figure	加载独立内容（上图下字）【经常与说明 figcaption 配合使用，并且作为一个独立的引用单元】
Hgroup	组合标签	mark	高亮显示
dialog	加载对话框标签（必须配合open属性）	Embed	加载插件的标签
video	加载视频	audio	记载音频（支持格式 ogg、mp3、wav）

1.6 Css3 新增的特性

边框：

        border-radios： 添加圆角边框

        border-shadow：给边框添加阴影（水平位移，垂直位移，模糊半径，阴影尺寸，阴影颜色、insetr（内/外部阴影））

        border-image： 设置边框图像

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

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

        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-warp：允许长的内容可以自动换行

        text-overflow：执行当文本溢出包含它的元素，应该干啥

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

转换：

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

        transform-orgin 可以更改元素转换的位置，（改变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-name 为@keyframes 动画名称

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

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

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

        animation-iteration-count 动画播放次数

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

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

高度塌陷：

        当所有的子元素浮动的时候，且父元素没有设置高度，这时候父元素就会产生高度塌陷。

清除浮动方式1：

        给父元素单独定义高度。

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

清除浮动方式2：

        父级定义 overflow: hidden; zoom: 1 （针对ie6的兼容）

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

清除浮动方式3：

        在浮动元素后面加一个空标签，设置 clear: both; height: 0; overflow: hidden;

        优点：简单快速、代码少、兼容性较高。        缺点：增加空标签，不利于页面优化。

清除浮动方式4：

        父级定义 overflow： auto

        优点：简单、代码少、兼容性好。        缺点：内部宽度高超过父级div时，会出现滚动条

清除浮动方式5：

        万能清除法：给塌陷的元素添加伪对象  

.father :after{
    clear: both;