文章出處

 一、relative

1）與兄弟

　　relative對absolute

　　1、限制left/top/right/bottom定位

　　2、限制z-index層級；

　　3、限制在overflow下

　　relative對fixed

　　 限制z-index層級；

2）本身特征

　　定位

　　1、相對自身

　　定位移動相對于自身

　　2、無侵入

　　relative定位不影響其他元素

　　margin影響其他元素布局

　　應用

　　拖拽效果

　　同時設置top/bottom left/right

　　絕對定位：拉伸

　　相對定位：斗爭

　　top VS bottom   top起作用

　　left VS bottom    left起作用

3）層級

　　提高層級上下文

　　正常文檔流模式下，后面的dom元素覆蓋前面的，如果將前面的元素設置了relative將提升它自身的層級

　　新建層疊上下文與層級控制

　　z-index: auto : 沒有限制內部absolute元素層疊的問題（except IE6,IE7 auto也會限制層級）

4）relative的最小化影響原則

　　——指盡量降低relative屬性對其他元素或布局的潛在影響

　　1. 盡量避免使用relative

　　absolute+margin

　　2. relative最小化

　　將absolute父級獨立為單獨的容器，進行relative定位

二、absolute

1）與兄弟float

　　相同的特征表現

　　1. 包裹性

　　父元素對子元素的包裹

　　2. 破壞性

　　設置了子元素后，父元素高度塌陷

　　① absolute的破壞性是對圖片的absolute化。圖片設置absolute后，圖片就從標準文檔流中脫離出來，沒有東西可以繼續支撐容器的高度，容器自然就坍塌了。好像把房子的柱子挪到房子外邊，房子果斷就塌了 　　

　　② absolute的包裹性是對容器的absolute化。容器設置absolute后，容器變為了 inline-block，容器本身沒有設置寬度和高度的話，那么容器的寬高就等于內容的寬高，表現結果就是容器把內容包裹起來。

 

2）別把relative拴在一起（獨立性的好處）

　　absolute 越獨立，越強大

　　超越overflow

　　獨立的absolute可以拜托overflow的限制，無論是滾動還是隱藏

　　clear 用來限制float

　　relative用來限制absolute

 

3）無依賴的absolute定位

　　脫離文檔流

　　

　　折翼的天使

　　1. 去浮動

　　2. 位置跟隨

　　原來什么位置，絕對定位后還是什么位置

　　（ie7 永遠的inline-block水平）

　　配合margin的精確定位

4）絕對定位實現相對效果

　　位置特別重要——充分利用跟隨特性

　　圖標圖片相覆蓋

       

