20180207-margin重疊現象-盒子模型-div定位-內聯塊狀元素轉換-360導航練習

時間 2019-11-10

標籤 margin 重疊現象盒子模型 div 定位內聯塊狀元素轉換導航練習欄目 CSS 简体版

原文原文鏈接

margin重疊現象：html

 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：bootstrap

 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)spa

（3）絕對定位(absolute)code

（4）靜態定位(static)htm

之後咱們用bootstrap柵格佈局。blog

字符實體utf-8

顯示結果it	描述	實體名稱
	空格
<	小於號	<
>	大於號	>
&	和號	&
"	雙引號	"
'	單引號	' (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>