display属性详解

一. display的定义和属性值

display属性用于指定一个元素在页面中的显示方式

display:block(将元素转换为块元素)

display：inline;（将元素转换为行内元素）

display：inline-block;（将元素转换为行内块元素）

display：none;（元素将被隐藏）

display:flex；（将元素作为弹性盒子显示）

display:grid；（将元素作为网格容器显示）

display:table；（将元素作为表格显示）

display简单应用在元素类型的转换，首先我们要理解三种元素类型。

二. 什么是块元素，行内元素，行内块元素

HTML中标签元素大体被分为三种不同的类型：块元素、行内元素和行内块元素，各自具有不同的特点以及用途。

元素分类	英文	举例	独占一行	默认宽度	设置宽高
块元素	block	div、hn、p	是	父元素宽度100%	可以
行内元素	inline	span、a	否	由里面内容撑开	不可以
行内块元素	inline-block	img、input	否	由其内容撑开	可以

三. display常用属性值

display常用于改变元素的显示方式来实现不同的布局和排版效果

用于三种类型之间的转换：

1. 块元素转换为行内元素

display:inline

p标签是最常见的块元素之一

有时候我们想要让他们在同一行，就可以将其转换成行内元素或行内块元素

2. 行内元素转换成块元素

display：block;

a标签是常见的行内元素，将其转换成块元素或者行内块元素可以更好的进行页面布局

3.将行内块元素转换成行内块元素

display：inline-block;

span标签是行内标签用来表示行内文本的一部分，和p标签一样都是用来显示文本内容的

4.隐藏元素

display:none;

可以将元素进行隐藏，元素不会显示出来

使用后的样式：

以上是一些基础的display样式转换

四. display：flex（弹性盒子）

弹性盒子也是一种常用的布局方式，可以更加灵活方便的进行布局。

弹性盒子布局通过在容器上应用 display: flex 属性来启用。容器内的子元素（即弹性项目）可以通过设置各种属性来控制它们的大小、顺序、对齐方式等。一些常用的属性包括 flex-direction 、 justify-content 、 align-items 、 flex-wrap 等。

（以上存有个人意见以及学习的知识存在错误希望提出共同成长）