块级元素：
首先说明display是块级元素，会单独站一行，如
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display元素</title>
<style type="text/css">
.box1{
height: 50px;
width: 300px;
background-color: #40E0D0;
}
strong {
font-size: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<strong>晨落梦公子</strong>
</body>
</html>
但当添加上浮动（float）后，则为：（会换行）
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display元素</title>
<style type="text/css">
.box1{
height: 50px;
width: 300px;
background-color: #40E0D0;
float: left;
}
strong {
font-size: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<strong>晨落梦公子</strong>
</body>
</html>
当不设置width或设置为auto时，背景会填充整行。如：
常用的块级元素：div，ul（无序列表），ol（有序列表），li（列表内容），p，dl（叙事式列表），h1~h6，hr（水平分隔符），table（表格）
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
内联元素：注意，内联元素不会独占一行。width和height对其不起作用。
如图：其中的strong元素没换行显示
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display元素</title>
<style type="text/css">
.box1{
height: 50px;
/*width: 300px;*/
width: auto;
background-color: #40E0D0;
}
strong {
font-size: 50px;
}
.inline1 {
background-color: #FF9912;
}
.inline2 {
background-color: #ff0000;
}
</style>
</head>
<body>
<!--<div class="box1"></div>-->
<strong class="inline1">晨落梦公子</strong><strong class="inline2">晨落梦公子</strong>
</body>
</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