一，含义及特点
行内元素(inline element)——也叫做内联元素，只占据它对应标签的边框所包含的空间。
特点——
- 和其他元素都在同一行；
- 高、行高及外边距和内边距不可改变；
- 宽度就是它的文字和图片的宽度，不可改变；
- 内联元素只能容纳文本或者其他内联元素。
块级元素(block element)——块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。
特点——
- 总是在新行上开始；
- 高度、行高以及外边距和内边距都可控制；
- 宽度默认是它容器的100%，除非设定一个宽度；
- 块级元素可以容纳内联元素和其他块级元素。
行内块状元素(inline-block element)——综合了行内元素和块状元素的特性，但是各有取舍。
特点——
- 不自动换行
- 能够识别宽高
- 默认排列方式为从左到右
二，区别
行内元素与其他元素在同一行；块级元素独占一行。
行内元素，只能容纳文本或其他内联元素；块级元素，能容纳其他块级元素或者内联元素。
行内元素中宽度(width)、高度(height)、内边距(padding)、外边距(margin)不可改变； 块级元素中宽度、高度、内边距、外边距可以设置。
顺便给大家推荐一个裙，它的前面是 537，中间是631，最后就是 707。想要学习前端的小伙伴可以加入我们一起学习，互相帮助。群里每天晚上都有大神免费直播上课，如果不是想学习的小伙伴就不要加啦。
三，常见的行内元素和块级元素
常见的行内元素——
a
span
img
input
select
strong
常见的块级元素——
div
p
ul
ol
li
h1~h6
form
table
四，行内元素和块级元素之间的转换
diplay
块级元素默认display:block; 行内元素默认为display:inline; 行内块元素默认为display:inline-block;
display:none; 不显示该元素，也不会保留该元素原先占有的文档流位置；
display:block; 转换为块级元素；
display:inline; 转换为行内元素；
display:inline-block; 转换为行内块级元素。
float
当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。
position
当为行内元素进行定位时，position:absolute 与 都会使得原先的行内元素变为块级元素。
温馨提示：文章素材来源于网络，版权归原作者所有！
