块级元素 Vs 内联元素_html/css_WEB-ITnose
程序员文章站
2022-06-03 21:28:32
...
HTML的元素可以分为两种: 块级元素(block level element ) 内联元素(inline element ) 二者的区别如下:
1. 块级元素独占一行(除非显示修改元素的display属性),内联元素在一行内显示;
2. 块级元素可以设置width、height属性,而内联元素设置这些属性无效;
3. 块级元素的默认width为100%,而内联元素的的width是根据其内容或子元素确定的。
二者的相互转化:
块级元素??>内联元素:display:inline; 内联元素??>块级元素:display:block;
介于二者之间的状态:
设置display:inline-block;属性,使元素对外表现为行内元素,在一行内显示;对内表现为块级元素,能设置width、height属性。
常见的块级元素和行内元素
块级元素:div p h1 h2 h3 h4 h5 h6 dl ul ol li table hr(水平分割线)
内联元素:a img span input(输入框) select(项目选择) textarea(多行文本输入框) sub(下标) sup(上标)
上一篇: 前后端联调
推荐阅读
-
HTML行类元素与块级元素_html/css_WEB-ITnose
-
水平居中--行内元素、定宽块、不定宽块_html/css_WEB-ITnose
-
HTML5的结构和语义——语义性的块级元素(三)
-
探讨行内元素转换为块级元素_html/css_WEB-ITnose
-
HTML行类元素与块级元素_html/css_WEB-ITnose
-
html块级元素和行内元素_html/css_WEB-ITnose
-
【HTML基础】*元素、块元素、内联元素、可变元素、元素属性_html/css_WEB-ITnose
-
移除行块级元素之间的空格(译文)_html/css_WEB-ITnose
-
CSS/块级元素与内联元素的深入理解_html/css_WEB-ITnose
-
如何做出图中的效果?(块级元素浮动对齐)_html/css_WEB-ITnose