详解cssdisplay属性中常见的四个属性值用法(代码实例)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了详解cssdisplay属性中常见的四个属性值用法(代码实例),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3483字,纯文字阅读大概需要5分钟。
内容图文
![详解cssdisplay属性中常见的四个属性值用法(代码实例)](/upload/InfoBanner/zyjiaocheng/412/2d7c20be389b494284956c4a03211071.jpg)
接下来我们就通过具体的代码实例来一一详解css display属性中最常见的属性值用法。
一:display :none,设置元素不会显示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css display:none</title> <style> * { padding: 0; margin: 0; list-style: none; } .demo{ width: 200px; height: 200px; margin:50px auto; } ul li { float: left; } span { width: 30px; height: 30px; color: #fff; background: red; margin: 5px; text-align: center; line-height: 30px; } .a1{ display: none; } </style> </head> <body> <div class="demo"> <p>数字2不会显示出来</p> <ul> <li> <span>1</span> </li> <li> <span class="a1">2</span> </li> <li> <span>3</span> </li> <li> <span>4</span> </li> <li> <span>5</span> </li> </ul> </div> </body> </html>
以上代码的效果图如下:
display :none,设置元素不会显示,而且会使元素现实的空间也不会保留下来。但有另外一个 visibility: hidden, 是保留元素的空间的。详细了解,看阅读 css visibility属性。
二:display:block, 将元素显示为块级元素
将元素显示为块级元素,元素前后会带有换行符。设置为block后,元素可以设置width和height了。元素独占一行。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css display:block</title> <style> * { padding: 0; margin: 0; list-style: none; } .demo{ width: 500px; height: 200px; margin:50px auto; } ul li { float: left; } span { display:block; width: 30px; height: 30px; color: #fff; background: red; margin: 5px; text-align: center; line-height: 30px; } </style> </head> <body> <div class="demo"> <p>span元素定义了宽与高,宽与高都显示为30px</p> <ul> <li> <span>1</span> </li> <li> <span>2</span> </li> <li> <span>3</span> </li> <li> <span>4</span> </li> <li> <span>5</span> </li> </ul> </div> </body> </html>
以上代码的效果图如下:
其中的span标签宽高都显示为30px。当我们把代码中的display:block去掉后,显示的效果图如下:
显然,当我们把display:block去掉后,span的高度、宽度无法设置了。
span 标签是内联元素,不可设置元素高度、宽度及上下左右的内外边距padding和margin,但当给 span 标签设置 display:block后,可以把内联元素转换为块状元素,这样就可以设置元素高度、宽度及上下左右的内外边距padding和margin。
三:display:inline,将元素显示为内联元素
display的默认属性。将元素显示为内联元素,元素前后没有换行符。我们知道内联元素是无法设置宽高的,所以一旦将元素的display 属性设为 inline, 设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度(font-size)和padding。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css display:block</title> <style> * { padding: 0; margin: 0; list-style: none; } .demo{ width: 1000px; height: 200px; margin:50px auto; } .demo p{ display:inline ; color: #0081EF; } .demo div{ display:inline ; color: #70DBDB; } </style> </head> <body> <div class="demo"> <p>p标签和div标签同为块状元素,本应无法在同一行显示;</p> <div>此时全为内联元素,不换行,在同一行显示。</div> </div> </body> </html>
以上代码的效果图如下:
四:inline-block,将元素显示为行内块元素
行内块元素。这个属性值融合了inline 和 block 的特性,可以结合inline 和 block来了解 inline-block,即是它既是内联元素,可以在同一行显示,又可以设置width和height。
以上就是本篇关于css display属性中常见属性值用法的具体介绍,其中包括none、block、inline、inline-block的具体使用示例。具有一定的参考价值,希望对有需要的朋友有所帮助!
以上就是详解css display属性中常见的四个属性值用法(代码实例)的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的详解cssdisplay属性中常见的四个属性值用法(代码实例)全部内容,希望文章能够帮你解决详解cssdisplay属性中常见的四个属性值用法(代码实例)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。