1:display:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .div2,p,a,span{
 8 
 9             width:100px ;
10             height: 100px;
11         }
12         .div2{
13             /*width:50px ;*/
14             /*height: 50px;*/
15             background-color: #ff4d26;
16             /*display: inline;*/
17             display: none;
18         }
19         p{
20             /*width:50px ;*/
21             /*height: 50px;*/
22             background-color: mediumvioletred;
23         }
24         span{
25             /*width:50px ;*/
26             /*height: 50px;*/
27             background-color: blue;
28             display:inline-block ;
29         }
30         a{
31             /*width:50px ;*/
32             /*height: 50px;*/
33             background-color: yellow;
34             display:inline-block ;
35         }
36         .outer{
37             word-spacing: -8px;
38         }
39     </style>
40 </head>
41 <body>
42 
43 
44 <div class="div2">divvvvvv</div>
45 <p>ppppp</p>
46 
47 <div class="outer">
48     <span>spannnnnnnn</span>
49     <a href="#">aaaa</a>
50 </div>
51 
52 </body>
53 </html>
View Code

2:border:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .div1{
 8             width: 200px;
 9             height: 200px;
10             /*border: 1px solid red;*/
11             border: 5px dashed blue;
12             /*border-color: coral;*/
13             /*border-style: solid;*/
14             /*border-width: 5px;*/
15             border-left-color: crimson;
16         }
17     </style>
18 </head>
19 <body>
20 
21 <div class="div1"></div>
22 </body>
23 </html>
View Code

3:list lable:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         ol,ul{
 8             list-style: circle;
 9         }
10     </style>
11 </head>
12 <body>
13 
14 <ol>
15     <li>111</li>
16     <li>222</li>
17     <li>333</li>
18 </ol>
19 
20 <ul>
21     <li>111</li>
22     <li>222</li>
23     <li>333</li>
24 </ul>
25 
26 <dl>
27     <dt>河北省</dt>
28     <dd>廊坊</dd>
29     <dd>石家庄</dd>
30     <dd>保定</dd>
31 </dl>
32 </body>
33 </html>
View Code

4:text attributor:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             text-transform: capitalize;
 9             word-spacing: 30px;
10             letter-spacing: 10px;
11             text-indent: 150px;
12             height:100px;
13             background-color: aquamarine;
14             text-align: center;
15             line-height: 100px;
16         }
17     </style>
18 </head>
19 <body>
20 
21 
22 <div>text attributes
23 <!--    <p>hello</p>-->
24 </div>
25 <div>hello hello hello</div>
26 </body>
27 </html>
View Code

5:inner and outer margin:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .div1{
 8             width: 200px;
 9             height: 200px;
10             background-color: coral;
11             border: 20px solid red;
12             padding: 10px;
13             /*padding-left: 10px;*/
14             /*margin: 10px;*/
15 
16             /*margin: 10px 20px 30px 40px;*/
17             /*margin: 10px 20px 30px;*/
18             /*margin: 10px 20px;*/
19             /*margin-bottom: 10px;*/
20             margin-top: 30px;
21         }
22 
23 
24         .div2{
25             width: 200px;
26             height: 200px;
27             background-color: blue;
28             border: 20px solid pink;
29             padding: 5px;
30             /*margin-top: 10px;*/
31         }
32 
33         .outer{
34             height: 800px;
35             background-color: cyan;
36         }
37         .outer2{
38             width: 100px;
39             height: 100px;
40             background-color: firebrick;
41         }
42         body{
43             border:2px solid blue;
44             margin: 0px;
45         }
46     </style>
47 </head>
48 <body>
49 
50 <div class="outer2"></div>
51 <div class="outer">inline
52     <div class="div1">hello div1</div>
53 <div class="div2">hello div2</div>
54 </div>
55 
56 
57 
58 </body>
59 </html>
View Code

6:float:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7          * {
 8              margin:0;padding:0;
 9          }
10         .container{
11             border:1px solid red;
12             width:300px;
13             /*overflow: hidden;*/
14         }
15         #box1{
16             background-color:green;
17             float:left;
18             width:100px;
19             height:100px;
20         }
21         #box2{
22             background-color:deeppink;
23             float:right;
24             width:100px;
25             height:100px;
26         }
27          #box3{
28              background-color:pink;
29              height:40px;
30          }
31 /*better use:*/
32         .clearfix:after{
33             content: '';
34             display: block;
35             clear: both;
36         }
37 
38     </style>
39 </head>
40 <body>
41 
42 
43 <div class="container clearfix">
44     <div id="box1">box1 float by left</div>
45     <div id="box2">box2 float by right</div>
46 <!--    <div style="clear: both"></div>-->
47 </div>
48     <div id="box3">box3</div>
49 </body>
50 </html>
View Code

7:position:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin: 0px;
 9         }
10         .div1{
11             width: 200px;
12             height: 100px;
13             background-color: beige;
14             /*position: static;*/
15 
16         }
17         .div2{
18             width: 200px;
19             height: 100px;
20             background-color: rebeccapurple;
21             /*position: relative;*/
22             position: absolute;
23             left: 100px;
24             top: 100px;
25         }
26         .div3{
27             width: 200px;
28             height: 200px;
29             background-color: green;
30             /*position: relative;*/
31             /*top: -100px;*/
32         }
33         .div4{
34             width: 200px;
35             height: 200px;
36             background-color: yellow;
37         }
38         .outer{
39             position: relative;
40         }
41         .returnTop{
42             width: 100px;
43             height: 50px;
44             position: fixed;
45             bottom: 20px;
46             right: 5px;
47             background-color: gray;
48             color: white;
49             text-align: center;
50             line-height: 50px;
51                  }
52 
53  /*setting requiriment:father level set realtive position while the son level set absolute position.    */
54 
55     </style>
56 </head>
57 <body>
58 <div style="height: 200px;background-color: cyan"></div>
59 <!--div.div*4-->
60 <div class="outer">
61     <div class="div1"></div>
62     <div class="div2"></div>
63     <div class="div3"></div>
64     <div class="div4"></div>
65 </div>
66 
67 <div style="height: 2000px;background-color: chocolate "></div>
68 <div class="returnTop">return</div>
69 </body>
70 </html>
View Code