margin重叠现象：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>margin重叠现象</title> 6 <style> 7 /*两个div之间的间距本应该是50px，但是margin的重叠现象会让两个div的间距取最大值*/ 8 #d1{ 9 background-color: red; 10 height: 50px; 11 margin-bottom: 30px; 12 } 13 #d2{ 14 background-color: blue; 15 height: 50px; 16 margin-top: 20px; 17 } 18 </style> 19 </head> 20 21 <body> 22 <div id="d1"></div> 23 <div id="d2"></div> 24 </body> 25 </html>
盒子模型1：1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>盒子模型</title> 6 </head> 7 <style> 8 #d1{ 9 width: 800px; 10 height: 800px; 11 background-color: red; 12 } 13 #d2{ 14 width: 200px; 15 height: 200px; 16 background-color: blue; 17 margin: 60px 50px 20px 30px; 18 float: left; 19 border: 1px solid white; 20 color: yellow; 21 padding: 20px 10px 30px 50px; 22 } 23 #d3{ 24 width: 200px; 25 height: 200px; 26 background-color: blue; 27 float: left; 28 } 29 </style> 30 31 32 <body> 33 <div id="d1"> 34 <div id="d2">希望你的发言不是“背台词”，而是真正讲问题、提建议 35 “黄渤同志，你的稿子我已经看过了，请你不用念稿子，直接提问题。</div> 36 <div id="d3"></div> 37 </div> 38 </body> 39 </html>
盒子模型2：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>盒子模型2</title> 6 <style> 7 #d1{ 8 width: 500px; 9 height:220px; 10 background-color: blue; 11 12 13 14 } 15 #d2{ 16 width: 50px; 17 height: 40px; 18 background-color: red; 19 padding: 20px;/*内边距*/ 20 border: 10px solid white; 21 float: left; 22 margin: 30px;/*外边距*/ 23 24 25 } 26 /*真正的占地宽度：width+padding*2+border*2+margin*2*/ 27 /*真正的占地高度：height+padding*2+border*2+margin*2*/ 28 29 </style> 30 </head> 31 32 <body> 33 <div id="d1"> 34 <div id="d2"></div> 35 </div> 36 </body> 37 </html>
布局定位共有4种方式。
（1）固定定位(fixed)
（2）相对定位(relative)
（3）绝对定位(absolute)
（4）静态定位(static)
以后我们用bootstrap栅格布局。
字符实体
|
显示结果 |
描述 |
实体名称 |
|
空格 |
||
|
< |
小于号 |
< |
|
> |
大于号 |
> |
|
& |
和号 |
& |
|
" |
双引号 |
" |
|
' |
单引号 |
' (IE不支持) |
|
￠ |
分（cent） |
¢ |
|
£ |
镑（pound） |
£ |
|
¥ |
元（yen） |
¥ |
|
€ |
欧元（euro） |
€ |
|
§ |
小节 |
§ |
|
© |
版权（copyright） |
© |
|
® |
注册商标 |
® |
|
™ |
商标 |
™ |
|
× |
乘号 |
× |
|
÷ |
除号 |
÷ |
div定位（固定位置）相对定位：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>固定位置</title> 6 <style> 7 #d1{ 8 width: 50px; 9 height: 50px; 10 background-color: red; 11 position: fixed;/*固定(根据浏览器窗口定位)*/ 12 left: 1000px; 13 top: 50px; 14 } 15 #d2{width: 300px; 16 height: 300px; 17 background-color: blue; 18 } 19 #d3{width: 100px; 20 height: 100px; 21 background-color: pink; 22 position: relative;/*相对定位(相对于自己本身的位置去定位的)*/ 23 left:10px; 24 bottom: 10px; 25 } 26 absilute/* 绝对定位，根据上一级父元素谁有position属性，就根据谁定位，最大也就找到body，根据body定位*/ 27 z-index/*谁的值大谁就在上面*/ 28 #d4{ 29 width: 100px; 30 height: 100px; 31 background-color: yellow; 32 33 34 } 35 </style> 36 </head> 37 38 <body> 39 <div id="d1"></div> 40 <div id="d2"> 41 <div id="d3"></div> 42 <div id="d4"></div> 43 </div> 44 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 45 46 </body> 47 </html>
div定位（绝对定位）：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>绝对定位</title> 6 <style> 7 #d1{ 8 width: 300px; 9 height: 300px; 10 background-color: red; 11 position: relative; 12 } 13 #d2{ 14 width: 50px; 15 height: 50px; 16 background-color: blue; 17 position: absolute;/* 绝对定位，根据上一级父元素谁有position属性，就根据谁定位，最大也就找到body，根据body定位*/ 18 right:50px; 19 top:50px; 20 z-index:100;/*谁的值大谁就在上面*/ 21 22 } 23 #d3{ 24 width: 50px; 25 height: 50px; 26 background-color: blue; 27 position: absolute; 28 right:50px; 29 top:50px; 30 z-index:101; 31 } 32 </style> 33 </head> 34 35 <body> 36 <div id="d1"> 37 <div id="d2"></div> 38 <div id="d3"></div> 39 </div> 40 </body> 41 </html>
内联元素与块状元素转化：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>内联元素与块状元素的转换</title> <style> div{ width: 200px; height: 200px; background-color: red; border: 1px solid black; display: inline;/*块状转内联*/ } #s1{ color: red; width: 100px; height: 100px; background-color: blue; display: block/*内联转块状*/ } </style> </head> <body> <p>离离原上<span id="s1">草</span>春风吹又生</p> <div> 一岁一枯荣</div> <div>野火烧不尽</div> </body> </html>