一、HTML布局元素的分类
1、内联元素
- span,a,b,strong,i,em,br,input,textarea 本身属性为 display:inline
- 和其他行内元素从左到右在一行显示,不可以直接控制高度、宽度等其它相关css属性,但是可以直接设置内外边距的左右值
- 宽高是由本身内容大小决定的(文字、图片等)
- 只能容纳文本或者其他行内元素,不能嵌套块级元素。
2、块状元素
- div,h1-h6,hr,menu,ol,li,dl,table,p,form 本身属性为 display:block
- 独占一行,每一个块级元素都会从新的一行重新开始,从上到下排布,可以直接控制宽度、高度等其它相关的css属性,例如padding系列、margin系列
- 在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度
- 在不设置高度的情况下,块级元素的宽度是它父级元素内容的高度。
3、内联块状元素
- 内联块状元素综合了前两种的特点,但又各有取舍
- 不能够自动换行
- 能够识别 width 和 height,line-height,padding,margin
- 默认排序方式是从左到右
二、HTML布局元素的应用场景
- 内联元素:用于不指定高宽,高宽由内容指定
- 块状元素:用于指定高宽,标签占满一行
- 内敛块状元素:用于指定元素高宽,不占满一行