css中display有哪些值

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中的display属性用于设置元素的显示方式。常用的display值有以下几种:p { display: block; } 1. blockblock元素是一个块级元素,占据一整行空间,能够设置

CSS中的display属性用于设置元素的显示方式。常用的display值有以下几种:

p {
  display: block;
} 

1. block

block元素是一个块级元素,占据一整行空间,能够设置宽度、高度、边距和内边距等等。一般用于布局和排版,如段落、标题、div容器等。

img {
  display: inline;
} 

2. inline

inline元素是一个行内元素,不会占据一整行空间,宽度和高度会随着内容变化,只能设置水平方向的边距和内边距。一般用于小部件、文本片段、超链接等。

span {
  display: inline-block;
} 

3. inline-block

inline-block元素既有块级元素的特性又有行内元素的特性,可以设置宽度和高度,同时又不会占据一整行空间。一般用于图文混排、表单元素、按钮等。

div {
  display: none;
} 

4. none

none元素是一个隐藏元素,不会在页面上显示,也不会占据任何空间。一般用于实现动态显示和隐藏的效果,如弹窗、模态框、下拉列表等。

ul {
  display: flex;
} 

5. flex

flex元素是弹性布局的一种,可以设置父元素和子元素的布局方式,如水平排列、垂直排列、自适应排列等等。一般用于实现复杂的布局需求,如导航栏、网格系统、购物车等。

除了以上常用的display值,还有一些值在特定情况下会使用,如table、list-item、table-cell等等,具体可查看CSS规范文档。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中display有哪些值

粉丝

0

关注

0

收藏

0

已有0次打赏