这些例子最好通过FireFox结合FireBug调试查看
1、absolute让元素inline-block化
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>absolute让元素inline-block化</title> 6 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 7 <link rel="icon" href="favicon.ico" type="image/x-icon" /> 8 <style type="text/css"> 9 body 10 { 11 font-family: 'Microsoft YaHei'; 12 font-size: 18px; 13 } 14 15 .div 16 { 17 padding: 10px; 18 margin-left: 20px; 19 margin-bottom: 10px; 20 background-color: #f0f3f9; 21 border: 8px solid #ffd800; 22 } 23 24 .abs 25 { 26 position: absolute; 27 } 28 29 .info 30 { 31 bottom: 10px; 32 right: 10px; 33 border-width: 8px 0 0; 34 border-radius: 8px 8px 0 0; 35 border-color: blue; 36 } 37 38 .info span 39 { 40 width: 200px; /*width无效，必须设置为block才有效!有3种方式>>>>1、display：block;2、float:left;3、position:absolute;*/ 41 border: 1px solid #4cff00; 42 display: block; 43 /*float:left;*/ 44 /*position: absolute; 45 left: 0; 46 top: 0;*/ 47 } 48 </style> 49 50 </head> 51 <body> 52 <div class="div"> 53 <img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" /> 54 <p>无absolute</p> 55 </div> 56 <div class="div abs"> 57 <img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" /> 58 <p>absolute后</p> 59 </div> 60 <div class="div abs info"> 61 <p> 62 说明：包裹性换种说法就是让元素inline-block化，<br /> 63 例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，<br /> 64 则100%默认宽度就会变成自适应内部元素的宽度。 65 </p> 66 <h1>absolute 特性总结</h1> 67 <p> 68 1、脱离文档流<br /> 69 2、宽和高均为0（FireBug查看布局可知）<br /> 70 3、如果没有[left/right/top/bottom] 则待在原位（表现为一个没有长宽的参考点）<br /> 71 4、如果指定[left/right/top/bottom] 则向上追溯到 relative或absolute父盒子，直至body后定位<br /> 72 5、包裹其内部子元素，即让元素inline-block化<br /> 73 </p> 74 <span>这是span标签，inline是没有宽度的，block后才有宽度</span> 75 </div> 76 77 </body> 78 </html>
2、absolute绝对定位的破坏性
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 6 <link rel="icon" href="favicon.ico" type="image/x-icon" /> 7 <title>absolute绝对定位的破坏性</title> 8 <style> 9 body 10 { 11 font-family: 'Microsoft YaHei'; 12 font-size: 18px; 13 } 14 15 .div 16 { 17 padding: 10px; 18 margin: 5px; 19 border: 8px solid #ffd800; 20 background-color: #f0f3f9; 21 float: left; 22 } 23 24 .abs 25 { 26 position: absolute; 27 /*没有翅膀是飞不走的,待在原位*/ 28 /* 29 1、取消注释，插上翅膀，则会以body为参考物作left:0 top:0 位移 30 2、FireBug禁用翅膀，取消位移，回到原位！ 31 */ 32 /*left: 0px; 33 top: 0px;*/ 34 } 35 36 .info 37 { 38 border-width: 8px 0 0; 39 border-radius: 8px 8px 0 0; 40 border-color: blue; 41 top: auto; /*复写abs以清空*/ 42 left: 10px; /*复写abs以重置*/ 43 bottom: 10px; 44 } 45 </style> 46 </head> 47 <body> 48 <div class="div"> 49 <img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" /> 50 <p>图片无absolute</p> 51 </div> 52 <div class="div"> 53 <img class="abs" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" /> 54 <p> 55 图片absolute后,absolute的参考物，为啥没有追溯到body，而是在本div中？<br /> 56 因为没有指定left/top！没有翅膀是飞不走的！<br /> 57 事实上参考物的确为body，只不过没有飞走！<br /> 58 依然保持原位，貌似还在div中。 59 </p> 60 </div> 61 <div class="div abs info"> 62 <p>说明：图片设置position:absolute属性后，父标签的高宽都塌陷了，连它的兄弟float都救不了。</p> 63 64 </div> 65 </body> 66 </html>
3、父盒子限魔大法
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 6 <link rel="icon" href="favicon.ico" type="image/x-icon" /> 7 <title>父盒子限魔大法</title> 8 <style> 9 body 10 { 11 font-family: 'Microsoft YaHei'; 12 font-size: 18px; 13 } 14 15 16 .box 17 { 18 width: 15em; 19 height: 10em; 20 background-color: #beceeb; 21 position: relative; /*父盒子限魔大法,父盒子真身还在文档流，纵云梯z-index飙升*/ 22 /*position: absolute;*/ /*父盒子限魔大法，父盒子真身不在文档流，没有了宽和高，纵云梯z-index飙升*/ 23 left: 100px; 24 top: 100px; 25 } 26 27 .box img 28 { 29 position: absolute; /*向上追溯absolute或relative，直至body*/ 30 left: 20px; 31 top: 20px; 32 } 33 </style> 34 </head> 35 <body> 36 <div> 37 <p>说明：限制absolute以body为参考物，约束在拥有ablolute或relative属性的父容器</p> 38 </div> 39 <div id="target" class="box"> 40 <img src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" /> 41 </div> 42 43 </body> 44 </html>
4、relative最小影响原则（不遵循）
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 6 <link rel="icon" href="favicon.ico" type="image/x-icon" /> 7 <title>relative最小影响原则（不遵循）</title> 8 <style> 9 body 10 { 11 font-family: 'Microsoft YaHei'; 12 font-size: 18px; 13 } 14 15 .test 16 { 17 width: 25em; 18 margin: 2em auto; 19 } 20 21 .box 22 { 23 padding: 2em; 24 border: 1px solid #beceeb; 25 border-radius: 2px; 26 background-color: #f0f3f9; 27 position: relative; 28 } 29 30 .ok 31 { 32 color: green; 33 font-size: 6em; 34 position: absolute; 35 right: -11px; 36 bottom: -.5em; 37 } 38 39 .infodiv 40 { 41 background-color: #f0f3f9; 42 margin: 5px auto; 43 width: 800px; 44 } 45 46 .infoborder 47 { 48 /*position: absolute;*/ /*inline-block化,但是没有自然居中，即需要其他辅助居中*/ 49 border-style: solid; 50 border-width: 8px 0 0; 51 border-radius: 8px 8px 0 0; 52 border-color: blue; 53 } 54 </style> 55 </head> 56 <body> 57 <div class="test"> 58 <div class="box"> 59 CSS relative相对定位的最小化影响原则 60 <strong class="ok">√</strong> 61 </div> 62 </div> 63 64 <div class="infodiv infoborder"> 65 <p> 66 将需要绝对定位的元素单独放在relative属性的标签下，于是，<br /> 67 relative相对定位就不会影响任何其他元素，仅仅是其内部的绝对定位元素。<br /> 68 于是，上面的文字内容div还是那个普普通通的文字内容div，<br /> 69 以后要改动什么东西就可以放心大胆的改，而不需要担心扔掉那个属性或是布局变了,<br /> 70 里面原来绝对定位的元素位置偏移掉了。<br /> 71 也就是牺牲一个标签增强扩展性和易维护性！ 72 </p> 73 </div> 74 75 </body> 76 </html>
5、relative最小影响原则（遵循）
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 6 <link rel="icon" href="favicon.ico" type="image/x-icon" /> 7 <title>relative最小影响原则（遵循）</title> 8 <style> 9 body 10 { 11 font-family: 'Microsoft YaHei'; 12 font-size: 18px; 13 } 14 15 16 17 .test 18 { 19 width: 25em; 20 margin: 2em auto; 21 } 22 23 .box 24 { 25 padding: 2em; 26 border: 1px solid #beceeb; 27 border-radius: 2px; 28 background-color: #f0f3f9; 29 } 30 31 .rel 32 { 33 position: relative; 34 } 35 36 .ok 37 { 38 color: green; 39 font-size: 6em; 40 position: absolute; 41 right: -10px; 42 top: -1em; 43 } 44 45 .infodiv 46 { 47 background-color: #f0f3f9; 48 margin: 5px auto; 49 /* 800px;*/ 50 } 51 52 .infoborder 53 { 54 position: absolute; /*inline-block化,但是脱离文档流后无法自然居中,居中的技巧就是transform*/ 55 left: 50%; 56 -moz-transform: translateX(-50%); 57 -ms-transform: translateX(-50%); 58 -o-transform: translateX(-50%); 59 -webkit-transform: translateX(-50%); 60 transform: translateX(-50%); 61 border-style: solid; 62 border-width: 8px 0 0; 63 border-radius: 8px 8px 0 0; 64 border-color: blue; 65 } 66 </style> 67 </head> 68 <body> 69 <div class="test"> 70 <div class="box">CSS relative相对定位的最小化影响原则</div> 71 <div class="rel"><strong class="ok">√</strong></div> 72 </div> 73 <div class="infodiv infoborder"> 74 <p> 75 将需要绝对定位的元素单独放在relative属性的标签下，于是，<br /> 76 relative相对定位就不会影响任何其他元素，仅仅是其内部的绝对定位元素。<br /> 77 于是，上面的文字内容div还是那个普普通通的文字内容div，<br /> 78 以后要改动什么东西就可以放心大胆的改，而不需要担心扔掉那个属性或是布局变了,<br /> 79 里面原来绝对定位的元素位置偏移掉了。<br /> 80 也就是牺牲一个标签增强扩展性和易维护性！ 81 </p> 82 </div> 83 </body> 84 </html>
