css中的块级和内联元素

块级元素：

首先说明display是块级元素，会单独站一行，如

代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>display元素</title>
 6     <style type="text/css">
 7         .box1{
 8             height: 50px;
 9             width: 300px;
10             background-color: #40E0D0;
11         }
12         strong {
13             font-size: 50px;
14         }
15     </style>
16 </head>
17 <body>
18 <div class="box1"></div>
19 <strong>晨落梦公子</strong>
20 </body>
21 </html>

View Code

但当添加上浮动（float）后，则为：（会换行）

代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>display元素</title>
 6     <style type="text/css">
 7         .box1{
 8             height: 50px;
 9             width: 300px;
10             background-color: #40E0D0;
11             float: left;
12         }
13         strong {
14             font-size: 50px;
15         }
16     </style>
17 </head>
18 <body>
19 <div class="box1"></div>
20 <strong>晨落梦公子</strong>
21 </body>
22 </html>

View Code

当不设置width或设置为auto时，背景会填充整行。如：

常用的块级元素：div，ul（无序列表），ol（有序列表），li（列表内容），p，dl（叙事式列表），h1~h6，hr（水平分隔符），table（表格）

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

内联元素：注意，内联元素不会独占一行。width和height对其不起作用。

如图：其中的strong元素没换行显示

代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>display元素</title>
 6     <style type="text/css">
 7         .box1{
 8             height: 50px;
 9             /* 300px;*/
10             width: auto;
11             background-color: #40E0D0;
12         }
13         strong {
14             font-size: 50px;
15         }
16         .inline1 {
17             background-color: #FF9912;
18         }
19         .inline2 {
20             background-color: #ff0000;
21         }
22     </style>
23 </head>
24 <body>
25 <!--<div class="box1"></div>-->
26 <strong class="inline1">晨落梦公子</strong><strong class="inline2">晨落梦公子</strong>
27 </body>
28 </html>

View Code

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

用display可以改变内联和块。

display：block 将内联转换成块

display：inline 将块装换成内联

display：inline-block 将容器转换为内联块，既可以设置width和height，又不会单独占一行

display：none 隐藏不占位 visiblility：hidden 隐藏但占位

把内联元素装换为块元素的3种方法

1、display:block

2、display:inline-block

3、float