CSS的显示模式：
html中一共有三种显示模式
1. 块级元素：独占一行，默认宽度为父元素的100%,可以设置宽高
例如div,p,ul,ol,li,h1-h6
2、行内元素：不独占一行，默认宽度为内容的宽度，不能设置宽高
例如span,a,strong,em,i
3、行内块元素：不独占一行，可以设置宽高
例如img,input,textarea,select,button
设置CSS样式中的display可以改变当前的HTML标签的显示模式
/* display：设置显示模式 */
/* display: none; 相当于隐藏 */
/* display: block; 相当于设置块级元素 */
/* display: inline; 相当于设置行内元素 */
/* display: inline-block; 相当于设置行内块元素 */
样例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>显示模式</title><!-- 显示模式html中一共有三种显示模式1. 块级元素：独占一行，默认宽度为父元素的100%,可以设置宽高例如div,p,ul,ol,li,h1-h62、行内元素：不独占一行，默认宽度为内容的宽度，不能设置宽高例如span,a,strong,em,i3、行内块元素：不独占一行，可以设置宽高例如img,input,textarea,select,button --><style>css">div{background-color: red;width: 100px;height: 100px;/* display：设置显示模式 *//* display: none; 相当于隐藏 *//* display: block; 相当于设置块级元素 *//* display: inline; 相当于设置行内元素 *//* display: inline-block; 相当于设置行内块元素 */}span{background-color: blue;}img{width: 100px;height: 100px;}</style>
</head>
<body><!-- 1.块级元素 -->div前<div>div</div>div后<br><br><!-- 2.行内元素 -->span前<span>span</span>span后<br><br><!-- 3.行内块元素 -->img前<img src="../img/1.jpg" alt="">img后
</body>
</html>
