[分享]css中display属性的值

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

在CSS中，

display

一、

display: block

.block {
  display: block;
} 

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

Block

二、

display: inline

.inline {
  display: inline;
} 

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

三、

display: inline-block

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

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

四、

display: none

.none {
  display: none;
} 

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

None

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