精华内容
下载资源
问答
  • display值及作用

    2020-06-18 13:17:56
    display值及作用 display属性可以设置元素的内部和外部显示类型,元素的外部显示类型将决定该元素在流式布局中的表现,例如块级或内联元素,元素的内部显示类型可以控制其子元素的布局,例如grid或flex。目前所有...

    display的值及作用

    display属性可以设置元素的内部和外部显示类型,元素的外部显示类型将决定该元素在流式布局中的表现,例如块级或内联元素,元素的内部显示类型可以控制其子元素的布局,例如gridflex。目前所有浏览器都支持display属性,但是对于属性值的兼容性仍需注意。

    外部显示

    这些值指定了元素的外部显示类型,实际上就是其在流式布局中的角色,即在流式布局中的表现。

    display: none

    display: none;CSS1规范,无兼容性问题,该属性值表示此元素不会被显示,依照词义是真正隐藏元素,使用这个属性,被隐藏的元素不占据任何空间,用户交互操作例如点击事件都不会生效,读屏软件也不会读到元素的内容,这个元素的任何子元素也会同时被隐藏。当使用该属性将元素从显示状态切换为隐藏状态时,元素不占据原本的空间,会触发浏览器的重绘与回流。为这个属性添加过渡动画是无效的,他的任何不同状态值之间的切换总是会立即生效。这种方式产生的效果就像元素完全不存在,但在DOM中依然可以访问到这个元素,也可以通过DOM来操作它。

    display: block

    display: block;CSS1规范,无兼容性问题,该属性值表示此元素将显示为块级元素,此元素前后会带有换行符,元素独占一行,封闭后自动换行,默认宽度为100%,可以指定宽度和高度,内外边距对于四个方向有效。

    display: inline

    display: inline;CSS1规范,无兼容性问题,该属性值表示此元素会被显示为内联元素,元素会生成一个或多个内联元素框,这些框不会在自身之前或之后产生换行符,在正常流中,如果有空间,则下一个元素将在同一行上,元素排在一行,封闭后不会自动换行,不能指定高度与宽度,可以使用line-height来指定高度,外边距对于水平方向有效,垂直方向无效,内边距对于水平方向正常有效,垂直方向只有效果,对其他元素无任何影响。

    display: inline-block

    display: inline-block;CSS2规范,无兼容性问题,该属性值表示此元素将显示为内联块元素,该元素生成一个块元素框,该框将随周围的内容一起流动,就好像它是单个内联框一样,与被替换的元素非常相似,它等效于内联流根inline flow-root,可以指定宽度和高度,内外边距对于四个方向有效元素排在一行,但是在回车后会有空白缝隙。

    display: run-in

    display: run-in;CSS2规范,绝大部分浏览器都不兼容,目前这是个实验性属性值,不应该用作生产环境,该属性值表示此元素会根据上下文决定对象是内联对象还是块级对象,如果它后一个元素是block那么它会变成inline并和后一个元素并排,如果它后一个元素是inline那么它会变成block

    内部显示

    这些关键字指定了元素的内部显示类型,它们定义了该元素内部内容的布局方式,需要假定该元素为非替换元素。

    display: flow-root

    display: flow-root;CSS3规范,兼容性一般,该属性值表示此元素会生成一个块元素盒子,该元素盒子可建立一个新的块格式化上下文BFC,定义格式化根所在的位置。

    display: table

    display: table;CSS2规范,兼容性良好,该属性值表示此元素会作为块级表格来显示,类似<table>,表格前后带有换行符。

    display: flex

    display: flex;CSS3规范,目前主流浏览器都已支持,是布局的首选方案,该属性值表示此元素会作为弹性盒子显示,在外部表现为block,内部作为弹性盒子使用,弹性布局可以为盒状模型提供最大的灵活性。在兼容移动端浏览器的方案上,有可能需要使用display:-webkit-box;,也就是内核前缀-box,同样都是弹性盒子,由于各阶段草案命名的原因,其命名从box更改为flexflex是新的规范属性,此外flex并不能完全替代box,使用这两种方式在实际布局中会存在差异。

    display: grid

    display: grid;CSS3规范,目前主流浏览器都已支持,该属性值表示将元素分为一个个网格,然后利用这些网格组合做出各种各样的布局。Grid布局与Flex布局有一定的相似性,都可以指定容器内部多个成员的位置。不同之处在于,Flex布局是轴线布局,只能指定成员针对轴线的位置,可以看作是一维布局。Grid布局则是将容器划分成行和列,产生单元格,然后指定成员所在的单元格,可以看作是二维布局。

    display: inline-table

    display: inline-table;CSS2规范,兼容性良好,该属性值与display: table;在元素内部表现相同,在元素外部显示表现为inline

    display: inline-flex

    display: inline-flex;CSS3规范,目前主流浏览器都已支持,该属性值与display: flex;在元素内部表现相同,在元素外部显示表现为inline

    display: inline-grid

    display: inline-grid;CSS3规范,目前主流浏览器都已支持,该属性值与display: grid;在元素内部表现相同,在元素外部显示表现为inline

    display: list-item

    display: list-item;CSS1规范,无兼容性问题,该属性值表示将元素的外部显示类型变为block盒模型,并将内部显示类型变为多个list-item inline盒模型。

    内部表现

    table布局模型有着相对复杂的内部结构,因此它们的子元素可能扮演着不同的角色,这一类关键字就是用来定义这些内部显示类型,并且只有在这些特定的布局模型中才有意义。

    display: table-row-group

    display: table-row-group;CSS2规范,兼容性良好,该属性值表示此元素会作为一个或多个行的分组来显示,类似于<tbody>

    display: table-header-group

    display: table-header-group;CSS2规范,兼容性良好,该属性值表示此元素会作为一个或多个行的分组来显示,类似于<thead>

    display: table-footer-group

    display: table-footer-group;CSS2规范,兼容性良好,该属性值表示此元素会作为一个或多个行的分组来显示,类似于<tfoot>

    display: table-row

    display: table-row;CSS2规范,兼容性良好,该属性值表示此元素会作为一个表格行显示,类似于<tr>

    display: table-column-group

    display: table-column-group;CSS2规范,兼容性良好,该属性值表示此元素会作为一个或多个列的分组来显示,类似于<colgroup>

    display: table-column

    display: table-column;CSS2规范,兼容性良好,该属性值表示此元素会作为一个单元格列显示,类似于<col>

    display: table-cell

    display: table-cell;CSS2规范,兼容性良好,该属性值表示此元素会作为一个表格单元格显示,类似于<td><th>

    display: table-caption

    display: table-caption;CSS2规范,兼容性良好,该属性值表示此元素会作为一个表格标题显示,类似于<caption>

    每日一题

    https://github.com/WindrunnerMax/EveryDay
    

    参考

    https://www.runoob.com/cssref/pr-class-display.html
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/display
    https://blog.csdn.net/pedrojuliet/article/details/69062306
    
    展开全文
  • display属性值及作用

    2018-09-18 10:54:44
  • display所有及其作用

    千次阅读 2017-04-04 13:47:06
    display有很多的,每个都有其独特的作用以及特性,这也是面试中常被问到,或者比较容易考到的细琐知识点。1.display none inline block list-item inline-block table inline-table table-caption table...

    display有很多的值,每个值都有其独特的作用以及特性,这也是面试中常被问到,或者比较容易考到的细琐知识点。

    1.display的值

    • none
    • inline
    • block
    • list-item
    • inline-block
    • table
    • inline-table
    • table-caption
    • table-cell
    • table-row
    • table-row-group
    • table-column
    • table-column-group
    • table-footer-group
    • table-header-group
    • run-in
    • box
    • inline-box
    • flexbox
    • inline-flexbox
    • flex
    • inline-flex

    2.各个值的作用

    • inline(默认值):表示指定对象为内联元素
    • none: 表示隐藏对象,与visibility属性的hidden值不同,display:none不为被隐藏的对象保留物理空间 ,然visibility:hidden就保留
    • block: 指定对象为块元素。
    • list-item: 指定对象为列表项目。
    • inline-block: 指定对象为内联块元素。(这是CSS2中的属性)
    • table: 指定对象作为块元素级的表格。类同于html标签table(CSS2)
    • inline-table: 指定对象作为内联元素级的表格。类同于html标签table(CSS2)
    • table-caption: 指定对象作为表格标题。类同于html标签caption(CSS2)
    • table-cell: 指定对象作为表格单元格。类同于html标签td(CSS2)
    • table-row: 指定对象作为表格行。类同于html标签tr(CSS2)
    • table-row-group: 指定对象作为表格行组。类同于html标签tbody(CSS2)
    • table-column: 指定对象作为表格列。类同于html标签col(CSS2)
    • table-column-group: 指定对象作为表格列组显示。类同于html标签colgroup(CSS2)
    • table-header-group: 指定对象作为表格标题组。类同于html标签thead(CSS2)
    • table-footer-group: 指定对象作为表格脚注组。类同于html标签tfoot(CSS2)
    • run-in: 根据上下文决定对象是内联对象还是块级对象。(CSS3)
    • box: 将对象作为弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)
    • inline-box: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)
    • flexbox: 将对象作为弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)
    • inline-flexbox: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)
    • flex: 将对象作为弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)
    • inline-flex: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)
    展开全文
  • CSS display属性的值及作用

    千次阅读 2017-07-28 17:14:48
    display 的属性有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-...

    display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inherit

    其中常用的的有none、inline、block、inline-block。分别的意思是:

    1、none: 元素不会显示,而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden, 是保留元素的空间的。

    2、inline: display的默认属性。将元素显示为内联元素,元素前后没有换行符。我们知道内联元素是无法设置宽高的,所以一旦将元素的display 属性设为 inline, 设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度(font-size)和padding。

    3、block: 将元素将显示为块级元素,元素前后会带有换行符。设置为block后,元素可以设置width和height了。元素独占一行。

    4、inline-block:行内块元素。这个属性值融合了inline 和 block 的特性,即是它既是内联元素,又可以设置width和height。

    看例子

    复制代码
    .inline{
        display:inline; 
        width:100px; 
        height:100px; 
        padding:10px; 
        background-color:red;
    }
    .block{
        display:block; 
        width:100px; 
        height:100px; 
        padding:10px;
        background-color:green;
    }
    .inline-block{
        display:inline-block; 
        width:100px;
        height:100px; 
        padding:10px;
        background-color:blue;
    }
    
    
    <div class="wrap">
        <div class="inline">
        inline
        </div>inline
        <div class="block">
        block
        </div> block
        <div class="inline-block">
        inline-block
        </div>inline-block
    </div>
    复制代码

    这里提及下内联元素和块级元素的一些特点:

    内联元素:

      和其他元素都在一行上;
       元素的高度、宽度及顶部和底部边距不可设置;
       元素的宽度就是它包含的文字或图片的宽度,不可改变。

    <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

    块级元素:

       每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行);
       元素的高度、宽度、行高以及顶和底边距都可设置。
       元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

    常用的块状元素有:
    <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form

    内联块状元素:

       和其他元素都在一行上;
       元素的高度、宽度、行高以及顶和底边距都可设置。

    常用的内联块状元素有:
    <img>、<input>

     

    其他display的属性值不是很常用,其具体的含义如下:

    list-item:     此元素会作为列表显示。
    run-in:     此元素会根据上下文作为块级元素或内联元素显示。
    table:     此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
    inline-table:     此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
    table-row-group:     此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
    table-header-group:     此元素会作为一个或多个行的分组来显示(类似 <thead>)。
    table-footer-group:     此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
    table-row:     此元素会作为一个表格行显示(类似 <tr>)。
    table-column-group:     此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
    table-column:     此元素会作为一个单元格列显示(类似 <col>)
    table-cell:     此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
    table-caption:     此元素会作为一个表格标题显示(类似 <caption>)
    inherit:     规定应该从父元素继承 display 属性的值。

    另外有两个已经废除的属性值:
    compact     CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
    marker     CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。

    展开全文
  • display以及作用

    千次阅读 2015-07-02 10:46:39
    display有很多,常用的有五种: display:none 隐藏元素 (display:none 是彻底地清除元素的物理位置,使其从文档流中消失,而visibility:hidden和opacity:o保留元素的物理位置隐藏元素) display:block 块级...
  • display和position的作用

    千次阅读 2017-02-21 20:13:35
    描述display和position的及其作用,和一些相关知识点
  • 列出display,并说明它们的作用

    千次阅读 2015-10-11 21:22:53
    列出display,并说明它们的作用 display:block; display:compact; display:inherit; display:inline; display:inline-block; display:inline-table; display:list-item; display:marker; d
  • display有哪些?说明他们的作用

    千次阅读 2017-07-12 10:44:38
    display 的属性有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-...
  • display有哪些?说明他们的作用

    千次阅读 2018-03-01 21:34:18
     none 缺省。象行内元素类型一样显示。 inline 行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。 inline-block 默认宽度为内容宽度,可以设置宽高,同行显示。 list-item 象块类型元素一样显示...
  • display属性的作用

    千次阅读 2019-01-18 10:26:43
    相信大家都知道,我们现在学前端的作用就是为了制造出整洁好看又功能化的浏览器页面。 前端主要包含了三个部分 HTML CSS 和JS html在浏览器的作用就相当于骨架支撑着整个身体(页面)而CSS就好比人的衣服使得整体变...
  • display有哪些?说明他们的作用

    万次阅读 2017-04-26 18:25:37
    常用的有: none:此元素不显示。 block:将元素显示为块级元素,前后会带换行符。 inline:默认值,元素会被显示为内联元素,前后没有换行符。 inline-block:行内块级元素。
  • 如果’display为’none’,则’position’ 和 ‘float’无作用。这种情况下,不生成box。 否则,如果’position’为’absolute’ 或 ‘fixed’, box被绝对定位,’float’的计算为’none’,而’display’的...
  • Linux DISPLAY作用

    千次阅读 2012-06-19 11:29:01
    在Linux/Unix类操作系统上, DISPLAY用来设置将图形显示到何处. 直接登陆图形界面或者登陆命令行界面后使用startx启动图形, DISPLAY环境变量将自动设置为:0:0, 此时可以打开终端, 输出图形程序的名称(比如xclock)来...
  •  none 缺省。向行内元素类型一样显示。  inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。  list-item 象块类型元素一样显示,并添加样式列表标记。  2.   *absolute   生成绝对...
  • css中display属性作用大全

    千次阅读 2020-09-14 09:38:23
    display 属性规定元素应该生成的框的类型。 实例 设置段落生成一个行内框: p.inline { display:inline; } 使用说明 说明 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 ...
  • display属性常用属性的理解

    千次阅读 2018-10-31 16:59:00
    1、display:none  表示此元素不会被显示 css; .first{  display: none; width:200px; height:100px; background:yellow; }   <div class="first"> 我有display:none属性,我不会...
  • Linux下DISPLAY环境变量的作用

    千次阅读 2013-03-25 09:48:15
    在Linux/Unix类操作系统上, DISPLAY用来设置将图形显示到何处. 直接登陆图形界面或者登陆命令行界面后使用startx启动图形, DISPLAY环境变量将自动设置为:0:0, 此时可以打开终端, 输出图形程序的名称(比如xclock)来...
  • 题目点评 其实就是要你说清楚该属性有哪些值,每个值都有...元素默认的display值的情况如下  block(块级元素)  、 ……  inline(内联元素)  ……  list-item(项目列表)    none(不显示)
  • dispaly的值及它们的作用

    千次阅读 2017-05-08 16:08:30
    常用的几个: inherit 规定从父级元素继承dispaly属性inherit的案例:<!DOCTYPE html> 菜鸟教程(runoob.com) body {display:inline} p {display:inherit} <bo
  • Linux下display环境变量的作用

    千次阅读 2015-01-28 13:57:34
    通过设置DISPLAY环境变量,可以将图形界面显示在其他的机器或者vm上。 例如,在vncserver :1上运行如下shell脚本: export DISPLAY=:2 java -jar jdev_suite_121300.jar 那么 程序执行后的console输出还在 :1...
  • display

    千次阅读 2018-07-25 08:24:01
    与visibility属性的hidden不同,其不为被隐藏的对象保留其物理空间 inline: 指定对象为内联元素。 block: 指定对象为块元素。  inline-block: 指定对象为内联块元素。(CSS2) 有换行符。 table: ...
  • DISPLAY环境变量的作用

    千次阅读 2006-12-05 10:42:00
    在Linux/Unix类操作系统上, DISPLAY用来设置将图形显示到何处. 直接登陆图形界面或者登陆命令行界面后使用startx启动图形, DISPLAY环境变量将自动设置为:0:0, 此时可以打开终端, 输出图形程序的名称(比如xclock)来...
  • linux下DISPLAY和xhost + 作用

    千次阅读 2014-05-20 11:40:26
    在Linux/Unix类操作系统上, DISPLAY用来设置将图形显示到何处. 直接登陆图形界面或者登陆命令行界面后使用startx启动图形, DISPLAY环境变量将自动设置为:0:0, 此时可以打开终端, 输出图形程序的名称(比如xclock)来...
  • Linux下DISPLAY环境变量的作用, 你在为“cannot open display”烦恼吗? 发布时间: 2009-01-14 23:12 来源: unix-cd 在Linux/Unix类操作系统上, DISPLAY用来设置将图形显示到何处. 直接登陆图形界面或者登陆...
  • linux下DISPLAY环境变量之作用

    千次阅读 2008-09-02 10:01:00
    linux下DISPLAY环境变量之作用在Linux/Unix类操作系统上, DISPLAY用来设置将图形显示到何处. 直接登陆图形界面或者登陆命令行界面后使用startx启动图形, DISPLAY环境变量将自动设置为:0:0, 此时可以打开终端, 输出...
  • display属性的作用 display属性 默认值 inline none block inline-block list-item run-in table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-...
  • display:block的作用与用法

    千次阅读 2013-07-22 16:51:23
    display:block可以理解为块。用个简单的例子给你!比如你做一个超链接, 超链接 当你鼠标移过去文字的时候,超链接有效果! 而当我把样式这样设置: li a{width:100px;height:100px; display:block; color:red; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 150,137
精华内容 60,054
关键字:

display的值及作用