每日十道大厂前端高频面试题Day1

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

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

1）jpeg是有损压缩，png是无损的。正因如此，同一图像质量，png文件的大小，大于jpeg文件。
2）png支持透明效果（alpha），jpeg不支持。

---

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 新增的内容有哪些

1. 标签替代Flash

Flash给很多Web开发者带来了麻烦，要在网页上播放Flash需要一堆代码和插件。标签使得开发者只要使用一个标签就能和用户产生UI交互。虽然目前标签还不能实现Flash的所有功能。

2.新增

 和

 标签HTML5设计的一个原则是更好的体现网站的语义性，所以增加了

和

这样的标签，用来明确表示网页的结构。

3.新增

 和

 标签与

, 

类似，

和

也有利于清晰化网页的结构，更有利于SEO。

4.新增

 和

 标签

可以被用于创建传统的菜单，也可以用于工具栏和上下文菜单。

标签使得网页文字和图片的排版更专业。

5.新增

这两个标签可能是HTML5里面最有用的两个标签了。顾名思义，这两个标签是用来播放音频和视频的。 

6. HTML5对

 和 标签进行了大量修改，添加了很多新的属性，也修改了很多属性。

---

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

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

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

Section 相当于div    figure加载独立内容（上图下字）   figcaption   figure的标题

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

Embed 加载插件的标签   video 加载视频   audio 加载音频（支持格式ogg，mp3，wav）

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

---

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

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

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

5.伪元素清除法

给塌陷的元素添加伪对象

.father：：after{

Content：“随便写”；

Clear：both；

display：block；

Height：0；

Overflow：hidden；

Visibility：hidden

}

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

缺点：代码多

6.双伪元素清除浮动（推荐）

    .clearfix:before,
        .clearfix:after {
            display: table；
            content: " " ；   /*不用有内容也可以*/
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

优点：不仅可以清除浮动，也可以解决高度塌陷的问题（给父盒子添加类名clearfix）

---

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

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

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

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

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

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

---

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

水平居中

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 的区别

标准盒模型:这种盒模型设置width的时候的值是内容区的宽度,如果再设置padding和margin,border的话盒子的实际宽度会增大，标准模式下总宽度=width+margin（左右）+padding（左右）border（左右）

怪异盒模型:这种盒子的width设置的值为盒子实际的宽度,border和padding的设置不会影响盒子的实际宽度和高度，怪异模式下总宽度=width+margin（左右）（就是说width已经包含了padding和border值）

标准模式下如果定义的DOCTYPE缺失，则在ie6、ie7、ie8下汇触发怪异模式。当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；当设置为box-sizing:border-box时，将采用怪异模式解析计算。