HTML5中块级元素、行内元素和行内块元素都有什么如何转换、有何特点

块级元素、行内元素和行内块元素都有什么如何转换、有何特点

块级元素

常用的块级元素有:div , p , h1~h6 , ol , ul , dl , form , table , address …

特点:
每个块级元素都独占一行。
元素的宽度、高度、行高及顶部和底部边距可以设置。
元素宽度在不设置的情况下,和它父元素的宽度一致

行内元素

常用的行内元素有:span , br , a , em , b , i , strong …

特点:
和其它元素都在一行上。
元素的宽度、高度及顶部和顶部边距都不能设置。
元素的宽度就是它所包含的文字或图片的宽度,不可修改

行内块元素

常用的行内元素有:img , input , td

特点:
和其它元素都在一行上。
元素的宽度、高度、行高及顶部和底部边距可以设置。

三种元素之间的转换

变为块级元素(独占一行,可控):display: block;
变为行内元素(不会独占一行,不可控):display: inline;
变为行内块元素(可设置宽高,margin,padding):display: inline-block;

猜你喜欢

转载自blog.csdn.net/Web_chicken/article/details/108468238