[2021-02-07 更新 ] 请说明HTML布局元素的分类有哪些？并描述每种布局元素的应用场景

[jeddygong]

一、分类

1、内联元素

• span, a, b, strong, i, em, br , inut , textarea 本身属性为display: inline
• 和其他行内元素从左到右在一行显示,不可以直接控制宽度、高度等其他相关css属性，但是可以直接设置内外边距的左右值
• 宽高是由本身内容大小决定的(文字、图片等)
• 只能容纳文本或者其他行内元素，不能嵌套块级元素

2、块状元素

• div, h1-h6, hr , menu,ol,ul, li,dl, table,p, from 本身属性为display:block ;
• 独占一行，每一个块级元素都会从新的一行重新开始，从. 上到下排布可以直接控制宽度、高度等其他相关css属性，例如(padding系列，margin系列)
• 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
• 在不设置高度的情况下，块级元素的高度是它本身内容的高度

3、内联块状元素

• 内联块状元素综合了前两种的特性却又各有取舍。

• 不自动换行能够识别width 和 height，line-height ，padding，marign

  默认排列方式为从左到右

二、应用场景

• 内联元素: 用于不指定宽高，宽高由内容指定;

• 块状元素: 用于指定宽高，标签占满一行;

• 内联块状元素: 用于指定元素宽高，不占满一行