一.块级元素
1.1块级元素的特点
- 块级元素在html中独占一行,因为块级元素的自动填充其父元素的宽度。
- 块级元素可设置宽高,并且还能设置内外边距(设置了宽高,块级元素也是独占一行)
- 块级元素可包容其他块级元素,也可包容行内元素。(但是有一些块级元素不能包含其他块级元素,比如:p元素中不能其他块级元素。)
1.2 哪些是块级元素
当然块级元素不止这些,我这里是指明一些。
<p></p>
<div></div>
<h1></h1>
<ul></ul>
<li></li>
二.行内元素
2.1 行内元素的特点
- 行内元素不能设置宽高,但是设置外边距的话上下无效,左右有效,而内边距全部有效。
- 行内元素不能与其他行内元素可以处于同一行。
- 行内元素可以包含其他行内元素,但是不能包含块级元素。
2.2 行内元素有哪些
当然行内元素也不止这些,我这里是指明一些。
<strong></strong>
<span></span>
<em></em>
<label></label>
三. 块级元素与行内元素的区别
- 块级元素是独占一行,而行内元素是与其他行内元素可以处于同一行。
<p style="background-color:red;height: 50px"></p><!--块级元素,设置背景颜色为红色区分-->
<span style="background-color: green">12312</span><!--行内元素,设置背景颜色为绿色区分-->
<span style="background-color: orange">12312</span><!--行内元素,设置背景颜色为橙色区分-->
运行结果:
- 块级元素可以设置宽高,而行内元素不能设置宽高。
<p style="background-color:red;height: 50px;width: 100px"></p><!--块级元素,设置背景颜色为红色区分-->
<span style="background-color: green;height: 100px;width: 100px">2312312</span>
<!--行内元素,设置背景颜色为绿色区分-->
运行结果:
- 块级元素可以包含其他块级元素和行内元素,而行内元素只能包含其他行内元素。
<div style="background-color:red;height: 100px;width: 100px">
<span style="background-color: orange">12312312</span><!---行内元素-->
<p style="background-color: pink;width: 20px;height: 20px"></p><!--其他块级元素-->
</div><!--块级元素,设置背景颜色为红色区分-->
<span style="background-color: green;line-height: 100px"><strong>2312312</strong><!--其他行内元素-->
</span><!--行内元素,设置背景颜色为绿色区分-->
运行结果: