2016-3-21 记录

多种布局方式

1. table：

• 嵌套太深
• 当 为auto时，宽高自适应，需要加载完全才能显示出来。可以使用fixed来固定宽高
• 只是用来做数据

2. frameset：

• 之前可以用来实现区域刷新，嵌入多个页面
• 不够灵活

3. absolute:

• 宽高固定，适合用于小的范围，确定两者的宽高不会改变
• 脱离文档流，对上下文没有影响。

4. float:

• 初始的目的是做图文环绕

• 左固宽，右自适应

  
  
  

  demo.png

5. inline-block:

• 换行会占有空间

css3的布局

1. flex
2. multiple column(多列)：
3. grid

浮动+BFC

1. 自适应的子元素添加overflow:hidden

如何开始

1. 分析页面
2. 语义化
3. 技术选型

方案分析

1. 主内容能否优先显示：考虑加载的问题
2. 列顺序能否随便调换：结构要灵活
3. 宽度固定与自适应
4. 流式布局

响应式设计

1. image-set: 根据分辨率，修改图片

2. 按需选择icon,看情况使用伪元素或直接码值

3. 考虑模块的复用性，尽量不要让模块嵌套，相互依赖

ps: 百度圣杯布局和双飞翼布局

模块化

1. 私有属性名加下划线，命名规范
2. commonJS:
   require('xxx');
   module.exports=xxx;
3. AMD(requireJS): 异步模块
   require([juery,hogan],function(){});
   define([xxx],function(xxx){});
4. CMD(seaJs):
   一个模块一个文件
   define(function(require，exports,module){});