欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

块级元素 Vs 内联元素_html/css_WEB-ITnose

程序员文章站 2022-06-17 15:39:43
...
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(上标)