一. 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
等。
(以上存有个人意见以及学习的知识存在错误希望提出共同成长)