一、分类
#### 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
默认排列方式为从左到右
二、应用场景
-
内联元素: 用于不指定宽高,宽高由内容指定;
-
块状元素: 用于指定宽高,标签占满一行;
-
内联块状元素: 用于指定元素宽高,不占满一行