HTML布局元素的分类和应用场景

一、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布局元素的应用场景

• 内联元素：用于不指定高宽，高宽由内容指定
• 块状元素：用于指定高宽，标签占满一行
• 内敛块状元素：用于指定元素高宽，不占满一行