display: subgrid; 2015年8月6日,W3C的级联样式单(CSS)工作组(Cascading Style Sheets Working Group)发布了CSS网格布局模块第一级(CSS Grid Layout Module Level 1)的工作草案。 在这个草案里规定了上一节我们讲到的display: grid;的方案。而display: subgrid;是属于2017年11月9日...
display: subgrid; 2015年8月6日,W3C的级联样式单(CSS)工作组(Cascading Style Sheets Working Group)发布了CSS网格布局模块第一级(CSS Grid Layout Module Level 1)的工作草案。在这个草案里规定了上一节我们讲到的display: grid;的方案。而display: subgrid;是属于2017年11月9日发布的非正式的CSS网格布局模块...
grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10p...
同样,与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-col...
display: inline-grid; 同上,在行内进行网格布局,参考display: grid;。 全局值 这些值不是 display属性的专利,几乎其它任意属性都可以用,列在这里凑个数。 display: inherit; 继承父元素的 display属性。 display: initial; 不管父元素怎么设定,恢复到浏览器最初始时的 display属性。
display: grid; 会flex很吊吗?会grid更吊哦!也许这就是下次前端面试的重点哦! grid布局,中文翻译为网格布局。学习grid布局有两个重点:一个重点是grid布局引入了一个全新的单位:fr,它是fraction(分数)的缩写,所以从此以后,你的兵器库里除了px,em,rem,百分比这些常见兵器以及vw,vh这些新式武器之外,又多了一样旁门...
从⼤的分类来讲，display的32种写法可以分为6个⼤类，再加上1个全局类，⼀共是7⼤类：外部值 所谓外部值，就是说这些值只会直接影响⼀个元素的外部表现，⽽不影响元素⾥⾯的⼉⼦级孙⼦级元素的表现。display: block;这个值⼤家不陌⽣，我们最熟悉的缺省就是这个值，最基本的块级元素，...
MDN中所有display的值/* <display-outside> values */display:block;display:inline;display:run-in;/* <display-inside> values */display:flow;display:flow-root;display:table;display:flex;display:grid;display:ruby;display:subgrid;/* <display-outside> plus <display-inside> values */display:block fl...
The display CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex.
序号互联网分类MDN属性值 1外部值<display-outside>display: block;display: inline;display: run-in; 2内部值<display-inside>display: flow;display: flow-root;display: table;display: flex;display: grid;display: ruby; 3列表值<display-listitem>... 4属性...