CSS —— display属性

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

HTML中标签元素大体被分为三种类型：块元素、行内元素和行内块元素

块元素 ：block

1.独占一行

2.水平方向，占满它父元素的可用空间（宽度是父级的100%）

3.垂直方向，占据的空间由其内容大小决定

4.可以通过 css 属性 width 、 height 设置该元素的宽和高（添加宽高都生效）

常见的block模式下的元素：

div
main
ul
li
p
address
article
aside
blockquote 
dd
dl
dt 
footer
form
h1 h2 h3 h4 h5 h6
header 
hr
nav
ol
pre
section
table

行内元素 ：inline

1.一行可以显示多个

只要 当前行有剩余空间可以容纳自身内容，就会显示在里面；如果没有剩余空间，才会移到下一行。

如果前面的兄弟元素是inline模式，往往会在同行显示

如果前面的兄弟元素是block模式，则会在不同行显示

2.宽度和高度默认由内容撑开

3.css 属性 width 、 height 不起作用（设置宽高不生效）

span
a
audio
b
br
button
canvas
em
embed
i
iframe
img
input
label
select
strong
svg
textarea
video

行内块元素：inline-block

1.一行可以显示多个

2.可以设置宽高

display：block；(将元素转换为块元素)

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

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

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

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

采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"

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

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

本文参考自：界面布局 - 基本规则 | 白月黑羽

                      display属性详解_display:block属性-CSDN博客

                      弹性布局（display:flex；）属性详解_弹性布局的属性有哪些-CSDN博客