块级元素与行内元素的区别

一，含义及特点

行内元素(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 与 都会使得原先的行内元素变为块级元素。

温馨提示：文章素材来源于网络，版权归原作者所有！