04_css盒子模型 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <style type="text/css">
 7 /*
 8   块级标签：占的是一行.
 9   行内标签:占行内的一部分,不能嵌套块级标签
10   
11   块级：div p ol 
12   行内：span font a
13   */
14 div {
15     border-color: red;
16     border-width: 1px;
17     border-style: solid;
18 }
19 #one{
20   width:200px;
21   height:300px;
22  /*内边距：
23      注意，内边距会改变自身的宽高  
24  padding-left: 100px; */
25  padding-left: 100px;
26 }
27 #two{
28     width:100px;
29     height:100px;
30     /*
31         外边距 
32     margin-left: 100px; */
33     
34     
35 }
36 </style>
37 </head>
38 <body>
39 <!--     
40 张三<div>张三</div>张三<br> 李四
41 <span>李四</span>李四 -->
42 
43     <div id="one">
44         <div id="two"></div>
45     </div>
46 
47 </body>
48 </html>

 

posted @ 2016-02-21 21:46  男儿当自强！  阅读(162)  评论(0)    收藏  举报