CSS3实战 笔记4-新增的弹性盒模型

  • 引入了新的盒模型处理机制,该模型用于决定元素在盒子中的分布方式以及如何处理盒子的可用空间。

  • css3 新增了8个属性

    • box-align 定义子元素在盒子内垂直方向上的空间分配方式
    • box-direction 定义盒子的显示顺序
    • box-flex 定义子元素在盒子内的自适应尺寸
    • box-flex-group 定义子元素群组
    • box-lines 定义子元素分列显示
    • box-ordinal-group 定义子元素在盒子内的显示位置
    • box-orient 定义盒子分布的坐标轴
    • box-pack 定义子元素在盒子内水平方向的空间分配方式

实战练习源码

前端开发面试题收集-其他篇

收集经典的前端开发面试题

减少页面加载时间的方法?

  • 优化图片,选择合适的格式。
  • 优化css,压缩合并css。
  • 优化js,压缩合并js。
  • 指定高度和宽度,如果浏览器没有找到这两个参数,会一边下载图片一边计算大小。
  • 减少http请求,合并文件,合并图片。
  • 懒加载
  • 异步请求

GET和POST的请求最大能多大?

  • GET请求是放在url里面的,理论上没有限制,但是IE有长度限制,大概是2083字节。
  • POST理论上也是没有限制的,是由服务器的处理程序设置,以及服务器配置决定。

阅读全文

前端开发面试题收集-扩展-雅虎团队35条性能优化守则

网页内容

  • 减少http请求次数
  • 减少DNS查询次数
  • 避免页面跳转
  • 缓存ajax
  • 延迟加载
  • 提前加载
  • 减少dom元素数量
  • 根据域名划分内容
  • 减少iframe数量
  • 避免404

服务器

  • 使用CDN
  • 添加Expires 或者 cache-control报头文
  • Gzip压缩传输文件
  • 配置ETags
  • 尽早flush输出
  • 使用GET ajax请求
  • 避免空的图片src
  • 减少cookie大小
  • 页面内容使用无cookie域名

阅读全文

前端开发面试题收集-JS篇

收集经典的前端开发面试题

setTimeout的时间定义为0有什么用?

  • javascript引擎是单线程处理任务的,它把任务放在队列中,不会同步执行,必须在完成一个任务后才开始另一个任务。
  • 由于setTimeout可以把任务从某个队列中跳出成为新队列,因此能够得到期望的结果。

怎么理解this

  • this指向的总是调用函数的那个对象。
  • this一般情况下,是全局对象Global。

什么是闭包

  • 闭包是一个概念,我的理解是函数里的函数,能够读取函数内部变量的函数。
  • 就是将函数内部和函数外部连接起来的一座桥梁。
  • 闭包是不被内存回收机制回收的。

阅读全文

前端开发面试题收集-CSS篇

收集经典的前端开发面试题

什么是CSS盒子模型

  • 页面上的每个元素都被浏览器看做是一个矩形的盒子。
  • 由内容、填充、边框、边界组成。

什么是 css sprite

  • 将多个图片拼接在一个图片中,通过background-position和元素尺寸调节显示想要的背景的方案。
  • 优点:
    • 减少HTTP请求数,加快页面加载速度。
    • 提高压缩比、减少图片大小
    • 更换风格方便,只需在一张或者几张图片上修改颜色或者样式即可。
  • 缺点:
    • 图片合并麻烦
    • 维护麻烦,修改一个图片可能需要重新布局整个图片、样式

display:none; 于 visibility:hidden; 的区别?

  • 前者让元素在dom中消失,不占据空间,后者不会消失、并占据,只是内容不可见。
  • 前者是非继承的,父节点消失、子节点也会消失,后者相反,即使父节点消失,设置子节点为visibility: visible;可显现子节点。
  • 修改前者会造成文档重排,后者只会造成元素重绘。
  • 读屏器不会读取前者,会读取后者。

阅读全文

前端开发面试题收集-HTML篇

收集经典的前端开发面试题

Doctype是什么?说明特点。

  • <!doctype>声明必须处于HTML文档的头部,在标签之前。
  • <!doctype>声明不是一个HTML标签,是一个用于告诉浏览器使用哪种HTML规范的。
  • 该标签可以声明三种DTD类型,分别表示严格版本、过渡版本以及基于框架的版本。

img的title和alt有什么区别

  • title用于为元素提供附加的提示,通常鼠标滑动到元素上会显示。
  • alt是img特有的属性,是图片内容的自定义描述,用于图片无法加载时,描述图片内容。
  • 搜索引擎会分析alt描述。

什么是web语义化,为什么需要语义化。

  • 是指通过HTML标记表示页面包含的信息,包含了HTML标签的语义化和CSS命名的语义化。
  • HTML标签的语义化是指:使用例如H1-H6等恰当的表达文档结构。
  • CSS命名的语义化是指:为HTML标签添加有意义的class、id。
    需要语义化的原因:
    • 去掉样式后页面依然呈现清晰的结构。
    • 盲人使用读屏器更好的阅读。
    • 搜索引擎更好的理解页面,有利于收录。
    • 团队项目可持续运作和维护。

阅读全文

CSS3实战 笔记3-增强的文本和颜色功能

  • 新增了几个文本属性

    • text-shadow 定义文本阴影或者模糊效果
    • text-overflow 定义省略文本的处理方式
    • word-wrap 定义文本超过指定容器的边界时是否断开转行。
  • 完善了颜色控制,实现了对不透明效果的支持。

    • HSL 通过色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化来表示颜色。
    • HSLA 在上面的基础上增加了透明度(A)的设置
    • RGBA 在 RGB 基础上增加了透明度(A)的设置
    • opacity 定义不透明度
  • text-shadow 属性接受一个以逗号分隔的阴影效果列表。

实战练习源码