css元素显示模式的转换

css元素显示模式的转换

特殊形况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另一种模式的特性。例，想要增加链接<a>的触发范围。（把<a>这个行内元素，转换为块级元素，就具有块级元素的特性，就可以设置宽度和高度）

例1: 将 行内元素 转换为 块级元素

		     <a href="#">周杰伦</a>
			 <a href="#">周杰伦</a>

			a {
				width: 150px;
				height: 50px;
				background-color: pink;
			}

效果：

因为 a 元素是行内元素，所以给他指定宽高是没有用的。此时，我们就需要把 a 元素转换为块级元素

display: block; 

效果：

例2：将 块级元素 转换为 行内元素

			<div>我是块级元素</div>
			<div>我是块级元素</div>

			div {
				width: 300px; 
				height: 100px; 
				background-color: pink;
				display: inline; 
			}

效果：

将块级元素转换为行内元素后 width 和 height 属性就都失效了。

例3：将 行内元素 转换为 行内块元素

			<span>行内元素转化为行内块元素</span>
			<span>行内元素转化为行内块元素</span>

			span {
				width: 300px;
				height: 50px;
				background-color: skyblue;
				display: inline-block;
			}

效果：
行内块元素：是块级元素，但可以在一行内显示。（只要是 块级元素 width 和 height 属性就是有用的。）