inline、block、inline-block这三个属性值有什么区别
inline: 行内元素,元素不独占一行,不可以修改宽高
block: 块级元素,元素独占一行,可以修改宽高
inline-block: 行内块级元素,元素不独占一行,并且可以修改宽高
1
2
3
2
3
每个元素都两个盒子,外在盒子和内在盒子。外在盒子负责元素是可以一行显示,还是只能换行显示;内在盒子负责宽高、内容呈现什么的。
外在盒子-内在盒子
from 《css世界》
1
2
3
2
3
CSS显示模块分为内部显示类型和外部显示类型,内部显示类型是定义子元素如何参与内部布局,外部显示类型定义了父元素如何参与外部整个文档流的布局,所以
inline-> inline-inline
block-> block-block
inline-block-> inline-block
他们的区别是分两块的,也就是内外部显示类型,参与文档布局的内外区别。
1
2
3
4
5
6
2
3
4
5
6