CSS中的块级元素与行级元素
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS中的块级元素与⾏级元素
最近初学CSS时对块级元素与⾏级元素有时会产⽣混淆，写篇博客记录⼀下⾃⼰对其的理解。
先从概念上来看：
块级元素
特点：1.每个块级元素都是独⾃占⼀⾏，其后的元素也只能另起⼀⾏，并不能两个元素共⽤⼀⾏。
2.元素的⾼度、宽度、⾏⾼和顶底边距都是可以设置的。
3.元素的宽度如果不设置的话，默认为⽗元素的宽度。
常见的块级元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
⾏级元素
特点：1.可以和其他元素处于⼀⾏，不⽤必须另起⼀⾏。
2.元素的⾼度、宽度及顶部和底部边距不可设置。
3.元素的宽度就是它包含的⽂字、图⽚的宽度，不可改变。
说了半天的概念举个例⼦说明⼀下：
<html>
<head>
<title>区别</title>
<style type="text/css">
.div1{
background-color: red;
}
.span1{
background-color: yellow;
}
</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将⾏级元素设为块级元素
代码⽰例如下：
<html>
<head>
<title></title>
<style type="text/css">
.div1{
background-color: red;
display: inline;;
}
.span1{
background-color: yellow;
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将元素设置为⾏级-块级元素。