内联块元素类型及特性、元素转换

内联块元素

内联块元素,也叫行内块元素,是新增的元素类型,现有元素没有归于此类别的,img和input元素的行为类似这种元素,但是也归类于内联元素,我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为:

  • 支持全部样式
  • 如果没有设置宽高,宽高由内容决定
  • 盒子并在一行
  • 代码换行,盒子会产生间距
  • 子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式。

这三种元素,可以通过display属性来相互转化:

display属性

display属性是用来设置元素的类型及隐藏的,常用的属性有:
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示

内联块元素布局实例
课堂练习示例图片