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></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-radius 添加圆角边框
border-shadow 给框添加阴影 (水平位移，垂直位移，模糊半径，阴影尺寸，阴影颜色，insert(内/外部阴影)
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-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 有四个属性值: relative absolute fixed static
    Relative 相对定位 不脱离文档流，相对于自身定位
    Absolute 绝对定位，脱离文档流 相对于父级定位
    Fixed 固定定位，脱离文档流，相对于浏览器窗口定位
    Static 默认值，元素出现在正常的流中

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

    • 水平居中:
      1. 子父元素宽度固定，子元素设置margin:auto，并且子元素不能设置浮动，否则居中失效
      2. 子父元素宽度固定，父元素设置 text-align:center，子元素设置 display:inline-block，并且子元素不能设置浮动，否则居中失效
    • 水平垂直居中:
      1. 子元素相对于父元素绝对定位，子元素top，left设置50%，子元素margin-top和margin-left减去各自宽高的一半
      2. 子元素相对于父元素绝对定位，子元素上下左右全为 0，然后设置子元素 margin:auto
      3. 父元素设置display:table-cell vertical-align:middle，子元素设置 margin:auto
      4. 子元素相对定位，子元素top，left值为50%，transform: translate (-50%，-50%)
      5. 子元素相对父元素绝对定位，子元素 top，left 值为 50%，transform: translate(-50%，-50%)
      6. 父元素设置弹性盒子，display: flex;justfy-content: center; align-item: center;

  10. Border-box 与 content-box 的区别
    Content-box 标准盒模型width不包括padding和border
    Border-box 怪异盒模型width包括padding和border

  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

  12. 如何让 chrome 浏览器显示小于 12px 的文字
    本来添加谷歌私有属性 -webkit-text-size-adjust:none，现在-webkit-transform:scale()

  13. CSS 选择器有哪些，那些属性可以继承，优先级如何计算? Css3 新增的伪类有哪些
    CSS2 选择器: 元素选择器，id选择器，群组选择器，类选择器，*通配符选择器，后代选择器
    CSS2 伪类选择器: a:link/visited/hover/active
    CSS3 选择器: 空格 > +相邻兄弟选择器 ~通用选择器(查找后面所有)
    结构伪类选择器: 

    查找第几个 nth-child(n)
查找同一类型第几个 nth-of-type
查找唯一类型 only-of-type

    属性选择器: 根据标签属性查找 [attr=value]

    :root 查找根元素 html 标签
:empty 查赵空标签

    目标伪类选择器:(表单)

    :enabled 查找可以使用的标签
:disabled 查找禁止使用的标签
:checked 查找被选中的标签

    伪元素选择器::selection 设置选中文本内容的高亮显示(只能用于背景色和文本颜色)
    否定伪类选择器 not()
    语言伪类选择器 lang(取值)

    • 优先级(权重)
      元素选择器 1
伪元素选择器 1
class 选择器 10
伪类选择器 10
属性选择器 10
Id 选择器 100
内联样式的权重 1000
    • 那些属性可以继承——文本方面
      所有元素可继承: visibility 和 cursor
块级元素可继承: text-indent 和 text-align
列表元素可继承: list-style，list-style-type，list-style-position，list-style-image 
内联元素可继承: letter-spacing，word-spacing，line-height，color，font，font-family，
              font-size，Font-style，font-variant，font-weight，
              text-decoration，text-transform，direction

  14. 网页中有大量图片加载很慢 你有什么办法进行优化?

    1. 图片懒加载，在图片未可视区域加一个滚动条事件，判断图片位置与浏览器顶端和页面的距离，如果前者小于后者，优先加载
    2. 使用图片预加载技术，将当前展示图片的前一张和后一张优先下载
    3. 使用 csssprite 或者 svgsprite

  15. 行内元素/块级元素有哪些?
    行内元素: 相邻的行内元素会排列在同一行，不会独占一行,设置宽高无效 span
    块级元素: 会独占一行 可以设置宽高等属性 div
    可变元素: 根据上下文预警决定该元素为块元素还是内联元素

    块级元素: div h1-h6 hr p ul ol table address blockquote dir from menu
行内元素: a br I em img input select span sub sup u textarea 
可变元素: button del iframe ins

  16. Margin 和 padding 在什么场合下使用
    Margin 外边距 自身边框到另一个边框之间的距离
    Padding 内边距 自身边距到自身内容之间的距离
    当需要在 border 外侧添加空白时用 margin，当需要在border内侧添 加空白时用 padding

  17. 弹性盒子布局属性有那些请简述?

    Flex-direction: 弹性容器中子元素排列方式(主轴排列方式) 
Flex-wrap: 设置弹性盒子的子元素超出父容器时是否换行 
Flex-flow: 是flex-direction 和 flex-wrap 简写形式 
Align-item: 设置弹性盒子元素在侧轴上的对齐方式 
Align-content: 设置行对齐 
Justify-content: 设置弹性盒子元素在主轴上的对齐方式

  18. Px，rem，em 的区别

    Px，绝对长度单位，像素px是相对于显示器屏幕分辨率来说的 
em 相对长度单位，相对于当前对象内文本的字体尺寸
    em 的值并不是固定的
    em 会继承父级元素的字体大小(参考物是父元素的font-size)em中所有的字体都是相对于父元素的大小决定的
rem 相对于html根元素的font-size
1em=1rem=16px在body中加入 font-size:62.5% 这样直接就是原来的px数值除以10加上em就可以