用于指定一个元素在页面中的显示方式
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博客