在页面的布局中元素是构建起整个页面的“材料”,元素又分有块级元素与行内元素两种
看似简单的,但是如果不搞清楚在布局中出现了问题是很难找到问题所在的,比如设置了一块有宽高有背景颜色的区域,结果在页面发现什么也没有,或者在里面填充了文本却只有背景颜色,大小无法达到预期的结果。浏览器不会报错,因为本来就没有打错,只是用的不对而已。
行内元素和其他行内元素都会在一条水平线上排列,都是在同一行显示的;块级元素总是会在新的一行开始排列,每个块级元素都会占一行,垂直向下排列,如果想让他们水平方向排序,可以用浮动让其水平方向排列。而且行内元素不能设置宽高,宽高的大小只能由内容物撑开,如果没有内容在里面那么元素的宽高都是零,在页面上看不见,但块级元素可以可以设置宽高,就算没有内容也可以在页面上显示出来
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标签继承了本身行内元素的同行显示又有了块级元素的宽高属性。
通过这些知识可以让页面的布局变得更加方便,也能避免一些必要标签的使用达不到效果了。