---
title: 内联块元素类型及特性、元素转换
date:  2022-01-09 00:15:37 
tags: 
- CSS
categories: CSS
author: Anges黎梦
---
## 内联块元素

内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，

但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。

它们在布局中表现 的行为：

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

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

## display属性 

display属性是用来设置元素的类型及隐藏的，常用的属性有： 

1、none 元素隐藏且不占位置 

2、block 元素以块元素显示 

3、inline 元素以内联元素显示 

4、inline-block 元素以内联块元素显示 

内联块元素布局实例

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/html/pagenation.jpg)