您的位置:首页 > 健康 > 养生 > CSS —— display属性

CSS —— display属性

2024/12/23 9:39:36 来源:https://blog.csdn.net/m0_73557953/article/details/142030935  浏览:    关键词: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博客

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com