HTML元素类型和类型的转换

HTML元素分为:块状元素和内联元素

块元素:(block)

1.默认独占一行

2.没有宽度时,默认撑满一排

3.可以定义元素的宽和高

常见的块状元素有div,ul,li,h1-h6,ol

内联,行内元(inline)

1.多个内联元素可以同一行显示

2.高和宽由内容撑开

3.不支持宽高

4.不支持上下的margin值

常见的内联元素有:a,br,strong,em,span,

在这两张元素之外还有,img,input,等被称为行内块元素

他们区别一般inline元素

如img/input/select/button等有内在尺寸且可以设置width/height属性的这类元素

上面说了html的元素类型,现在说一下怎么把元素转换

display属性和属性值

display有十八个属性,我们说一下它常用的几个

display:block/inline/inline-block/none/list-item

display:block:块状显示,使类型变为块状元素

display:inline内联显示,使类型变为内联元素

display:inline-block行内元素显示

(1)元素的内容以块状显示,并且与其它元素显示在一行

(2)支持宽高,没有宽度的时候由内容撑开

(3)只要这一个元素类型支持vertical-align(img,input)

display:none:将元素隐藏,不会显示,并不占空间

display:list-item:将元素转成列表,li的默认display类型,当元素设置了float属性后,

就相当于给元素加了,display:block,且宽度为撑出来的内容

 

posted @ 2020-02-27 13:03  我有头盔  阅读(1093)  评论(0编辑  收藏  举报