39 lines
1.1 KiB
Markdown
39 lines
1.1 KiB
Markdown
---
|
||
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 元素以内联块元素显示
|
||
|
||
内联块元素布局实例
|
||
|
||
|