display和浮动

 

块级元素：独占一行

h1-h6 p div  列表.....

行内元素：不独占一行

span  a  img  strong....

行内元素 可以被包含在块级元素中，反之，则不可以

 

display

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 <!--    block 块元素
 8         inline 行内元素
 9         inline-block 是块元素可以有内联，在一行
10         none 消失
11 
12         float:left 左浮
13         clear：both 清除浮动 还可以当做块级元素
14 -->
15 
16     <style>
17         div{
18             width: 100px;
19             height: 100px;
20             border: 1px solid red;
21             display: inline;
22             float: right;
23         }
24         span{
25             width: 100px;
26             height: 100px;
27             border: 1px solid red;
28             display: inline-block;
29             float: right;
30             clear: both;
31         }
32         p{
33             float:right;
34 
35         }
36     </style>
37 
38 </head>
39 <body>
40 <div>
41     div块元素
42 </div>
43 
44 <span>span行内元素</span>
45 <p>你好</p>
46 </body>
47 </html>
浮动

 

posted @ 2022-03-28 22:25  doremi429  阅读(30)  评论(0)    收藏  举报