css中display属性的介绍(附实例)

本篇文章给大家带来的内容是关于css中display属性的介绍(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

css定位属性Positioning

display: none

不再页面渲染元素

        css-test      .content {      display: none;    }    

这一段落不会被显示出来

立即学习“前端免费学习笔记(深入)”;

这个段落会被显示出来

当一个元素中的display属性是none时,浏览器不会渲染这个元素里的任何内容,不会占据浏览器窗口空间,但它存在与文档流当中。

display: block

块级元素

        css-test      

p元素默认是block块级元素

名扬银河企业建站源码2.0.2
名扬银河企业建站源码2.0.2

名扬银河企业建站系统,适用于无代码基础的新手,快速搭建企业网站,程序内置了多项实用功能及插件,能够便捷的对网站进行修改、调整、优化等方面进行操作。【部分功能介绍】1、产品管理发布企业产品信息,管理企业产品,自定义产品封面图,产品详情图、文、视频,产品扩展属性自定义等。2、案例管理系统发布企业成功案例,管理成功案例,自定义案例封面图,案例详情图、文、视频,案例扩展属性自定义等。3、资讯管理系统发布企

名扬银河企业建站源码2.0.2 0
查看详情 名扬银河企业建站源码2.0.2
div默认也是block块级元素

块级元素的特点:元素的内容会充满整行

display: inline

行内元素

        css-test      .content {      display: inline    }    
display属性为inline的元素被称为内连元素。
相邻元素也是inline属性时,如果内容不够撑开整行。相邻元素的内容会显示在它傍边,当窗口整行不够显示时,内容会换行显示。

display: inline-block

行内块级元素

        css-test      .content {      display: inline-block    }    
display属性为inline-block的元素被称为行内块级元素。
行内块级元素的特性是独占一行,内容不会撑开整行

display: list-item

列表属性

        css-test      .content {      display: list-item    }    
display属性为list-item时元素会作为列表显示
下班要买菜
回家要做饭

display: inherit

继承父级元素的属性

        css-test      .content {      display: inherit    }    
正常的span元素效果,内容不会撑开整行 继承父级属性的效果,父级的display属性值是block 继承后内容撑开整行

以上就是css中display属性的介绍(附实例)的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1612478.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
css实现文字溢出省略号的四种方法(附代码)
上一篇 2025年12月24日 02:59:29
纯CSS3实现页面loading加载动画效果(附代码)
下一篇 2025年12月24日 02:59:39

相关推荐

发表回复

登录后才能评论
关注微信