我们发现div是独自占一行的,而多个span标签才占一行,这就是今天要讲的显示模式,就好比我们android中的是垂直还是竖直布局,
在css中元素可以分为 块级元素 行内元素 行内块元素
块级元素:每个块级元素会独自占一行或者多行,可以设置宽 高 对齐属性,常见的块元素有<h1>...<h6> ,<p>,<div>,<ul> <ol> <li>等,其中div是最常见的块级元素,其中块级元素的宽度是默认容器的宽度,还有一个特点就是块级元素内能嵌套其他行内元素
行内元素：也叫内联元素,不占有独立的区域,仅仅靠自身的字体大小和内容或者图像大小来决定高度和宽度,一般不可以设置宽度,高度,对齐属性,但是padding,marign是可以的,但是在垂直方向是无效的,常用于控制页面中文本样式，一般情况下行内元素只能放行内元素,不会放块级元素
常见的行内元素有：<a>,<b>,<strong>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>，其中<span>是最典型的行内元素.
注意：
1:<p>,<h1>...<h6>不能放其他块级元素
2:<a>不能放块级元素
行内块元素,也就是这个标签既有块元素特点也有行内元素特点,从这名字就可以看到出来,常见的行内块元素有
<image>,<input>,<td> 可以对其设置宽 高 对齐属性
行内块元素特点:
1:和相邻行内元素在一行上,但是元素之间有空隙
2:默认宽度就是内容的宽度
3:高度 行高 内边距 外边距 都可以控制
标签的显示模式是可以相互转换的 使用display
1:块转行内元素 display:inline
2:行转块级元素 display:block
3:块级元素 行内元素都可以转换成行内块元素 display:inline-block