html + css篇
1.网络中使用最多的图片格式有哪些？
JPEG,GIF,PNG最流行的是jpeg格式，可以把文件压缩到最小，在ps以jpeg格式存储时，提供11级压缩级别
2. 请简述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新增的语义化标签有哪些？
Hgroup标题组合标签mark高亮显示dialog加载对话框标签（必须
配合open属性）
Embed加载插件的标签video加载视频audio加载音频（支持格式
ogg，mp3，wav）
Header页面头部main页面主要内容footer页面底部
Nav导航栏aside侧边栏article加载页面一块独立内容
Setion相当于div figure加载独立内容(上图下文)figcaption figure的标题
语义化标签的优点
- 1、提升可访问性
- 2、seo
- 3、结构清晰，利于维护
6.Css3新增的特性
边框
border-radius 添加圆角边框
border-shadow 给框添加阴影(水平位移，垂直位移，模糊半径，阴影尺寸，阴影颜色，insert（内/外部阴影））
border-image：设置边框图像
border-image-source边框图片的路径
border-image-slice图片边框向内偏移
border-image-width图片边框的宽度
border-image-outset边框图像区域超出边框的量
border-image-repeat图像边框是否平铺（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转换translaterotatescale
过渡：
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
}
优点：写法固定，兼容性高
缺点：代码多
8.定位的属性值有何区别
Position有四个属性值：relativeabsolutefixedstatic
Relative相对定位不脱离文档流，相对于自身定位
Absolute绝对定位，脱离文档流相对于父级定位
Fixed固定定位，脱离文档流，相对于浏览器窗口定位
Static默认值，元素出现在正常的流中
9.子元素如何在父元素中居中
子父元素宽度固定，子元素设置margin：auto，并且子元素不能设置
浮动，否则居中失效
子父元素宽度固定，父元素设置text-align：center，子元素设置
display：inline-block，并且子元素不能设置浮动，否则居中失效
水平垂直居中：
子元素相对于父元素绝对定位，子元素top，left设置50%，子元素
margin-top和margin-left减去各自宽高的一半
子元素相对于父元素绝对定位，子元素上下左右全为0，然后设置子元素
margin：auto
父元素设置display：table-cellvertical-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
