块级元素：
首先说明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>
但当添加上浮动（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>
当不设置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>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
用display可以改变内联和块。
display：block 将内联转换成块
display：inline 将块装换成内联
display：inline-block 将容器转换为内联块，既可以设置width和height，又不会单独占一行
display：none 隐藏不占位 visiblility：hidden 隐藏但占位
把内联元素装换为块元素的3种方法
1、display:block
2、display:inline-block
3、float