一 . 先说说二者的本质区别吧:
行级元素是可以和其他元素处于一行,不用必须另起一行。块级元素是每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行。
二 .下面看看各自的特点:
块级元素
1.元素的高度、宽度、行高和顶底边距都是可以设置的。
2.元素的宽度如果不设置的话,默认为父元素的宽度。
3.块级元素即使设置了宽度,仍然是独占一行。
常见块级元素:address、blockquote、center、dir、div、dl、ul、ol、li、fieldset、form、form、*hn、hr、menu、noframes、frames、noscript、p、 pre、table等。
行级元素
1.元素的高度、宽度及顶部和底部边距不可设置。
2.元素的宽度就是它包含的文字、图片的宽度,不可改变。
常见行级元素:a、abbr、acronym、b、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、samp、select、small、span、s、del、strike、strong、sub、sup、textarea、tt、u、var等。
纸上得来终觉浅,下面举个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>区别</title>
<style type="text/css">
.div1{ background-color: blue;
color: #fff;
} .span1{ background-color: red;
color: #fff;
} </style> </head>
<body>
<div class="div1">我是块级元素1</div>
<div class="div1">我是块级元素2</div>
<span class="span1">我是行级元素1</span>
<span class="span1">我是行级元素2</span>
</body>
</html>
结果如下:
三. 二者的转换
可以在css样式中用display:inline将块级元素设为行级元素
同样,也可以用display:block将行级元素设为块级元素
代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
background-color: blue;
color: #fff;
display:inline; }
.span1{ background-color: red;
color:#fff;
display: block;
} </style> </head>
<body>
<div class="div1">我是块级元素1</div>
<div class="div1">我是块级元素2</div>
<span class="span1">我是行级元素1</span>
<span class="span1">我是行级元素2</span>
</body>
</html>
得到结果如图:
四. 行级—块级元素
如果又想设置高度、宽度、行高以及顶和底边距,又想元素处于一行,该怎么办呢?
此时就可以用 display:inline-block;行内块元素,既具有block的宽度高度特性又具有inline的同行特性。