JavaWeb8.5【CSS属性、盒子模型】

 

 

 

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css属性</title>
 6 
 7     <style>
 8         p{
 9             color: red;
10             font-size: 30px;
11             text-align: center;
12             line-height: 100px;
13             /*边框*/
14             border: 1px solid red;
15         }
16 
17         div{
18             border: 1px solid blue;
19             height: 200px;
20             width:  200px;
21 
22             background: url("../img/logo.jpg") no-repeat center;
23         }
24     </style>
25 </head>
26 <body>
27 
28 <p>传智播客</p>
29 <div>ITer</div>
30 
31 </body>
32 </html>

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css属性-盒子模型</title>
 6 
 7     <style>
 8         div{
 9             border: 1px solid blue;
10             width: 100px;
11         }
12 
13         .div1{
14             width: 100px;
15             height: 100px;
16 
17             /*通过设置内盒子的四周外边距让其居于大盒子的中间*/
18             /*margin: 50px;*/
19         }
20         .div2{
21             width: 200px;
22             height: 200px;
23 
24             /*margin-left: 300px;*/
25             margin-bottom: 20px;
26 
27             /*通过设置大盒子的内边距让小盒子居于中间*/
28             padding: 50px;
29             /*设置大盒子的属性，让之前设置的宽和高就是最终大盒子的大小；不设置的话有padding的时候大盒子大小会变化*/
30             box-sizing: border-box;
31         }
32 
33         .div3{
34             float: left;
35         }
36         .div4{
37             float: left;
38         }
39         .div5{
40             float: right;
41         }
42     </style>
43 </head>
44 <body>
45 
46 <div  class="div2">
47     <div class="div1"></div>
48 </div>
49 
50 <div class="div3">aaaa</div>
51 <div class="div4">bbbbb</div>
52 <div class="div5">cccc</div>
53 
54 </body>
55 </html>

 

posted @ 2021-06-26 18:27  yub4by  阅读(53)  评论(0)  编辑  收藏  举报