当前位置: 首页 > Web前端 > HTML

HTML元素分类总结

时间:2023-04-02 20:20:08 HTML

概述在HTML中,元素(同:“HTML标签”)有很多,可分为三类,即块级元素、内联元素(同:“行内元素”)、块级元素。内联元素(等同于:“内联块元素”)。这些要素你真的了解吗?下面我们来看看这三类元素的特点:块级元素1.特点1.每个块级元素从新的一行开始显示(块级元素独占一行)2.元素的宽度,高度、内边距(padding)、边框(border)、外边框(margin)可自由设置3、网页中块级元素所占的面积=内容区域(content)+内边距(padding)+border(border)+margin(margin)4.当块级元素本身没有设置宽度时,width=父元素的宽度-元素的左右外边距-元素的左右边框-元素的左右内边距5.当块级元素没有设置padding和border时,padding和border的值为06。当块级元素没有设置width和margin时,margin的值为0,宽度为100%(即与父元素的宽度相同)7.当设置了块级元素的宽度但没有设置margin时,取值左边距为08。设置块级元素的宽度,不设置padding和border,同时设置margin:0auto。外边距平分父元素的宽度-元素宽度的剩余空间9.块级内联元素不受父元素的line-height和自身vertical-align的影响2.转换的方法非块级元素转换为块级元素1.display:block2.float:leftorright3.position:absoluteorfixed4.当父元素使用display:flex时,子元素会变成块级元素3.常见的块级元素

,

,

...

,
    ,
      ,
      ,
      ,
      ,
      内联元素一、特点1.当父元素足够宽,可以容纳多个内联元素时,多个内联元素可以显示在一行中,否则内联不能放置的元素会另起一行(一行存放多个内联元素)2.内联元素的宽高被元素内容扩展3.里面设置width/height/padding-top/border-链接元素的顶部/边距顶部/边距底部无效4.如果没有设置padding/border/margin,都是05。行内元素受父元素的line-height和自身vertical-align的影响。2.将非行内元素转换为行内元素方法使用display:inline3.普通行内元素,,,,,块级行内元素1.特点1.当父元素足够宽,可以容纳多个块-levelinlineelements,multipleblock-levelinlineelementscanbedisplayinoneline块级内联元素,否则无法放置的块级内联元素将另起一行(一行存储多个块级内联元素)2.块级内联元素的宽度、高度、padding、边框(border)和外边框(margin)可以自由设置块级内联元素的宽度。如果不设置高度,会被元素的内容拉开。4.块级内联元素受父元素的line-height和自身vertical-align的影响2.使用display:inline-block将非内联元素转换为内联元素的方法3.常用内联元素关键词:web前端培训前端培训