【相對定位】
* 1、使用position：relative；設定元素為相對定位的元素；
* 2、定位機制：
①相對於自己原來文件流中的的位置定位，當不指定top等定位值時，不會改變元素位置；
②相對定位元素，仍會佔據原來文件流中的位置，而不會釋放；
* 3、使用top、left、bottom、right調整位置，當left和right同時存在，left生效，當top和bottom同時存在，top生效。
【絕對定位】
* 1、使用position：absolute設定元素為絕對定位元素。
* 2、定位機制:
①相對於第乙個非static的祖先元素（即使用了relative、absolute、fixed
定位的的祖先元素）進行定位
②如果所有祖先元素均未定位，則相對於瀏覽器左上角定位
③使用absolute的元素，會從文件流中完全刪除，原有空間釋放不再占有
【絕對定位元素的水平居中的方式】
* 1、left：50%；
* 2、設定margin-left為-width/2
【固定定位fixed】
* 1、position：fixed是一種特殊的絕對定位，父容器無法使用relative鎖住。
* 2、定位機制：永遠相對於瀏覽器定位。
【z-index屬性】
* 1、設定定位元素的z軸層疊順序
* 2、使用要求：
①必須是定位元素（relative、absolute、fixed）才能使用
②使用z-index，需要考慮父容器的約束， 如果父容器為z-index：auto，則子容器的z-index可以不受父容器的約束；如果父容器z-index進行了設定，則子容器的層疊將以父容器的z-index為準（在同一父容器中的不同子元素，仍可以通過自己的z-index調整層疊關係）。
* 3、z-index：auto & z-index：0 的異同：
①z-index：auto為預設值，與z-index：0處於同一平面。
②z-index：auto不會約束子元素的z-index層次，而z-index：0會約束子元素必須與父元素處於同一平面
* 4、z-index相同（處於同一平面的定位元素）的層疊關係：後來者居上
【實現塊級元素在塊級元素中水平垂直居中】
* ①設定子容器為定位元素
* ②使用left：50%；margin-left：-width/2；
* top：50%；margin-top：-height/2；
【使用負邊距增大元素寬度】
* ①不指定子容器寬度，指定高度或內容
* ②margin：0px -50px;可以使左右兩邊，各增加50px
【負邊距實現雙飛翼布局】
* ①由於main部分寫在前面，可以保證主布局的優先載入
【display屬性：設定元素的級別】
* none：隱藏元素，元素所佔空間釋放
* block：設為塊級元素
* inline：設為內聯元素（行級元素）
* inline-block：設為內聯塊級元素 （本身為行級元素，但是具有塊級元素所特有的各種屬性，比如寬、高、text-align等）
H5取經之路 新增hover實現特定效果
一 滑鼠指上後顯示 效果圖如下 滑鼠未指上時 滑鼠指上後 如下 div1 li2 code wexin.div1 li2 hover code wexin原理 將該 另設乙個div，滑鼠未指上時，設定該div寬高為0，滑鼠之上時，給其設定乙個合適的寬高 二 滑鼠指上後，按鈕變色，背景圖放大，效果圖如...
web學習之路 H5（四）
在這裡稍微總結一下前面學習的，前面三節大致講了最基礎的html的基礎知識，其實也就是一堆常用的標籤，其實知識都是互通的，比如我會android知識，學起來就覺得他們的整體還是很像的，這樣對比著學習比較好記憶。其中學習的常用標籤就類似android中控制項和元件一樣，還有它的整體風格都很像。大家如果有...
前端開發學習之路之h5表單
1.input 裡面什麼都能放，毫無限制 單行文字框 密碼框 單選按鈕 複選按鈕 附件 提交按鈕 h5拓展 搜尋框，日期框，數字框，email框.input的屬性 type name 引數的key 不能預設 value 引數的value 按鈕的時候不能預設 placeholder 提示語 check...