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)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 02:59:29
下一篇 2025年12月24日 02:59:39

相关推荐

  • css实现文字溢出省略号的四种方法(附代码)

    本篇文章给大家带来的内容是关于css实现文字溢出省略号的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在项目中有涉及实现一行或者第几行后加省略号,在实现第几行后加省略号的时候,使用的是-webkit-line-clamp、-webkit-box-orient属性…

    2025年12月24日
    000
  • web前端中常用的封装方法介绍(代码示例)

    本篇文章给大家带来的内容是关于web前端中常用的封装方法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1、放大镜 //页面加载完毕后执行window.onload = function () {var oDemo = document.getElementById…

    2025年12月24日
    000
  • css专业术语有哪些?css专业术语介绍

    本篇文章给大家带来的内容是关于css专业术语有哪些?css专业术语介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1. 属性 如height、color等,称作css的属性。 2. 值 在css中,如:10px, 50%, #ccc等这些都称作css的值。比较常见的类型值有:整…

    好文分享 2025年12月24日
    000
  • CSS堆叠上下文是什么?有什么作用?

    本篇文章给大家带来的内容是关于css堆叠上下文是什么?有什么作用?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 CSS 堆叠上下文是啥? 我们有一个基本样式的div,样式如下: div{ width: 200px; height: 200px; border:10px solid …

    2025年12月24日 好文分享
    000
  • CSS如何实现反方向圆角?(代码)

    本篇文章给大家带来的内容是关于css如何实现反方向圆角?(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 原理 父级元素 relative,子元素 absolute,然后通过top、left、right、bottom来设置具体出现位置。 DOM结构 CSS样式 .wrappe…

    2025年12月24日
    000
  • css改变单选框颜色的方法实现(附代码)

    本篇文章给大家带来的内容是关于css改变单选框颜色的方法实现(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 是否曾经被业务提出”能改改这个单选框的颜色吧!让它和主题颜色搭配一下吧!”,然后苦于原生不支持换颜色,最后被迫自己手撸一个凑合使用。若抛开i…

    2025年12月24日
    000
  • css如何实现图片大于div时的居中显示(代码实例)

    本文给大家介绍css如何实现图片大于div时的居中显示(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 当图片大于p时,想要图片居中显示,如果图片等比例缩小可能会导致图片不能填充整个p,如果直接将图片不设置宽高,将其外层p设置overflow:hidden;这时即使外层…

    好文分享 2025年12月24日
    000
  • CSS长度单位之em介绍

    本文给大家带来css长度单位之em介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 一、为什么使用em em也是css中的一种单位,和px类似。很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦。 em主要是应用于弹性布局,下面给出一个小栗子说明…

    2025年12月24日 好文分享
    000
  • CSS什么是图标字体(IconFont)?有什么用?

    本篇主要介绍一种非常好用的图标大法——图标字体(iconfont)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标。 网站上经常会用到各种图标,之前网页上使用图标主要采用精灵图(背景位…

    2025年12月24日 好文分享
    000
  • CSS如何实现滚动的图片栏(代码实例)

    本文给大家介绍css如何实现滚动的图片栏(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 在一些网站上可以经常看到有一些图片进行持续不断的滚动,这个效果可以通过css的动画效果来实现。具体效果如下 主要原理是通过动画向左移动。 首先给出两组一样的图片(同一行上),让整体…

    2025年12月24日
    000
  • CSS如何设置背景属性(详解)

    本文给大家详解css如何设置背景属性,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 背景相关属性主要有: background-color  背景颜色  background-image 背景图片 background-repeat 是否平铺 repeat (默认平铺) | re…

    好文分享 2025年12月24日
    000
  • css如何设置颜色值?rgb()设置颜色(代码实例)

    css如何设置颜色值?本篇文章就给介绍在css中如何用rgb()来设置颜色,让大家可以了解rgb()设置颜色的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 首先我们来了解一下rgb是什么意思? RGB:一种色彩模式 ,是工业界一种颜色标准;可以通过对红(R)、绿(G)、蓝(…

    2025年12月24日
    000
  • 如何使用纯CSS实现热气球的效果(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现热气球的效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom,容器中…

    2025年12月24日
    000
  • css如何对文本进行修饰?css修饰文本样式的9种属性(总结)

    css如何对文本进行修饰?本篇文章就给大家总结了css修饰文本文字的一些方法,介绍一些css 修饰文本的属性,让大家了解css修饰文本文字的9种属性有哪些。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 1、css设置文本文字颜色的属性 color属性:设置文本文字颜色。用法如下:…

    好文分享 2025年12月24日
    000
  • 如何利用css的background绘制图形 (附代码)

    本篇文章给大家带来的内容是关于如何利用css的background绘制图形 (附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 相信大家在平时工作中少不了会被要求在某些元添加一些特殊的背景图片,这时候通常就拿起ps就是切切切。不说这种方式麻烦,有ui给你切好的情况已经不错,没…

    2025年12月24日 好文分享
    000
  • 详解CSS pointer-events属性的使用

    这篇文章主要介绍了css pointer-events属性的使用,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 在前端的开发中,我们都是直接与用户接触,应该尽量让用户感到操作畅快愉悦,获得类似native的感觉。其中动画是最常用的方法。 这里的需求是,弹层的设计,这个弹层希望可以…

    2025年12月24日
    000
  • css实现酷炫的右侧悬浮菜单栏效果(代码实例)

    本文给大家介绍css如何实现酷炫的右侧悬浮菜单栏效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 默认显示效果: 鼠标悬浮效果:   HTML、JS代码如下: 立即学习“前端免费学习笔记(深入)”; *{margin:0;padding:0;} body{ color:#333…

    2025年12月24日
    000
  • PC端移动端不同屏幕大小下响应式布局

    本文给大家介绍pc端移动端不同屏幕大小下响应式布局,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 先上效果图: PC端效果: 移动端效果: 代码如下: 响应式布局1234 pc.css  样式代码: *{margin:0;padding:0;}ul{width:calc(100%…

    2025年12月24日
    000
  • 带你进一步认识CSS的层叠概念

    本篇文章给大家带来的内容是关于带你进一步认识css的层叠概念,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 最近在项目的过程中遇到了一个问题,menu-bar希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因,因此找了一下cs…

    2025年12月24日
    000
  • 如何使用纯CSS制作特效导航条?

    本文给大家介绍如何使用纯css制作特效导航条,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 先上张图,看看效果: 在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。 OK,继续。这个效果是我在业务开发的过程中遇到的…

    2025年12月24日 好文分享
    000

发表回复

登录后才能评论
关注微信