多種布局方式
- table：
- 嵌套太深
- 當(dāng) 為auto時(shí)，寬高自適應(yīng)，需要加載完全才能顯示出來】啥迹可以使用fixed來固定寬高
- 只是用來做數(shù)據(jù)
- frameset：
- 之前可以用來實(shí)現(xiàn)區(qū)域刷新缓待，嵌入多個(gè)頁面
- 不夠靈活
- absolute:
- 寬高固定，適合用于小的范圍汹粤，確定兩者的寬高不會改變
- 脫離文檔流命斧，對上下文沒有影響田晚。
- float:
- 初始的目的是做圖文環(huán)繞
-
左固寬嘱兼，右自適應(yīng)
demo.png
- inline-block:
- 換行會占有空間
css3的布局
- flex
- multiple column(多列)：
- grid
浮動(dòng)+BFC
- 自適應(yīng)的子元素添加
overflow:hidden
如何開始
- 分析頁面
- 語義化
- 技術(shù)選型
方案分析
- 主內(nèi)容能否優(yōu)先顯示：考慮加載的問題
- 列順序能否隨便調(diào)換：結(jié)構(gòu)要靈活
- 寬度固定與自適應(yīng)
- 流式布局
響應(yīng)式設(shè)計(jì)
image-set: 根據(jù)分辨率，修改圖片
按需選擇icon,看情況使用偽元素或直接碼值
考慮模塊的復(fù)用性贤徒，盡量不要讓模塊嵌套芹壕，相互依賴
ps: 百度圣杯布局和雙飛翼布局
模塊化
- 私有屬性名加下劃線，命名規(guī)范
- commonJS:
require('xxx');
module.exports=xxx; - AMD(requireJS): 異步模塊
require([juery,hogan],function(){});
define([xxx],function(xxx){}); - CMD(seaJs):
一個(gè)模塊一個(gè)文件
define(function(require接奈，exports,module){});
