什么是行内元素什么是块级元素元素转换行内元素转块级元素块级元素转行内元素

区别总结

element是指那些不会打断文本流在一行内显示的元素。

行内元素通常用于包裹文本或者在文本中嵌入其他标记或元素。

span用于为文本或一系列文本设置样式或添加标记。

a用于创建超链接。

strong用于表示强调的文本。

em用于表示强调并且带有斜体效果的文本。

img用于嵌入图片。

input用于创建输入框。

button用于创建按钮。

不会独占一行会在一行内显示。

宽度和高度由内容决定无法通过CSS设置固定的宽度和高度。

可以设置左右外边距margin和内边距padding但上下外边距和内边距不会影响其他元素的布局。

需要注意的是行内元素可以通过CSS的display属性设置为块级元素使其以块级元素的方式显示。

element是指那些会始终独占一行的元素即会从新的一行开始显示。

块级元素通常用于组织和布局页面内容的结构。

div用于组织和布局页面的块级内容。

p用于表示段落。

h1-h6用于表示标题。

ul和ol用于创建无序列表和有序列表。

li用于表示列表项。

table用于创建表格。

form用于创建表单。

独占一行会从新的一行开始显示。

可以设置宽度、高度、外边距和内边距。

默认情况下宽度会自动填满父容器的宽度。

可以包含其他块级元素和行内元素。

需要注意的是块级元素可以通过CSS的display属性设置为行内元素或者行内块元素使其以行内元素的方式显示。

元素转换

需要注意的是也可以通过CSS的display属性将行内元素转换为块级元素或将块级元素转换为行内元素。

如

行内元素转块级元素

可以看到1和2都转换为行内元素就在一行里了而3没有转换所以独自一行

区别一

行内元素不从新行开始只占用必要宽度和高度块级元素总是从新行开始并占用其父元素的可用的全部宽度。

区别二块级元素可能包含行内元素有时也包含其他块级元素行内元素只能包含数据和其他行内元素。

区别三行内元素设置内外边距不会影响其他元素块级元素设置内外边距会影响其他元素。

行内元素不从新行开始只占用必要宽度块级元素总是从新行开始并占用其父元素的可用的全部宽度。

块级元素可能包含行内元素有时也包含其他块级元素行内元素只能包含数据和其他行内元素。

a元素例外它可以包含块级元素例如div。

修改元素的display属性例如把display属性值从“inline”修改为“block”或者从“block”修改为“inline并不会改变元素的类别和内容模型。

例如即使把span元素的display属性修改为”block“它仍然属于行内元素并且不能内嵌div元素。