属性 描述 CSS
font 在一个声明中设置所有字体属性。 1
font-family 规定文本的字体系列。 1
font-size 规定文本的字体尺寸。 1
font-size-adjust 为元素规定 aspect 值。 2
font-stretch 收缩或拉伸当前的字体系列。 2
font-style 规定文本的字体样式。 1
font-variant 规定是否以小型大写字母的字体显示文本。 1
font-weight 规定字体的粗细。 1
上篇介绍了网格容器、网格轨道的相关属性使用方法,如果您还不熟悉网格,建议先去看看之前的文章前端入门——css Grid网格基础知识 ,前端入门——css 网格轨道详细介绍 学习下网格基本知识。
本篇主要介绍网格项的相关属性:
以上四组属性都和网格线密切相关,它们定义了网格项如何根据网格线来定位网格项的位置。
语法如下:
属性值说明:
如下示例:
项目可以相互重叠。您可以使用 z-index 它们来控制它们的堆叠顺序。
上面介绍的grid-column-start / grid-row-start 、grid-column-end/ grid-row-end四个属性还可以使用 grid-row-start 和 grid-row-end 进行简写。
语法:
属性值:
如下示例:
使用此属性可以命名一个网格区域,以便在 grid-template-areas 属性创建的模板中引用此网格区域,或者作为grid-row-start + grid-column-start + grid-row-end + grid-column-end 的更短的简写。
语法如下:
属性值:
如下示例:
为网格区域分配名称的一种方式
作为简写
https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas
https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid