開發京東的移動站web首頁
1》總體佈局
1>在百分比伸縮佈局中，限定組件最小大小，限定組件最大大小（避免圖片過分放大而失真），公認設計圖寬度640px
頭部開發
2》 html5定位(position)：
1)包含塊（containing block）,position爲absolute/fixed/relative的最近的先祖元素，
position=“absolute”：絕對定位
1.座標計算：相對包含塊開始計算，若不存在包含塊，相對於viewport計算。
2.位置固定在網頁上
3.子盒子是position=absolute,子盒子100%相對於最近的relative/absolute/fixed祖先盒子。如果沒有相對於viewport
position=“fixed”: 固定定位
1.座標計算：相對於veiwport窗口計算。
2.位置相對於窗口不動
3.子盒子是position=fixed,子盒子的100%相對於Viewport （往往會造成溢出）
position=“relative”相對定位
1.座標計算：相對原本位置開始計算。
2.位置固定在網頁上
3.子盒子是position=relative,子盒子100%相對於父盒子。
position=“static”默認的定位
1.座標計算：從父元素的內邊距開始計算（不包括外邊距和邊框，包括內邊距和主體內容）
2.位置固定在網頁上
3.static盒子的100%相對於父盒子
3》 fixed 和 百分比搭配 溢出問題
父div樣式：
.jd_layout{ width: 100%; max-width:640px; min-width:300px; margin:0 auto; }
子div樣式：
.jd_header { position: fixed; height: 40px; width:100%; }
fixed定位的元素width:100%;相對於viewport， 溢出了父盒子。
那麼fixed定位的子盒子，相對的寬度也就是viewport了。
.jd_header > .jd_header_box{ width: 100%; max-width:640px; min-width:300px; margin:0 auto; }
4》 圖片的失真問題
通過壓縮尺寸的方式解決圖片在自適應過程中因放大而失真（公認設計圖是640px）
如果是img,使用設置寬高的方式壓縮
如果是背景，使用設置background-size屬性來壓縮
例如：.logo{ width:50px; height:50px; background: url("../img/logo.jpg") no-repeat; background-size:200px,200px; }
如果原圖是640px,這裏採用200px,即做了一個64:20的壓縮
5》常用的定位搭配
父{ position: relative; } 子{ position: absolute; top:100px; left:100px; }
父元素是relative,子元素時absolute ==> 好處：父元素不動的同時，子元素相對於父元素計算座標
6》absolute定位導致的問題：
使用了absolute的元素不會受父級包含塊(包含塊是父元素)的padding以及包含塊中其他元素等約束。
1)包含塊有其他元素，absolute定位的元素可以覆蓋其他元素顯示
2)不同於父級包含塊的普通子元素，absolute定位的不會撐開父級包含塊
3)父級包含塊的padding屬性對 absolute定位的子元素無效
7》css選擇器之屬性選擇器
[attribute^=value] a[src^="http"] 屬性以指定字符值開頭
[attribute*=value] a[src*="abc"] 屬性包含指定字符值
[attribute$=value] a[src$=".com"] 屬性以指定字符值結尾
也可以 用於class，如下：
[class^="icon_"]{}表示對class的value值以“icon_”開頭的所有元素的選擇
8》關於css導致的覆蓋：
1> absolute定位的元素與普通兄弟元素重合，覆蓋普通兄弟元素
2> fixed定位的元素與其他普通元素重合，覆蓋其他普通元素，
3> absolute/fixed/relative對absolute/fixed/relative定位元素，特殊定位的對特殊定位，按css的添加順序覆蓋，fixed同理
4> 如果想根據需求來決定顯示順序，使用index屬性， 默認是0，數字越小，越在下層。
9》兩種居中情況及寫法
1>方法一：採用margin: 0 auto;
margin:0 auto居中 失效的幾種情況：
1)使用absolute/fixed/relative進行定位後。
2)沒有設置寬度
3)元素設置了浮動（float）
2>方法二：採用absolute定位，按座標來定位到中間。
代碼如：
.mydiv{ width:150px; height:6px; position: absolute; /*mydiv從父元素中間開始*/ left:50%; /*mydiv往右移動半個寬度，達到居中效果*/ margin-left:-75px; }
尾部
10》css中的top, bottom,left,rigth與margin-top, margin-left等的區別
top等 只能與有定位(fixed, relative, absolute)的元素配合使用，否則沒有效果，
margin-top等，對任何元素都可使用，無論是否設置定位。但對定位的元素使用可能在不同瀏覽器解析效果不同。
建議：top等與有定位的元素配合使用。
margin-top等與沒有定位的元素配合使用
應用：讓盒子總是固定顯示在底部（如果換成margin-bottom沒有效果！）
.floor_box{ position: fixed; bottom:0; }