　　img與vip中間使用注釋<！--  -->實現完美貼合，避免出現空格

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>圖標定位二三事</title>
 6 <style>
 7 body { font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
 8 body, h3, h5 { margin: 0; }
 9 img { border: 0 none; vertical-align: bottom; }
10 .l { float: left; }.r { float: right; }
11 .constr { width: 1200px; margin-left: auto; margin-right: auto; }
12 .header { background-color: #2A2C2E; }
13 .nav { height: 60px; }
14 .nav-list { float: left; font-size: 14px; font-weight: 400; }
15 .nav-a { display: inline-block; line-height: 20px; padding: 20px 35px; color: #B5BDC0; text-decoration: none; }
16 .nav-a:hover { color: #fff; }
17 
18 .course { padding-top: 10px; }
19 .course-list { float: left; width: 280px; height: 240px; margin: 5px 10px 15px; border-radius: 0 0 1px 1px; background-color: #F7FAF9; background-color: rgba(255,255,255,1); box-shadow: 0 1px 2px #c5c5c5; text-decoration: none; }
20 .course-list-img { background-color: #6396F1; }
21 .course-list-h { line-height: 50px; font-size: 14px; font-weight: 400; color: #363d40; text-align: center; }
22 .course-list-tips { margin: 0 14px; font-size: 12px; color: #b4bbbf; overflow: hidden; }
23 
24 .icon-hot { position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background: url(http://img.mukewang.com/545304730001307300280011.gif); }
25 .icon-recom { position: absolute; line-height: 20px; padding: 0 5px; background-color: #f60; color: #fff; font-size: 12px; }
26 .icon-vip { position: absolute; width: 36px; height: 36px; margin-left: -36px; background: url(http://img.mukewang.com/5453048000015d8800360036.gif); text-indent: -9em; overflow: hidden; }
27 </style>
28 </head>
29 
30 <body>
31 <div class="header">
32     <div class="constr">
33         <div class="nav">
34             <h3 class="nav-list">
35                 <a href="http://www.imooc.com/course/list" class="nav-a">課程</a>
36             </h3>
37             <h3 class="nav-list">
38                 <a href="http://www.imooc.com/wenda" class="nav-a">問答</a>
39             </h3>
40             <h3 class="nav-list">
41                 <a href="http://www.imooc.com/seek/index" class="nav-a">
42                     求課<i class="icon-hot"></i>
43                 </a>
44             </h3>
45         </div>
46     </div>
47 </div>
48 
49 <div class="main">
50     <div class="constr">
51         <div class="course">
52             <a href="http://www.imooc.com/view/121" class="course-list">
53                 <div class="course-list-img">
54                     <span class="icon-recom">推薦</span>
55                     <img width="280" height="160" alt="分享：CSS深入理解之float浮動" src="http://img.mukewang.com/53d74f960001ae9d06000338-300-170.jpg"><!--
56                     --><i class="icon-vip">vip</i>
57                 </div>
58                 <h5 class="course-list-h">分享：CSS深入理解之float浮動</h5>
59                 <div class="course-list-tips">
60                     <span class="l">已完結</span>
61                     <span class="r">3514人學習</span>
62                 </div>
63             </a>
64         </div>
65     </div>
66 </div>
67 </body>
68 </html>
View Code

 

　　下拉框

　　利用跟隨特性

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>下拉框定位二三事</title>
  6 <style>
  7 body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
  8 .constr { width: 1200px; max-width: 80%; margin-left: auto; margin-right: auto; padding-bottom: 300px; overflow: hidden; }
  9 .course-sidebar { width: 262px; float: left; }
 10 .course-sidebar > div { border: 1px solid #e6e8e9; box-shadow: 0px 1px 2px #d5d7d8; background-color: #fff; }
 11 .course-sidebar-type { height: 380px; }
 12 .course-sidebar-search { margin-top: 20px; overflow: hidden; }
 13 .course-search-input { width: 200px; line-height: 18px; padding: 10px; margin: 0; border: 0 none; font-size: 12px; font-family: inherit; float: left; }
 14 .course-sidebar-search.focus { border-color: #2ea7e0; }
 15 .course-search-input:focus { outline: 0 none; }
 16 .course-search-input::-ms-clear { display: none; }
 17 .course-search-btn { width: 38px; height: 38px; float: right; background: url(http://img.mukewang.com/545305ba0001f3f600380076.png); text-indent: -9em; overflow: hidden; }
 18 .focus .course-search-btn { background-position: 0 -38px; }
 19 
 20 .course-sidebar-result { display: none; position: absolute; width: 260px; margin: 39px 0 0 -1px; padding-left: 0; list-style-type: none; border: 1px solid #e6e8e9; background-color: #fff; box-shadow: 0px 1px 2px #d5d7d8; font-size: 12px; }
 21 .course-sidebar-result > li { line-height: 30px; padding-left: 12px; }
 22 .course-sidebar-result > li:hover { background-color: #f9f9f9; }
 23 .course-sidebar-result a { display: block; color: #5e5e5e; text-decoration: none; }
 24 .course-sidebar-result a:hover { color: #000; }
 25 </style>
 26 </head>
 27 
 28 <body>
 29 <div class="constr">
 30     <div class="course-sidebar">
 31         <div class="course-sidebar-type"></div>
 32         <div class="course-sidebar-search">
 33             <ul id="result" class="course-sidebar-result">
 34                 <li><a href="http://www.imooc.com/view/121">分享：CSS深入理解之float浮動</a></li>
 35                 <li><a href="http://www.imooc.com/view/118">案例：CSS圓角進化論</a></li>
 36                 <li><a href="http://www.imooc.com/view/93">案例：CSS Sprite雪碧圖應用</a></li>
 37                 <li><a href="http://www.imooc.com/view/77">案例：CSS3 3D 特效</a></li>
 38                 <li><a href="http://www.imooc.com/view/57">案例：如何用CSS進行網頁布局</a></li>
 39             </ul>
 40             <input class="course-search-input" placeholder="課程搜索">
 41             <a href="javascript:" class="course-search-btn">搜索</a>
 42         </div>
 43     </div>
 44 </div>
 45 <script>
 46 (function() {
 47     var input = document.getElementsByTagName("input")[0],
 48         result = document.getElementById("result");
 49         
 50     if (input && result) {
 51         input.onfocus = function() {
 52             this.parentNode.className = "course-sidebar-search focus";
 53             if (this.value != "") {
 54                 // show datalist
 55                 result.style.display = "block";
 56                 console.log('block');
 57             }
 58         };
 59         input.onblur = function() {
 60             if (this.value == "") {
 61                 this.parentNode.className = "course-sidebar-search";
 62             }
 63             // hide datalist
 64             result.style.display = "none";
 65             console.log('none')
 66         };
 67         
 68         // IE7 that wrap a DIV for avoid bad effect from float
 69         if (!document.querySelector) {
 70             var div = document.createElement("div");
 71             input.parentNode.insertBefore(div, input);
 72             div.appendChild(result);
 73         }
 74         // events of datalist
 75         if ("oninput" in input) {
 76             input.addEventListener("input", function() {
 77                 if (this.value.trim() != "") {
 78                     result.style.display = "block";
 79                 } else {
 80                     result.style.display = "none";
 81                 }
 82             });
 83         } else {
 84             // IE6-IE8
 85             input.onpropertychange = function(event) {
 86                 event = event || window.event;
 87                 if (event.propertyName == "value" && /focus/.test(this.parentNode.className)) {
 88                     if (this.value != "") {
 89                         result.style.display = "block";
 90                     } else {
 91                         result.style.display = "none";
 92                     }
 93                 }
 94             }
 95         }
 96     }
 97 
 98 })();
 99 </script>
100 </body>
101 </html>
View Code

 

 　　居中

　　實現圖片居中：

　　1. text-align+無依賴的絕對定位元素

　　2. display: block ; margin: auto;

　　3. position: absolute; margin-left:(width)/2

　　4. translate-x:-50%

　　第一種實現方式居中（同樣的方式可用于右側選擇欄）

<div class="course-loading-x">
    &nbsp;
    <img src="http://img.mukewang.com/5453077400015bba00010001.gif" class="course-loading" alt="加載中...">
</div>

css:
.course-loading-x { height: 0; margin-top: 20px; text-align: center; letter-spacing: -.25em; overflow: hidden; }
.course-loading { position: absolute; margin-left: -26px; }

 

　　星號對齊（與空格）

　　星號絕對定位

　　小圖標對齊

　　無依賴的絕對定位+margin

　　溢出

　　超越外部尺寸限制

　　

　　

<label class="regist-label">
    <span class="regist-star">*</span>
    登錄郵箱
</label>

.regist-label { width: 70px; padding-top: 10px; float: left; }
.regist-star { position: absolute; margin-left: -1em; font-family: simsun; color: #f30; }

 

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>文本圖標對齊與定位二三事</title>
 6 <style>
 7 body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
 8 a { color: #50B6E5; }
 9 .constr { width: 1200px; margin-left: auto; margin-right: auto; }
10 .regist-head { height: 60px; line-height: 60px; padding-left: 30px; background-color: #be3948; color: #fff; font-size: 18px; }
11 .regist-body { min-height: 400px; padding: 100px 0; background-color: #fff; }
12 .regist-main { width: 600px; margin-left: auto; margin-right: auto; }
13 .regist-group { margin-top: 20px; overflow: hidden; }
14 .regist-label { width: 70px; padding-top: 10px; float: left; }
15 .regist-cell { display: table-cell; *display: inline-block; }
16 .regist-input { height: 18px; line-height: 18px; width: 260px; padding: 10px 5px; margin: 0 10px 0 0; border: 1px solid #d0d6d9; vertical-align: top; }
17 .regist-code-input { width: 130px; }
18 .regist-btn { display: inline-block; width: 160px; line-height: 40px; background-color: #39b94e; color: #fff; text-align: center; text-decoration: none; }
19 .regist-btn:hover { background-color: #33a646; }
20 .icon-warn { display: inline-block; width: 20px; height: 21px; background: url(http://img.mukewang.com/5453084a00016ae300120012.gif) no-repeat center; }
21 
22 .regist-star { position: absolute; margin-left: -1em; font-family: simsun; color: #f30; }
23 .regist-remark { position: absolute; line-height: 21px; padding-top: 9px; color: #666; }
24 .regist-warn { padding-left: 20px; color: #be3948; }
25 .regist-warn > .icon-warn { position: absolute; margin-left: -20px; }
26 </style>
27 </head>
28 
29 <body>
30 <div class="constr">
31     <div class="regist-head">注冊</div>
32     <div class="regist-body">
33         <div class="regist-main">
34             <div class="regist-group">
35                 <label class="regist-label"><span class="regist-star">*</span>登錄郵箱</label>
36                 <div class="regist-cell">
37                     <input type="email" class="regist-input"><span class="regist-remark regist-warn">
38                         <i class="icon-warn"></i>郵箱格式不準確（演示）
39                     </span>
40                 </div>
41             </div>
42             <div class="regist-group">
43                 <label class="regist-label"><span class="regist-star">*</span>登錄密碼</label>
44                 <div class="regist-cell">
45                     <input type="password" class="regist-input"><span class="regist-remark">
46                         請輸入6-16位密碼，區分大小寫，不能使用空格
47                     </span>
48                 </div>
49             </div>
50             <div class="regist-group">
51                 <label class="regist-label"><span class="regist-star">*</span>用戶昵稱</label>
52                 <div class="regist-cell">
53                     <input type="password" class="regist-input">
54                 </div>
55             </div>
56             <div class="regist-group">
57                 <label class="regist-label">手機號碼</label>
58                 <div class="regist-cell">
59                     <input type="tel" class="regist-input">
60                 </div>
61             </div>
62             <div class="regist-group">
63                 <label class="regist-label"><span class="regist-star">*</span>驗 證 碼</label>
64                 <div class="regist-cell">
65                     <input class="regist-input regist-code-input"><img src="http://img.mukewang.com/545308540001678401500040.jpg">
66                 </div>
67             </div>
68             <div class="regist-group">
69                 <label class="regist-label">&nbsp;</label>
70                 <div class="regist-cell">
71                     <input type="checkbox" checked><label>我已閱讀并同意<a href="##">慕課協議</a>。</label>
72                     <p>
73                         <a href="javascript:" class="regist-btn">立即注冊</a>
74                     </p>
75                 </div>
76             </div>
77         </div>
78     </div>
79 </div>
80 </body>
81 </html>
View Code

 

5）脫離文檔流

　　垂直空間的層級

　　后來居上（準則）

　　z-index潛在誤區

　　絕對定位元素都需要z-index控制層級，確定其顯示的垂直位置

　　1.如果只有一個絕對定位元素，自然不需要z-index,自動覆蓋普通元素；

　　2.如果兩個絕對定位，控制DOM流的前后順序達到需要的覆蓋效果，依然無z-index；

　　3.如果多個絕對定位交錯，非常非常少見，z-index:1控制；

　　4.如果非彈窗類的絕對定位元素z-index>2,必定z-index冗余，請優化！

　　備注：動畫盡量作用在 絕對定位的元素上。

6）基本屬性（天使的翅膀）

　　top/left/bottom/right

　　定位

　　一般組合使用：top+left/bottom+right

7）基本屬性與width/height

　　相互替代性

　　絕對定位對立：left+right/top+bottom ————拉伸效果

positon:absolute;
left:0;
top:0;
width:50%;

=====等同于========
position:absolute;
left:0;
top:0;
width:50%;

 

　　差異——拉伸更強大

　　如：實現一個距離右側200px全屏自適應容器層

---------------拉伸--------------
position: absolute;
left: 0;
right: 200px;

---------------width-------------
position: absolute;
left:0;
width:calc(100%-200);

 

　　相互支持性

　　1. 容器無需固定width/height值，內部元素亦可拉伸

　　css驅動的左右半區翻圖瀏覽效果

　　

       

 

　　2. 容器拉伸，內部元素支持百分比width/height值

　　通常情況：

　　元素百分比height要起作用，需要父級容器的height值不是auto

　　絕對定位拉伸下：

　　即使父級容器的height值是auto，只要容器絕對定位拉伸形成，百分比高度值也是支持的

　　

 

　　相互合作性

　　如果拉伸和width/height同時存在

　　則：width/height設置的尺寸 > left/top/right/bottom 拉伸的尺寸

　　當：尺寸限制，拉伸及margin：auto同時出現————絕對定位元素的絕對居中效果（IE8+）

8）absolute網頁整體布局

　　擺脫狹隘的定位

　　1. body降級，子元素升級

//升級的子div設置為滿屏
.page{ position: absolute; left:0; top: 0;right: 0;bottom: 0 }

//絕對定位受限于父級，因此，page要想拉伸，則需要
html, body{ height: 100%; }

 

　　2. 各模塊-頭尾、側邊欄（pc端）各居其位

　　

　　

header,footer{ position: absolute; left: 0; right: 0; }
header {height: 50px; top:0; }
footer {height: 50px; bottom: 0; }

side{ width: 250px; position: absolute; left: 0; top:50px; bottom:50px; }

 

　　3. 內容區域想象成body

.content{position: absolute; top: 50px; bottom:50px;left:250px; overflow:auto}

 

　　這時： 頭尾及側邊欄都是fixed效果，不跟隨滾動，避免了移動端position：fixed實現的諸多問題

　　4. 全屏覆蓋與page平級

.overlay{
    position: absolute;
    top: 0;right:0;bottom:0;left:0;
    z-index:900;
}

<div class="page"></div>
<div class="overlay"></div>

 

　　 完整實例

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  6 <title>慕課網-絕對定位整頁布局演示</title>
  7 <link rel="stylesheet" href="css/absolute-layout.css">
  8 <style>
  9 body { font-family: 'microsoft yahei'; }
 10 </style>
 11 </head>
 12 
 13 <body>
 14 <div class="page">
 15     <div class="header">
 16         <h1>慕課網</h1>
 17         <a href="javascript:" class="icon-add">添加</a>
 18         <a href="javascript:" class="icon-search">搜索</a>
 19     </div>
 20     <div class="content">
 21         <div class="">
 22             <a href="http://www.imooc.com/learn/192" class="wechat-list">
 23                 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
 24                 <div class="cell">
 25                     <div class="wechat-h-time"><h5>張鑫旭</h5><time>早上09:51</time></div>
 26                     <p>CSS深入理解值絕對定位</p>
 27                 </div>
 28             </a>
 29             <a href="http://www.imooc.com/learn/192" class="wechat-list">
 30                 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
 31                 <div class="cell">
 32                     <div class="wechat-h-time"><h5>張鑫旭</h5><time>早上09:38</time></div>
 33                     <p>如果高度不夠，可以手動縮小瀏覽器高度</p>
 34                 </div>
 35             </a>
 36             <a href="http://www.imooc.com/learn/192" class="wechat-list">
 37                 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
 38                 <div class="cell">
 39                     <div class="wechat-h-time"><h5>張鑫旭</h5><time>早上08:47</time></div>
 40                     <p>此demo是本系列最后一個demo</p>
 41                 </div>
 42             </a>
 43             <a href="http://www.imooc.com/learn/192" class="wechat-list">
 44                 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
 45                 <div class="cell">
 46                     <div class="wechat-h-time"><h5>張鑫旭</h5><time>早上08:36</time></div>
 47                     <p>此demo需要在高級瀏覽器中查看</p>
 48                 </div>
 49             </a>
 50             <a href="http://www.imooc.com/learn/192" class="wechat-list">
 51                 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
 52                 <div class="cell">
 53                     <div class="wechat-h-time"><h5>張鑫旭</h5><time>昨天</time></div>
 54                     <p>重在原理展示，結構可多變。例如，header放在page外面~~</p>
 55                 </div>
 56             </a> 
 57             <a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
 58                 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
 59                 <div class="cell">
 60                     <div class="wechat-h-time"><h5>張鑫旭</h5><time>昨天</time></div>
 61                     <p>最近鄙人整了個名叫Mobilebone的開源項目</p>
 62                 </div>
 63             </a>
 64             <a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
 65                 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
 66                 <div class="cell">
 67                     <div class="wechat-h-time"><h5>張鑫旭</h5><time>星期三</time></div>
 68                     <p>就是依賴絕對定位整體布局，大家可以前去圍觀</p>
 69                 </div>
 70             </a>
 71             <a href="http://www.imooc.com/learn/192" class="wechat-list">
 72                 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
 73                 <div class="cell">
 74                     <div class="wechat-h-time"><h5 class="business">慕課網</h5><time>星期三</time></div>
 75                     <p><img src="http://img.mukewang.com/547d33a00001299b00320033.jpg" width="16" height="16"></p>
 76                 </div>
 77             </a>
 78             <a href="http://www.imooc.com/learn/121" class="wechat-list">
 79                 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
 80                 <div class="cell">
 81                     <div class="wechat-h-time"><h5>張鑫旭</h5><time>星期三</time></div>
 82                     <p>CSS深入理解之浮動</p>
 83                 </div>
 84             </a>
 85             <a href="http://www.imooc.com/learn/121" class="wechat-list">
 86                 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
 87                 <div class="cell">
 88                     <div class="wechat-h-time"><h5>張鑫旭</h5><time>上周</time></div>
 89                     <p>同樣精彩，歡迎支持~</p>
 90                 </div>
 91             </a>
 92         </div>
 93     </div>
 94     
 95     <div class="footer">
 96         <a href="http://www.imooc.com/course/list">
 97             <i class="icon-wechat"></i>課程
 98         </a>
 99         <a href="http://www.imooc.com/wenda">
100             <i class="icon-contacts"></i>問答
101         </a>
102         <a href="http://www.imooc.com/seek/index">
103             <i class="icon-finds"></i>求課
104         </a>
105         <a href="http://www.imooc.com/space/course" class="active">
106             <i class="icon-mes"></i>我的課程
107         </a>
108     </div>
109 </div>
110 </body>
111 </html>
View Code

 

 1 /* wechat.css */
 2 body {
 3     margin: 0;
 4     -webkit-user-select: none;
 5     user-select: none;
 6     -ms-touch-action: none;
 7 }
 8 
 9 /* construction */
10 html, body, .page {
11     height: 100%; width: 100%;
12     overflow: hidden;
13 }
14 .page {
15     position: absolute; left: 0; top: 0;
16 }
17 body { background-color: #ebebeb; font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; }
18 a { text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
19 h1,h2,h3,h4,h5,h6{ margin: 0; font-weight: 400; }
20 ul,ol{ margin: 0; list-style-type: none; }
21 
22 .header, .footer, .content { position: absolute; left: 0; right: 0; }
23 .header { height: 48px; padding: 0 5px; background-color: #21292B; color: #fff; top: 0; z-index: 1; }
24 .header > h1 { line-height: 48px; margin: 0 0 0 10px; font-size: 18px; float: left; }
25 .header > a { display: inline-block; width: 48px; height: 48px; background-size: 48px 144px; text-indent: -9em; overflow: hidden; }
26 .header > .icon-search, .header > .icon-add { float: right; }
27 .footer { height: 52px; border-top: 1px solid #dfdfdf; background-color: #fcfcfc; bottom: 0; z-index: 1; }
28 .footer > a { width: 25%; text-align: center; color: #999; float: left; font-size: 14px; }
29 .footer > a > i { display: block; height: 35px; margin-bottom: -3px; background-size: 35px 280px; }
30 .footer > .active { color: #45c018; }
31 .content { top: 48px; bottom: 53px; overflow: auto; }
32 
33 .icon-search, .icon-back, .icon-add { background: url(http://img.mukewang.com/547d339b000188bb00960288.png) no-repeat; }
34 .icon-back { background-position: 0 -96px; }
35 .icon-add { background-position: 0 -48px; }
36 .icon-wechat, .icon-contacts, .icon-finds, .icon-mes { background: url(http://img.mukewang.com/547d33970001444d00700560.png) no-repeat center top; }
37 .active .icon-wechat { background-position: center -35px; }
38 .icon-contacts { background-position: center -70px; }
39 .active .icon-contacts { background-position: center -105px; }
40 .icon-finds  { background-position: center -140px; }
41 .active .icon-finds { background-position: center -175px; }
42 .icon-mes  { background-position: center -210px; }
43 .active .icon-mes { background-position: center -245px; }
44 .icon-find { background: url(icon-find.png) no-repeat; background-size: 28px 210px; }
45 .icon-find-2 { background-position: 0 -30px; }
46 .icon-find-3 { background-position: 0 -60px; }
47 .icon-find-4 { background-position: 0 -90px; }
48 .icon-find-5 { background-position: 0 -120px; }
49 .icon-find-6 { background-position: 0 -150px; }
50 .icon-find-7 { background-position: 0 -180px; }
51 .icon-me { background: url(icon-me.png) no-repeat; background-size: 28px 120px; }
52 .icon-me-2 { background-position: 0 -30px; }
53 .icon-me-3 { background-position: 0 -60px; }
54 .icon-me-4 { background-position: 0 -90px; }
55 
56 
57 .wechat-list { display: block; height: 64px; padding: 8px 12px; box-sizing: border-box; border-bottom: 1px solid #d7d7d7; background-color: #fff; }
58 .wechat-list:last-child { border-bottom: 0; }
59 .wechat-list > img { width: 48px; height: 48px; float: left; }
60 .wechat-list > .cell { padding-left: 58px; line-height: 24px; color: #333; }
61 .wechat-h-time { overflow: hidden; }
62 .wechat-h-time > h5 { font-size: 100%; float: left; }
63 .wechat-h-time > time { font-size: 12px; color: #b9b9b9; float: right; }
64 .wechat-h-time .business { color: #54688D; }
65 .wechat-h-time + p { margin: 0 20px 0 0; font-size: 14px; color: #a8a8a8; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
66 .wechat-detail { position: relative; z-index: 1; }
View Code

 

三、float

　　1）float的設計初衷僅僅是： 文字環繞效果

　　包裹與破壞

　　使父元素塌陷

  • clear
  • BFC/haslayout
.clearfix:after{content:'';display:table;clear:both;}
.clearfix{*zoom:1;}

 　　clearfix只需要用在包含浮動子元素的父級元素上

　　兩種方式：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>clear與margin重疊</title>
 6 </head>
 7 
 8 <body>
 9 1.
10 <div style="background-color: #f5f5f5;">
11     <img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left;">
12     <div style="clear:both; margin-bottom:100px;">clear:both;</div>
13 </div>
14 <div style="margin-top: 100px;">本文字離圖片的距離是？</div>
15 <br><br><br><br>2.
16 <div style="background-color: #f5f5f5; overflow: hidden;">
17     <img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left; margin-bottom: 100px;">
18 </div>
19 <div style="margin-top: 100px;">本文字離圖片的距離是？</div>
20 </body>
21 </html>
View Code

 

　　清除浮動有兩種方法：

　　1、用clear清除浮動：浮動元素底部加入 <div> + clear:both 樣式； 會發生margin重疊顯現。

　　原因：外部元素會對內部元素產生影響，圖片的bottom是針對下一個div的上部為標準，所以上移100px，而發生重疊。

　　2、用BFC清除浮動：浮動元素的父元素 + overflow:hidden 樣式； 父元素會將整個元素包裹起來，從而不會出現塌陷和重疊顯現。

　　原因：內部元素被包裹起來不會受到干擾，圖片的bottom就是父元素的bottom，所以上移100px;


　　2）浮動的濫用

　　砌磚布局

　　1. 容錯性比較糟糕，容易出問題

　　2. 這種布局需要元素固定尺寸，很難重復使用

　　3. 低版本ie下有很多問題

　　3）浮動與流動布局

　　1. 單側固定

　　

　　width+ float

　　padding-left/margin-left

　　2. 智能自適應

　　float 

　　display: table-cell   ie8+

　　display: inline-block ie7

　　4） 兼容

　　ie7

　　

 

 

　　


文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