每天一个前端小知识--display

Posted njuclc

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了每天一个前端小知识--display相关的知识,希望对你有一定的参考价值。

display属性

对于大多数display属性而言,实际coding中使用的场景很少。本文仅列举一些w3c列举的属性,还有一些属性过于小众,就不列举了。如果想要拓展的话可以参考display的32中写法

从大的分类来讲,display可以分为6个大类,和1个全局类。

外部值

block

对于我们最熟悉的<div>默认的就是block,此外还有h1-h6,p,form,header,footer,section,article

inline

行内元素默认都是这个值,如span,a,img,b,i

run-in

这个只有IE和Opera支持。此元素会根据上下文作为块级元素或内联元素显示。

详情参考:从display:run-in中学习新技能

内部值

table

基于CSS属性display:table的表格布局使用

flex

敲重点啦!!!

参考:阮一峰讲flex,可以将这个作为词典,当然能够记住其中的常用属性最好不过了,如flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

grid

继续敲重点!!!

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

同样,与grid相关联的也有一大堆旁门属性,是在学习display: grid;的同时必须掌握的。包括grid, grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-template, grid-template-columns, grid-template-rows, grid-template-areas, grid-gap, grid-column-gap, grid-row-gap, grid-auto-columns, grid-auto-rows, grid-auto-flow, grid-column, grid-row。不能详述,关于这个写起来又是一大篇文章。

参考文章:

  1. 边玩边学grid
  2. 360奇舞团
  3. grid讲解

ruby

目前除了Firefox,其他浏览器的支持性并不大好,主要用于给文字加拼音等场景。

subgrid

建议阅读:为什么是display:contents而不是subgrid

列表值

list-item

display: list-item;display: table;一样,也是一帮痛恨各种html标签,而希望只使用div来写遍一切html的家伙搞出来的东西,实际使用极少

属性值

属性值一般是附属于主值的,比如主值里设置了display: table;,就可以在子元素里使用display: table-row-group;等等属性,不过并不绝对。关于它们的作用,主要参考主值就够了。

  • table-row-group
  • table-header-group
  • table-footer-group
  • table-row
  • table-cell
  • table-column-group
  • table-column
  • table-caption
  • ruby-base
  • ruby-text
  • ruby-base-container
  • ruby-text-container

显示值

contents

display: contentdisplay的一个新的属性值。为一个元素应用display: content属性会导致其自身的盒子不生成但所有的子元素都会照常生成。

none

建议阅读:display:none和visibility:hidden

混合值

inline-block

inline-table

inline-flex

inline-grid

全局值

inherit

initial

unset

对于如何写好CSS布局,建议参考:

  1. CSS布局

以上是关于每天一个前端小知识--display的主要内容,如果未能解决你的问题,请参考以下文章

前端知识小总结5

android小知识点代码片段

你一定会用到的 15个前端小知识

前端工程实训

web前端之每天学一点js知识

前端—每天5道面试题(十三)