当前位置:Gxlcms > 前端框架 > css中display如何使用

css中display如何使用

时间:2021-07-01 10:21:17 帮助过:47人阅读

display常用的属性值为块级block,行级inline,行块级inline-block,none,并且行级或者块级标签可以通过display进行转换

本文将分享CSS中display属性,具有一定的参考价值,希望对大家有所帮助

我们一般在CSS布局制作时候,常常会用到display属性中的值block、none、inline,inline-block那么今天我们来学习如何使用它们

display属性

display属性可以有多个值,但常常用到的如下所示

none:此元素不会被显示。

block:此元素将显示为块级元素,此元素前后会带有换行符。

inline:此元素会被显示为内联元素,元素前后没有换行符。

inline-block:行内块元素,既有块级属性又有行级属性。

所以在这篇文章中,我将详细介绍block,inline,inline-block以及none,这些常用的属性值

display:block

特点:独自占用一行,可以通过 CSS 改变宽高

常用的块级元素:div,p,ul,li,ol,form,address

display:inline

特点:内容决定大小, 不可以通过 CSS 改变宽高

常用的行级元素: span,strong,em,a,del

  1. <style>
  2. div{
  3. background-color: pink;
  4. }
  5. span{
  6. background-color: yellow;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <div>123</div>//块级元素
  12. <p><span class="span">hello</span>world</p>//行级元素

如上图所示可以看出block元素占据了一行的全宽,想当与width:100%,下面的内容要以新行开始

而行级元素就是只显示自己那部分的内容,并不占用一行

效果图

Image 13.jpg

行块级元素转换

(1)块级元素转行级元素

给块级元素设置display:inline

结果就成这样

Image 15.jpg

(2)行级元素转换成块级

给行级元素设置display:block

结果如下

Image 16.jpg

display:inline-block

常见的行内块元素:img、input

特点: 内容决定大小,可以改变宽高

  1. <style>
  2. span{
  3. background-color: yellow;
  4. display:inline-block;//设置行块级元素
  5. width:100px;
  6. height:30px;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <p><span class="span">hello</span>world</p>

效果图

Image 17.jpg

display:none与visibility:hidden区别

display:none用来隐藏元素,不仅看不见还不占用任何空间大小

visibility: hidden也可以用来隐藏元素,但是虽然看不见仍存在,保留一个空位


display:none

  1. .span{
  2. background-color: aquamarine;
  3. display:none;}
  4. </style>
  5. </head>
  6. <body>
  7. <p><span class="span">hello</span>world</p>

效果图

Image 12.jpg

hello被隐藏但是并没有留下任何空位

visibility: hidden

  1. <style>
  2. .span{
  3. background-color: pink;
  4. visibility: hidden;}
  5. </style>
  6. </head>
  7. <body>
  8. <p><span class="span">hello</span>world</p>

效果图

Image 11.jpg

hello被隐藏但仍然空出一个位置

总结:以上就是本文章的全部内容了,希望对大家学习display有一定的帮助

以上就是css中display如何使用的详细内容,更多请关注Gxlcms其它相关文章!

人气教程排行