css中display属性的值

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

在CSS中,display属性用于定义元素的渲染方式,它有多种可选取的值,不同的值会产生不同的显示效果。一、display: block.block { display: block; } 该属性值将

在CSS中,

display
属性用于定义元素的渲染方式,它有多种可选取的值,不同的值会产生不同的显示效果。

一、

display: block

.block {
  display: block;
} 

该属性值将元素转换为块级元素显示,即元素会在独立的行上显示,同时宽度会自动填满父容器。如下图所示:

Block

二、

display: inline

.inline {
  display: inline;
} 

该属性将元素转换为内联元素显示,即元素会在同一行内显示,同时宽高与元素内容一致,无法设置宽高,margin/padding只对左右有效,如下图所示:

Inline

三、

display: inline-block

.inline-block {
  display: inline-block;
} 

该属性将元素转换为内联块元素显示,即元素会在同一行内显示,同时可以通过设置宽高来控制尺寸,margin/padding对全部方向都有效,如下图所示:

Inline Block

四、

display: none

.none {
  display: none;
} 

该属性值将元素隐藏,即整个元素会被移除,不会占据页面空间,同时也无法通过HTML文档中的JavaScript访问,如下图所示:

None

以上就是常用的几种display属性值的介绍,它们可以根据实际需求来选择,让元素呈现出理想的布局和样式。

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: css中display属性的值

粉丝

0

关注

0

收藏

0

已有0次打赏