老徐WEB：CSS块级元素和行内元素的区别

系统管理员 2023-07-03 02:47 4阅读 0赞

CSS包含块级元素、行内元素和行内块元素。HTML页面是由元素，也叫标签构成的。每个元素在HTML页面中生成一个包含内容的框，就是大家知道的”盒子“。不同的元素显示的方式不同，有的独自占据整个一行，除非使用float属性，否则其他元素不能与其共一行，这就是块级元素，比如div，h(1,2,3,4,5,6)，p元素等。有的元素水平挨着连续排放，直到一行放不下了，才换行，这就是行内元素，比如span，em，strong，i元素等。下面说一说CSS中块级元素、行内元素和行内块级元素的区别。

1.块级元素（block）  
块级元素独自占据整行，它有自己的宽度和高度，还可以自定义元素的width和height。一般作为容器，可容纳块级元素和行内元素。块级元素特点如下：  
\*每个块级元素独占一行，其后的元素只能另起一行。如果使用了float属性，则可以多个块级元素共处一行。  
\*块级元素的高度、宽度、行高和边距都可以设置。  
\*块级元素的宽度如果不设置的话，默认是其父元素的宽度。  
\*块级元素对应的属性是display:block。

2.行内元素（inline）  
行内元素可以水平挨着存放，多个行内元素共处一行，行内元素内一般不包含块级元素。行内元素特点如下：  
\*多个行内元素可以共享一行，水平挨着连续存放，直到一行放不下，才会换行。  
\*行内元素的高度、宽度、行高及边距不可设置。  
\*行内元素的宽度是其包含的文字或图片的宽度，不可改变。

3.行内块级元素（inline-block）  
行内块级元素既有块级元素的特点，又有行内元素的特点。它可以自由设置元素的高度和宽度，也可以在一行中存放多个行内块级元素。其特点如下：  
\*行内块级元素可以和其他行内元素或行内块级元素存放在同一行。  
\*行内块级元素的高度、宽度、行高和边距可以设置。

4.类型转换  
display:block ，定义元素为块级元素  
display:inline ，定义元素为行内元素  
display:inline-block，定义元素为行内块级元素。

想了解学习CSS选择器相关知识的，请查看[深入学习CSS选择器][CSS]这篇文章。

[CSS]: https://blog.csdn.net/uvyoaa/article/details/104124635