css-display所有属性值简单介绍

display的值一共有32个,分为7大类,如下:
css-display所有属性值简单介绍_第1张图片
在此之前,这个分类完全没听过,对于display我的学习是这样的,一开始 block 、inline、inline-block,,后来多了个none, 再后来学了flex,其他的table、contents等也见过几次,但是没有去深究。不过,这里只是作为解释型的介绍,了解一些其他的属性值,有一些布局还是比较复杂的,像table\list、 flex、grid布局都是可以写很多的,以后可以单独写出来。

外部值

css-display所有属性值简单介绍_第2张图片
外部值就是定义自身元素的外部表现,而不影响其内的子元素。

display: block;
display: inline;

块级元素和行内元素,这两个很常见了。譬如,div,h1-h6、p元素等就是块级元素,span、i、label等就是行内元素,通过去改变这两个值,去改变他的现实方式。

display: run-in;

这个属性倒是不常见,也不常用,基本上也只有IE和Opera支持它。很简单,就是让设置了这个值的属性【闯入】下一行。

我是
run-in

css-display所有属性值简单介绍_第3张图片

内部值

css-display所有属性值简单介绍_第4张图片
和外部值相反,内部值就是定义子元素的布局的。
display:flow;
翻译过来是流布局,具体怎么用代表什么意思也没有查出来,但我了解到他对chrome不支持,基本可以放弃。

display:flow-root;
不同于flow, flow-root可以用起来,可以撑开浮动的元素高度,就是可以清除浮动效果。

我是
flow-root
.father { display: flow-root; border: 1px solid #000; width: 600px; } .son { float: left; width: 400px; height: 400px; background-color: pink; }

css-display所有属性值简单介绍_第5张图片
display:table;
当我们想写表格,但却想要自动换行,那么我们可以用

代替
等标签。可以和属性类的table值搭配使用。

display:flex;
弹性布局,和flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content配合使用,也可以使用连写flex。特别好用的一个布局方式,2009年诞生,它的诞生,不亚于css界一场工业革命,标志着float被彻底抛进历史的垃圾堆。比较常用,也比较多,想要更深入地学习可以看A Complete Guide to Flexbox非常好。

display: grid;
网格布局;
学习 grid布局有两个重点:一个重点是 grid布局引入了一个全新的单位: fr,它是 fraction( 分数)的缩写,所以从此以后,你的兵器库里除了 px, em, rem, 百分比这些常见兵器以及 vw, vh这些新式武器之外,又多了一样旁门暗器 fr,要想用好 grid,必须充分掌握 fr。另一个重点是 斜杠操作符,这可不是 分数哦。它表示的是 起始位置和 结束位置。比如说3/4,这可不是 四分之三的意思,这是指一个元素从第 3行开始,到第 4行结束,但又不包括第 4行。
grid布局是一种比较强大的布局方式,后面需要专门写一篇,本文知识简单介绍这些布局。
详情参考grid布局

display: ruby;
旁注标记,看起来非常有用的一种布局,但是只有firefox支持比较好。

display: subgrid;
display:subgrid;是属于 2017年 11月 9日发布的非正式的CSS网格布局模块第二级的内容。这是一个非常新的草案,并且争议不断。
subgrid是想要大网格里还可以套小网格,并且互相不影响。但如果 grid里可以再套 subgrid的话,那我 subgrid里还想再套 subgrid怎么办? subsubgrid吗?况且,到底是 grid:subgrid;还是 display:subgrid;这个也没有达成共识。

列表值

display: list-item;
他和table相似,目的都是为了用div去代替

  • 标签之类的。

    属性值

    一些和table布局、ruby搭配一起控制页面布局的属性值
    css-display所有属性值简单介绍_第6张图片

    显示值

    在这里插入图片描述
    display: content;
    经常会看到这个布局方式,但是不太懂它做了什么,简单看下他对布局和元素的影响:

    1.它使div元素不产生任何边界框,因此元素的背景、边框和填充部分都不会渲染。然而,颜色(color)和字体(font)却可以渲染。所以我对它的理解是只影响其内容的样式起效。

    
    
    a
    b
    c

    css-display所有属性值简单介绍_第7张图片
    2. 他对父元素的布局会继承,但同样的设置display: contents;时它本身的边框,边距,填充都会消失。
    如下一个父元素中有三个元素,其中第二个盒子,又有两个盒子,在父盒子中使用flex布局。
    css-display所有属性值简单介绍_第8张图片
    在第二个子盒子中使用display:contents;后就会发生变化,第二个盒子不进没了边框、边距和填充,并且他的布局和父盒子的弹性布局效果一样。
    在这里插入图片描述

    display: none;
    隐藏;元素渲染,但是不显示,相当于v-show的使用。

    混合值

    css-display所有属性值简单介绍_第9张图片
    display: inline-block; 行内块元素,即在行内显示块级元素
    display: inline-table; 即在行内显示表格元素
    display: inline-flex; 即在行内弹性布局
    这里也是一个我有疑问的地方,说起行内弹性布局,但是弹性布局如果设置了方向为水平,不是本来就是在行内吗?其实在对子元素的布局上我认为是没有变化,变化的是他本身。

    1.其实display:flex;和display:inline-flex; + width: 100%;
    就相当于display:block; 和 display: inline-block; + width: 100%;
    如果按照这样说的话,其实flex和inline-flex其内盒子的布局是没有变化的,只是一个他本身是块级元素,一个是行内元素而已;

    flex: 本身作为一个块级元素,占据整行
    在这里插入图片描述
    inline-flex: 本身作为一个行内块元素,如果不设置宽度,则占据子元素撑开的宽度
    在这里插入图片描述
    2.还发现一个区别,算是拓展吧
    既然他们他们两都是伸缩盒,就是来体会一下伸缩的含义:

    不设置宽度的情况, 当他的子元素所有的子元素的宽度加起来超过父盒子宽度,他会让子元素伸缩呢,还是让,父盒子的区域滚动呢?如下示例,给每个子元素的宽度都设置800px,父盒子分别设置这两种布局:

    flex:
    在这里插入图片描述

    inline-flex:
    在这里插入图片描述

    display: inline-grid; 即在行内网格布局

    全局值

    几乎很多属性都存在这几种值。
    在这里插入图片描述

    display: inherit;
    继承父元素的 display属性。
    刚刚说了,display:contents;也有继承的功能,那inherit相对于它就是没有他本身让边距、边框、填充消失的功能,当然, 除非他继承的是contents;
    举个继承contents的示例:

    
    
    a
    d
    f
    e
    c

    没有设置inherit之前:
    在这里插入图片描述
    设置inherit之后:
    在这里插入图片描述

    display: initial;
    不管父元素怎么设定,恢复到浏览器最初始时的 display属性。
    display: unset;
    unset混合了 inherit和 initial。如果父元素设值了,就用父元素的设定,如果父元素没设值,就用浏览器的缺省设定

    你可能感兴趣的:(css-display所有属性值简单介绍)