display有哪些属性

display的属性:1、display:none;2、display:block;3、display:inline;4、display:inline-block;5、display:inline-table;6、display:table;7、table-row;8、table-cell;9、display:list-item;10、display:flex。

display有哪些属性-Worktile社区

一、display的属性

  1. display:none:设置元素隐藏,具体可见:display:none。
  2. display:block:设置元素为块级元素,块级元素可以独占一行,可设宽高。
  3. display:inline:设置元素为行内元素,一行可有多个行内块元素,不可设宽高。
  4. display:inline-block:设置元素为行内块元素,既有行内元素的(一行可有多个)特性,又有块元素的(可设宽高)特性。
  5. display:inline-table:inline-table得到的是,外面是“内联盒子”,里面是“table盒子”。
  6. display:table:元素会作为块级表格来显示,类似 table,表格前后带有换行符;配合table-cell使用可实现水平垂直居中。
  7. table-row:元素会作为一个表格行显示,类似 tr。
  8. table-cell:元素会作为一个表格单元格显示,类似 td和 th。
  9. display:list-item:为元素内容生成一个块型盒,随后再生成一个列表型的行内盒。会把元素作为列表显示,要完全模仿列表的话还需要加上 list-style-position,list-style-type。
  10. display:flex:该属性会将元素变为弹性盒子(或内联的弹性盒子),它能够扩展和收缩容器内的元素,以最大限度地填充可用空间。

二、display:flex用法详解

1、flex-direction

  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。

2、flex-wrap

  • nowrap(默认):不换行。
  • wrap:换行,名列前茅行在上方。
  • wrap-reverse:换行,名列前茅行在下方。

3、justify-content:

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

4、align-items:

  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的名列前茅行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

5、align-content:

定义了多根轴线的对齐方式,如果项目只有一根轴线,那么该属性将不起作用。

  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。

6、flex-grow

项目中盒子会按照字的多少呈现出合适的大小。

7、flex-shrink

属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。

8、align-self: auto | flex-start | flex-end | center | baseline | stretch

属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

延伸阅读

display简介

display是CSS中的一个常用属性,可用于规定元素应该生成的框的类型,在网页开发中经常需要用到。display属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。

文章标题:display有哪些属性,发布者:Z, ZLW,转载请注明出处:https://worktile.com/kb/p/34126

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
Z, ZLWZ, ZLW认证作者
上一篇 2023年1月3日 下午4:36
下一篇 2023年1月3日 下午5:09

相关推荐

  • 表单oa系统

    标题:表单OA系统:企业信息化办公的新趋势 摘要:表单OA系统正在重新定义企业信息化管理,提供数据收集、流程优化、自动化处理三项关键能力。这类系统通过设计易于填写的表单,捕捉工作流程中的关键信息,优化决策与数据可视化。自动化处理能力允许企业提高效率,减少人为错误。本文将围绕表单OA系统的实施进行深入…

    2024年1月12日
    11200
  • okr如何使用

    标题:OKR 如何使用 在企业或个人管理实践中运用OKR(Objectives and Key Results,目标与关键成果),为实现宏伟目标树立效率与激励并行的框架。这一方法论致力于目标的清晰设定与跟踪。1、确定明确、挑战性的目标;2、制定可衡量的关键成果;3、实行周期性的检讨;4、保持透明、促…

    2024年1月17日
    10200
  • 有哪些类似于MSProject的网络项目管理工具

    类似 Microsoft Project 的网络项目管理软件有:1、Worktile;2、PingCode;3、Asana;4、Zoho Projects;5、Monday;6、Smartsheet;7、Teamwork等。Worktile是国内项目管理总榜以及易用性榜中排名、评分较高的一款项目管理…

    2023年2月10日
    42800
  • 数字化和信息化的区别

    数字化和信息化的区别在于:1、业务侧重点不同;2、思维模式不同;3、数据分析方式不同;4、企业组织结构不同;5、企业转型路径不同。信息化侧重业务信息的搭建与管理。数字化侧重产品领域的对象资源形成与调用。 1、业务侧重点不同 信息化:侧重业务信息的搭建与管理。 数字化:侧重产品领域的对象资源形成与调用…

    2023年2月21日
    1.4K00
  • 研发管理中最常见的挑战有哪些

    研发管理是一个涉及创新性和复杂性的领域,面对的挑战繁多。1、社会经济变化、2、团队沟通协作、3、项目管理、4、技术更新换代是最常见的挑战。面对社会经济的快速变化,研发管理必须持续顺应新的市场需求和技术趋势,确保项目的可持续性。而在团队沟通协作方面,保持团队成绩和协作精神是至关重要的。项目管理面临着资…

    2023年11月14日
    19100
  • 研发项目管理英文

    研发项目管理英文 Innovation and strategic planning are the fulcrums to impel Research and Development (R&D) projects toward success. Effective R&D p…

    2024年1月10日
    9400
  • DevOps如何提高应用程序的自动化容灾和灾难恢复

    针对如何利用DevOps策略提高应用程序的自动化容灾和灾难恢复能力,有五个关键点:1、持续集成和持续部署的实践、2、基础设施即代码、3、监控和日志管理、4、灾难恢复的自动化测试、5、多区域部署策略。 其中基础设施即代码的实践对于自动化容灾和灾难恢复至关重要,因为它允许团队使用代码管理和部署基础设施,…

    2024年1月18日
    8800
  • 360考核的目的是什么

    360考核的目的:1、向员工提供建设性的反馈;2、提高自我意识;3、明确行为;4、促进对话;5、改善工作关系;6、鼓励个人发展;7、加强问责制;8、提高员工绩效。其中,向员工提供建设性的反馈,能够有效提高工作场所的参与度和积极性。

    2022年11月16日
    79400
  • 外部存储器主要有哪些

    外部存储器主要有:1、U盘;2、移动硬盘;3、固态硬盘;4、光盘;5、软盘;6、磁带。U盘是指,较为常见的可移动式存储设备;其价格相对低廉,存取速度快,占用空间小,即插即用,常用于桌面PC之间的文件互相传输。

    2023年1月9日
    1.5K00
  • 2023年项目管理工具排行榜发布:PingCode和Worktile包揽前二

    近日,由中国科学院主管的《互联网周刊》联合德本咨询等机构正式发布了“2023企业服务分类排行”。该排行榜对过去一年企业服务领域的行业表现进行了全面梳理和评估,其中,PingCode和Worktile以其卓越表现,包揽了企业项目管理服务类别前二名的荣誉。 前十的项目管理系统包括: 榜单介绍: “202…

    2023年8月8日
    30400

发表回复

登录后才能评论
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部