css中display三个取值

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

CSS中的display属性是用来定义元素显示方式的,可以对一个元素进行显示和隐藏操作,同时也能够控制元素的布局方式。display属性有三个常用的取值: display: block; displa

CSS中的display属性是用来定义元素显示方式的,可以对一个元素进行显示和隐藏操作,同时也能够控制元素的布局方式。display属性有三个常用的取值:

 display: block;
    display: inline;
    display: none; 

block和inline是最常见的两个取值。

当元素使用display:block;时,元素会以块级元素的形式展示出来。它会有一个完整的表示区域,也就是说它会占满整个父级容器所能给出的宽度。

当元素使用display:inline;时,元素会以行内元素的形式展示出来。它不会有一个完整的表示区域,也就是说它只会占据需要的宽度。换而言之,它会在一行内和其他元素横向排列。

那么,如果我们想要实现类似于菜单的效果时,就会使用inline-block了。

 display: inline-block; 

它是以上两种属性的结合,具有行内元素的特性,同时也享有块级元素的特性,这就意味着它可以在一行内排列,同时也允许设置宽高。

最后一个取值是none。

当元素使用display:none;时,元素将不会被显示出来。这个属性对于我们动态控制元素显示和隐藏是非常有用的。

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: css中display三个取值

粉丝

0

关注

0

收藏

0

已有0次打赏