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, ZLW的头像Z, ZLW
上一篇 2023年1月3日 下午4:36
下一篇 2023年1月3日 下午5:09

相关推荐

  • 项目的什么不包含管理储备

    项目的成本计划、风险应对策略、进度计划以及范围描述是不包含管理储备的。在项目管理中,管理储备是为了应对项目中无法预见的风险而设立的一种预算,它不包含在项目的初步预算中,也不包含在项目的成本基准中。这是因为管理储备的使用需要得到高层管理人员的批准,因此,它并不属于项目经理可以自由支配的资源。在具体实施…

    2024年8月7日
    600
  • 项目管理目标 ci目标是什么

    在项目管理中,CI目标是指持续集成目标,这是一种软件开发实践,它要求团队频繁地将代码集成到一个共享的主线中。CI目标主要包括:减少集成问题、提高软件质量、加速软件发布。 持续集成通过自动化的构建和测试,可以发现并修复集成问题,从而避免了“集成地狱”的情况。这有利于提高团队的效率,减少重复的工作,帮助…

    2024年8月7日
    300
  • 文化项目运行管理是什么

    文化项目运行管理包括:项目规划、资源配置、进度控制、成本管理、风险管理。项目规划是文化项目运行管理中最为关键的一环。它不仅涉及到项目的总体目标、阶段性目标和具体任务的明确,还包括对项目时间表、资源分配及预算的详细安排。一个科学的项目规划可以有效地指导项目的实施,确保项目按计划进行,避免资源浪费和时间…

    2024年8月7日
    300
  • 新加坡项目管理模式是什么

    新加坡的项目管理模式是一种以结果为导向,注重团队协作的管理方式。这种模式的主要特点包括:以项目为中心,明确项目目标和预期成果;强调团队之间的沟通和协作,确保项目的顺利进行;关注风险管理,提前预防和解决可能出现的问题;重视质量管理,保证项目成果的质量和效益。其中,以项目为中心,明确项目目标和预期成果是…

    2024年8月7日
    400
  • 项目管理师需要学什么

    项目管理师需要掌握的知识和技能主要包括:项目管理理论、项目质量管理、项目风险管理、项目时间管理、项目成本管理、项目沟通管理、项目人力资源管理、项目采购管理、项目整合管理等。此外,还需要具备一定的领导力、沟通能力、决策能力、协调能力、解决问题的能力以及时间管理能力等。 接下来,我将详细介绍这些知识和技…

    2024年8月7日
    200

发表回复

登录后才能评论
注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

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

分享本页
返回顶部