前端面试题（CSS、html部分）

display:none和visibility:hidden的区别？

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，他各边的元素会 合拢，就当他从来不存在
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间

CSS3有哪些新特性

  border-radius   圆角
  box-shadow   阴影
  text-shadow   文字阴影
  gradient   线性渐变
  transform  旋转
  scale  缩放
  translate   位移
  媒体查询   多栏布局   多背景

前端性能优化

• 请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
• 请求宽带：开启GZip，精简 Javascript，移除重复脚本，图像优化，将 icon 做成字体
• 缓存利用：使用CDN，使用外部 Javascript 和 CSS，添加 Expires头，减少DNS查找，配置 ETag，使 Ajax 可缓存
• 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
• 代码校验：避免CSS表达式，避免重定向

BFC 是什么？

BFC即 Block Formatting Contexts（块级格式化上下文），它属于普通流，即：元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定

可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部

只要元素满足下面任一条即可触发 BFC 特性

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position（absolute、fixed）
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值（hidden、auto、scroll）

position包含几种特性，absolute和relative的区别

static：默认状态、没有定位、正常流
inherit：从父元素集成position属性的值
fixed：固定定位，生成绝对定位的元素（相对于浏览器窗口进行定位）
absolute：生成绝对定位的元素（相对于static定位以外的第一个父元素定位）
relative：生成相对定位的元素（相对于其正常位置定位）

absolute和relative的区别：父元素的padding对relative的子元素布局有影响，absolute的子元素不受影响