行内元素和块级元素的区别与转换

在页面的布局中元素是构建起整个页面的“材料”，元素又分有块级元素与行内元素两种
看似简单的，但是如果不搞清楚在布局中出现了问题是很难找到问题所在的，比如设置了一块有宽高有背景颜色的区域，结果在页面发现什么也没有，或者在里面填充了文本却只有背景颜色，大小无法达到预期的结果。浏览器不会报错，因为本来就没有打错，只是用的不对而已。

行内元素和其他行内元素都会在一条水平线上排列，都是在同一行显示的；块级元素总是会在新的一行开始排列，每个块级元素都会占一行，垂直向下排列，如果想让他们水平方向排序，可以用浮动让其水平方向排列。而且行内元素不能设置宽高，宽高的大小只能由内容物撑开，如果没有内容在里面那么元素的宽高都是零，在页面上看不见，但块级元素可以可以设置宽高，就算没有内容也可以在页面上显示出来

HTML部分：

<i class="red">行1</i><i class="blur">行2</i>
<div class="one">块1</div>
<div class="tow">块2</div>

CSS部分：

.one . tow {
		width: 20px;
		height: 20px;
        text-align: center;
}
. one{
    background: #28A427;
    color: #E7C7C8;
}
.tow{
	background:#4C36D9;
	color: #C0C97D;
}
i{
	width: 60px;//在没有转换成块级元素或行内的块级元素时，宽高是无用的
	height: 40px;
	text-align: center;
	line-height: 40px;
}
.red{
	color: #FF0004;
	background: #eee;
}
.blur{
	color: #0015FD;
	background: #aaa;
}

效果如下：

行内元素的大小跟文字的大小一样，设置的宽高并没有起作用，两个i标签同行显示
块级元素也是如期的效果
块级元素和行内元素之间还可以互相转换，通过display属性进行转换，
不但可以转换还可以将二者的属性合并，让元素既拥有块级元素的属性又拥有行内元素的属性
display的属性有多个，只有3是用来进行转换的
如下：

display: block;//转换为块级元素
display:inline;//转换为行内元素
display:inline-block;//转换为行内块级元素

再看看把行内元素转换为行内块级元素的效果吧

可以看到转换为行内块级元素后i标签继承了本身行内元素的同行显示又有了块级元素的宽高属性。
通过这些知识可以让页面的布局变得更加方便，也能避免一些必要标签的使用达不到效果了。