html中display标签的用法
是最常见的HTML标签,它是一个典型的块级元素。它的内容会独立占领至少一行,哪怕内部只有一个字符。
在HTML5时代,为了追求标签语义化,制定了新的类似
的标签,比如
,
display:inline-block,block,inline元素的区别:
display:block将元素显示为块级元素,从而可以更好地操控元素的宽高,以及内外边距,每一个块级元素都是从新的一行开始。
display : inline将元素显示为行内元素,高度,行高以及底边距不可改变,高度就是内容文字或者图片的宽度,不可以改变。多个相邻的行内元素排在同一行里,知道页面一行排列不下,才会换新的一行。
display:inline-block看上去值名inline-block是一个混合产物,实际上确是如此,将元素显示为行内块状元素,设置该属性后,其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block,使其既有block的宽度高度特性,又有inline的同行特性,在同一行内有不同高度内容的元素时,通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。
行内标签:不能设置宽度 高度 padding margin,标签不能自动伸展。可以通过display灵活的将标签在行内和行间随意转换;display:inline;转换成行内标签display:block;转换成块级标签。
display:inline-block;即有行内标签的属性也有块极标签的属性,display:none;让标签消失,可以做很多功能,调用js。当行间内联标签需要设置宽度高度或padding margin时就要把display设置成inline-block;
举报/反馈