css中display的属性解析

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

CSS中display属性决定了一个元素的显示方式。它有很多的取值,不同的取值具有不同的特性。其中常用的取值如下:display: none;//不显示,元素将被隐藏 display: block;/

CSS中display属性决定了一个元素的显示方式。它有很多的取值,不同的取值具有不同的特性。

其中常用的取值如下:

display: none;//不显示,元素将被隐藏
display: block;//块元素,独占一行,默认宽度为父元素的100%
display: inline;//行内元素,不会独占一行,默认宽度为内容的宽度
display: inline-block;//行内块元素,可以设置宽度和高度,但是不会独占一行
display: flex;//弹性盒子,在父容器中可以通过设置不同的属性来对子元素进行布局 

其中有一些取值需要特别说明:

none 和 block:none 值表示元素不显示,即完全隐藏。如果使用none值,那么它所占据的空间也将被释放;而block值表示该元素会独占一行,宽度默认为父元素的100%。

inline 和 inline-block:inline值表示该元素是行内元素,不会独占一行,宽度默认为内容的宽度。而inline-block值表示该元素是行内块元素,可以设置宽度和高度,但是不会独占一行。这两个值经常被用来解决一些布局上的问题。

flex:flex值是近些年CSS中比较流行的一个值,它可以让我们更加方便地进行布局。使用flex值需要在父容器中设置display:flex,然后可以通过设置一些属性,如:justify-content、align-items、flex-direction、flex-wrap等来对子元素进行布局。

总的来说,对于display属性的取值,我们需要根据实际情况进行选择,以达到我们所期望的布局效果。

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: css中display的属性解析

粉丝

0

关注

0

收藏

0

已有0次打赏