除了微软之外，浏览器厂商似乎还没有对 Grid(网格) 搞自己的一套实现（比如加前缀），直到规范完全成熟。这是一件好事，因为这意味着我们不必担心学习多个语法。
在生产中使用 Grid 只是时间问题。 但现在是学习的时候了。
重要术语
在深入了解 Grid 的概念之前，理解术语是很重要的。由于这里涉及的术语在概念上都很相似，如果不先记住 Grid 规范定义的含义，很容易混淆它们。但是别担心，术语并不多。
网格容器(Grid Container)
应用 display: grid 的元素。这是所有 网格项（grid item）的直接父级元素。在这个例子中，container就是 网格容器(Grid Container)。
HTML 代码:
网格项(Grid Item)
网格容器（Grid Container）的子元素（例如直接子元素）。这里 item 元素就是网格项(Grid Item)，但是 sub-item 不是。
HTML 代码:
网格线(Grid Line)
构成网格结构的分界线。它们既可以是垂直的（“列网格线(column grid lines)”），也可以是水平的（“行网格线(row grid lines)”），并位于行或列的任一侧。例如，这里的黄线就是一条列网格线。
网格轨道(Grid Track)
两条相邻网格线之间的空间。你可以把它们想象成网格的列或行。下图是第二条和第三条 行网格线 之间的 网格轨道(Grid Track)。
网格单元格(Grid Cell)
两个相邻的行和两个相邻的列网格线之间的空间。这是 Grid(网格) 系统的一个“单元”。下图是第 1 至第 2 条 行网格线 和第 2 至第 3 条 列网格线 交汇构成的 网格单元格(Grid Cell)。
网格区域(Grid Area)
4条网格线包围的总空间。一个 网格区域(Grid Area) 可以由任意数量的 网格单元格(Grid Cell) 组成。下图是 行网格线1和3，以及列网格线1和3 之间的网格区域。
Grid(网格) 属性目录
网格容器(Grid Container) 属性
display
-
grid-template-columns
-
grid-template-rows
-
grid-template-areas
-
grid-template
-
grid-column-gap
-
grid-row-gap
-
grid-gap
-
justify-items
-
align-items
-
place-items
-
justify-content
-
align-content
-
place-content
-
grid-auto-columns
-
grid-auto-rows
-
grid-auto-flow
-
grid
网格项(Grid Items) 属性
grid-column-start
-
grid-column-end
-
grid-row-start
-
grid-row-end
-
grid-column
-
grid-row
-
grid-area
-
justify-self
-
align-self
-
place-self
父元素 网格容器(Grid Container) 属性
display
将元素定义为网格容器，并为其内容建立新的 网格格式上下文。
值：
grid ：生成一个块级网格
-
inline-grid ：生成一个内联网格
CSS 代码:
{:;
}
注意：通过嵌套元素（也称为子网格，即 subgrid ）向下传递网格参数的能力已移至 CSS Grid 规范的 Level 2 版本。这里有 一个快速解释。
grid-template-columns / grid-template-rows
使用空格分隔的值列表，用来定义网格的列和行。这些值表示 网格轨道(Grid Track) 大小，它们之间的空格表示网格线。
值：– fr 单位）–
CSS 代码:
{: ... |
...;: ... |
...;
}
示例：
当你在 网格轨道(Grid Track) 值之间留出空格时，网格线会自动分配正数和负数名称：
CSS 代码:
{:;:;
}
但是你可以明确的指定网格线(Grid Line)名称，例如 值。请注意网格线名称的括号语法：
CSS 代码:
{:;:;
}
请注意，一条网格线(Grid Line)可以有多个名称。例如，这里的第二条 行网格线(row grid lines) 将有两个名字：row1-end 和 row2-start ：
CSS 代码:
{:;
}
如果你的定义包含多个重复值，则可以使用 repeat() 表示法来简化定义：
CSS 代码:
{:;
}
上面的代码等价于：
CSS 代码:
{:;
}
如果多行共享相同的名称，则可以通过其网格线名称和计数来引用它们。
CSS 代码:
{:;
}
fr 单元允许你用等分网格容器剩余可用空间来设置 网格轨道(Grid Track) 的大小 。例如，下面的代码会将每个网格项设置为网格容器宽度的三分之一：
CSS 代码:
{:;
}
剩余可用空间是除去所有非灵活网格项 之后 计算得到的。在这个例子中，可用空间总量减去 50px 后，再给 fr 单元的值 3 等分：
CSS 代码:
{:;
}
grid-template-areas
通过引用 grid-area 属性指定的 网格区域(Grid Area) 名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。一个点号（.）代表一个空单元格。这个语法本身可视作网格的可视化结构。
值：
CSS 代码:
{: | . | none | ..."
"...";
}
示例：
CSS 代码:
{:;
}{:;
}{:;
}{:;
}.container {<span style="color: #ff0000">
grid-template-columns:<span style="color: #0000ff"> 50px 50px 50px 50px;<span style="color: #ff0000">
grid-template-rows:<span style="color: #0000ff"> auto;<span style="color: #ff0000">
grid-template-areas:<span style="color: #0000ff">
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
上面的代码将创建一个 4 列宽 3 行高的网格。整个顶行将由 header 区域组成。中间一排将由两个 main 区域，一个是空单元格，一个 sidebar 区域组成。最后一行全是 footer 区域组成。
你的声明中的每一行都需要有相同数量的单元格。
你可以使用任意数量的相邻的 点. 来声明单个空单元格。 只要这些点.之间没有空隙隔开，他们就代表一个单独的单元格。
注意你 不能 用这个语法来命名网格线，只是命名 网格区域 。当你使用这种语法时，区域两端的网格线实际上会自动命名。如果你的网格区域的名字是 foo，该区域的起始行网格线 和 起始列网格线 的名称将为 foo-start，而最后一条行网格线 和 最后一条列网格线 的名称将为 foo-end。这意味着某些网格线可能有多个名字，如上例中最左边的网格线，它将有三个名称：header-start，main-start 和 footer-start 。
grid-template
用于定义 grid-template-rows ，grid-template-columns ，grid-template-areas 简写属性。
值：
CSS 代码:
{: / ;
}
这个属性也接受一个更复杂但非常方便的语法来指定三个上诉属性。这里有一个例子：
CSS 代码:
{:;
}
等价于：
CSS 代码:
{:;:;:;
}
由于 grid-template 不会重置 隐式 网格属性（grid-auto-columns， grid-auto-rows， 和 grid-auto-flow），这可能是你想在大多数情况下做的，建议使用 grid 属性而不是 grid-template。
grid-column-gap / grid-row-gap
指定网格线(grid lines)的大小。你可以把它想象为设置列/行之间间距的宽度。
值：
CSS 代码:
{:;:;
}
示例：
CSS 代码:
{:;:;:;:;
}
只能在 列/行 之间创建间距，网格外部边缘不会有这个间距。
注意：这两个属性将删除 grid- 前缀，就是将 grid-column-gap 和 grid-row-gap重命名为 column-gap和 row-gap。 Chrome 68+，Safari 11.2 Release 50+ 和Opera 54+ 已经支持无前缀的属性。
grid-gap
grid-column-gap 和 grid-row-gap 的简写语法
值：
CSS 代码:
{: ;
}
示例：
CSS 代码:
{:;:;:;
}
如果grid-row-gap没有定义，那么就会被设置为等同于 grid-column-gap 的值。例如下面的代码是等价的：
CSS 代码:
{
:;:;
<span style="color: #008000">/
<span style="color: #008000"> 等价于 <span style="color: #008000">/<span style="color: #ff0000">
grid-gap:<span style="color: #0000ff"> 10px 10px;
<span style="color: #008000">/
<span style="color: #008000"> 等价于 <span style="color: #008000">/<span style="color: #ff0000">
grid-gap:<span style="color: #0000ff"> 10px;
}
注意：这个属性将删除 grid- 前缀，就是将 grid-gap 重命名为 gap。 Chrome 68+，Safari 11.2 Release 50+ 和Opera 54+ 已经支持无前缀的属性。
justify-items
沿着 inline（行）轴线对齐网格项(grid items)（相反的属性是 align-items 沿着 block（列）轴线对齐）。此值适用于容器内的所有网格项。
值：
start：将网格项对齐到其单元格的左侧起始边缘（左侧对齐）
-
end：将网格项对齐到其单元格的右侧结束边缘（右侧对齐）
-
center：将网格项对齐到其单元格的水平中间位置（水平居中对齐）
-
stretch：填满单元格的宽度（默认值）
CSS 代码:
{:;
}
示例：
CSS 代码:
{:;
}
CSS 代码:
{:;
}
CSS 代码:
{:;
}
CSS 代码:
{:;
}
这些行为也可以通过每个单独网格项(grid items) 的 justify-self 属性设置。
align-items
沿着 block（列）轴线对齐网格项(grid items)（相反的属性是 justify-items 沿着 inline（行）轴线对齐）。此值适用于容器内的所有网格项。
值：
start：将网格项对齐到其单元格的顶部起始边缘（顶部对齐）
-
end：将网格项对齐到其单元格的底部结束边缘（底部对齐）
-
center：将网格项对齐到其单元格的垂直中间位置（垂直居中对齐）
-
stretch：填满单元格的高度（默认值）
CSS 代码:
{:;
}
示例：
CSS 代码:
{:;
}
CSS 代码:
{:;
}
CSS 代码:
{:;
}
CSS 代码:
{:;
}
这些行为也可以通过每个单独网格项(grid items) 的 align-self 属性设置。
place-items
place-items 是设置 align-items 和 justify-items 的简写形式。
值：
除 Edge 之外的所有主要浏览器都支持 place-items 简写属性。
有关更多详细信息，请参阅align-items 和 justify-items。
justify-content
有时，你的网格合计大小可能小于其 网格容器(grid container) 大小。 如果你的所有 网格项(grid items) 都使用像 px 这样的非灵活单位设置大小，就可能出现这种情况。
在这种情况下，您可以设置网格容器内的网格的对齐方式。 此属性沿着 inline（行）轴线对齐网格（相反的属性是 align-content ，沿着 block（列）轴线对齐网格）。
值：
start：将网格对齐到 网格容器(grid container) 的左侧起始边缘（左侧对齐）
-
end：将网格对齐到 网格容器 的右侧结束边缘（右侧对齐）
-
center：将网格对齐到 网格容器 的水平中间位置（水平居中对齐）
-
stretch：调整 网格项(grid items) 的宽度，允许该网格填充满整个 网格容器 的宽度
-
space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间
-
space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间
-
space-evenly：在每个网格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间
CSS 代码:
{:;
}
示例：
CSS 代码:
{:;
}
CSS 代码:
{:;
}
CSS 代码:
{:;
}
CSS 代码:
{:;
}
CSS 代码:
{:;
}
CSS 代码:
{:;
}
CSS 代码:
{:;
}
align-content
有时，你的网格合计大小可能小于其 网格容器(grid container) 大小。 如果你的所有 网格项(grid items) 都使用像 px 这样的非灵活单位设置大小，就可能出现这种情况。
在这种情况下，您可以设置网格容器内的网格的对齐方式。 此属性沿着 block（列）轴线对齐网格（相反的属性是 justify-content ，沿着 inline（行）轴线对齐网格）。
值：
start：将网格对齐到 网格容器(grid container) 的顶部起始边缘（顶部对齐）
-
end：将网格对齐到 网格容器 的底部结束边缘（底部对齐）
-
center：将网格对齐到 网格容器 的垂直中间位置（垂直居中对齐）
-
stretch：调整 网格项(grid items) 的高度，允许该网格填充满整个 网格容器 的高度
-
space-around：在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间
-
space-between：在每个网格项之间放置一个均匀的空间，上下两端没有空间
-
space-evenly：在每个网格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间
CSS 代码:
{:;
}
示例：
CSS 代码:
{:;
}
CSS 代码:
{:;
}
CSS 代码:
{:;
}
CSS 代码:
{:;
}
CSS 代码:
{:;
}
CSS 代码:
{:;
}
CSS 代码:
{:;
}
place-content
place-content 是设置 align-content 和 justify-content 的简写形式。
值：
除 Edge 之外的所有主要浏览器都支持 place-content 简写属性。
有关更多详细信息，请参阅align-content 和 justify-content。
grid-auto-columns / grid-auto-rows
指定任何自动生成的网格轨道(grid tracks)（又名隐式网格轨道）的大小。当网格中的网格项多于单元格时，或者当网格项位于显式网格之外时，就会创建隐式轨道。（参见显式网格和隐式网格之间的区别）
值：
CSS 代码:
{: ...;: ...;
}
为了说明如何创建隐式网格轨道，请考虑一下以下的代码：
CSS 代码:
{:;:}
这将生成了一个 2×2 的网格。
但现在想象一下，你使用 grid-column 和 grid-row 来定位你的网格项，像这样：
CSS 代码:
{:;:;
}{:;:;
}
我们告诉 .item-b 从第 5 条列网格线开始到第 6 条列网格线结束，但我们从来没有定义过 第5 或 第6 列网格线。因为我们引用的网格线不存在，所以创建宽度为 0 的隐式网格轨道以填补空缺。我们可以使用 grid-auto-columns 和 grid-auto-rows 来指定这些隐式轨道的大小：
CSS 代码:
{:;
}
grid-auto-flow
如果你有一些没有明确放置在网格上的网格项(grid items)，自动放置算法 会自动放置这些网格项。该属性控制自动布局算法如何工作。
值：
row：告诉自动布局算法依次填充每行，根据需要添加新行 （默认）
-
column：告诉自动布局算法依次填入每列，根据需要添加新列
-
dense：告诉自动布局算法在稍后出现较小的网格项时，尝试填充网格中较早的空缺
CSS 代码:
{:}
请注意，dense 只会更改网格项的可视顺序，并可能导致它们出现乱序，这对可访问性不利。
示例：
考虑以下 HTML :
HTML 代码:
item-a
item-b
item-c
item-d
item-e
你定义一个有 5 列和 2 行的网格，并将 grid-auto-flow 设置为 row（也就是默认值）：
CSS 代码:
{:;:;:;:;
}
将网格项放在网格上时，只能为其中的两个指定位置：
CSS 代码:
{:;:;
}{:;:;
}
因为我们把 grid-auto-flow 设成了 row ，所以我们的网格看起来会是这样。注意 我们没有进行定位的网格项（item-b，item-c，item-d）会这样排列在可用的行中：
相反地，如果我们把 grid-auto-flow 设成了 column ，那么 item-b，item-c，item-d 会沿着列向下排列：
CSS 代码:
{:;:;:;:;
}
grid
在一个声明中设置所有以下属性的简写： grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns,和 grid-auto-flow 。（注意：您只能在单个网格声明中指定显式或隐式网格属性）。
值：
none：将所有子属性设置为其初始值。
-
grid-template 简写的工作方式相同。
-
/ [ auto-flow && dense? ] ? ：将grid-template-rows设置为指定的值。 如果 auto-flow 关键字位于斜杠的右侧，则会将 grid-auto-flow 设置为 column。 如果另外指定了 dense 关键字，则自动放置算法使用 “dense” 算法。 如果省略 grid-auto-columns，则将其设置为 auto。
-
[ auto-flow && dense? ] ? / ：将 grid-template-columns 设置为指定值。 如果 auto-flow 关键字位于斜杠的左侧，则会将grid-auto-flow 设置为 row 。 如果另外指定了 dense 关键字，则自动放置算法使用 “dense” 打包算法。 如果省略 grid-auto-rows ，则将其设置为 auto。
例子：
以下两个代码块是等效的：
CSS 代码:
{:;
}
CSS 代码:
{:;:;
}
以下两个代码块是等效的：
CSS 代码:
{:;
}
CSS 代码:
{:;:;
}
以下两个代码块是等效的：
CSS 代码:
{:;
}
CSS 代码:
{:;:;:;
}
以下两个代码块是等效的：
CSS 代码:
{:;
}
CSS 代码:
{:;:;:;
}
它也接受一个更复杂但相当方便的语法来一次设置所有内容。您可以指定 grid-template-areas，grid-template-rows和grid-template-columns，并所有其他的子属性都被设置为它们的初始值。这么做可以在它们网格区域内相应地指定网格线名字和网格轨道的大小。用最简单的例子来描述：
CSS 代码:
{:;
}
等价于：
CSS 代码:
{:;:;:;
}
子元素 网格项(Grid Items) 属性
注意：float，display: inline-block，display: table-cell，vertical-align 和 column-* 属性对网格项无效。
grid-column-start / grid-column-end / grid-row-start / grid-row-end
通过引用特定网格线(grid lines) 来确定 网格项(grid item) 在网格内的位置。 grid-column-start / grid-row-start 是网格项开始的网格线，grid-column-end / grid-row-end 是网格项结束的网格线。
值：
-
span ：该网格项将跨越所提供的网格轨道数量
-
span ：该网格项将跨越到它与提供的名称位置
-
auto：表示自动放置，自动跨度，默认会扩展一个网格轨道的宽度或者高度
CSS 代码:
{: | | span | span | auto
grid-column-end: | | span | span | auto
grid-row-start: | | span | span | auto
grid-row-end: | | span | span | auto
}
示例：
CSS 代码:
{:;:;:;
}
CSS 代码:
{:;:;:}
如果没有声明指定 grid-column-end / grid-row-end，默认情况下，该网格项将占据 1 个轨道。
项目可以相互重叠。您可以使用 z-index 来控制它们的重叠顺序。
grid-column / grid-row
分别为 grid-column-start + grid-column-end 和 grid-row-start + grid-row-end 的简写形式。
值：
CSS 代码:
{: / | / span ;: / | / span ;
}
示例：
CSS 代码:
{:;:;
}
如果没有声明分隔线结束位置，则该网格项默认占据 1 个网格轨道。
grid-area
为网格项提供一个名称，以便可以 被使用网格容器 grid-template-areas 属性创建的模板进行引用。 另外，这个属性可以用作grid-row-start + grid-column-start + grid-row-end + grid-column-end 的简写。
值：
CSS 代码:
{: | / / / ;
}
示例：
作为为网格项分配名称的一种方法：
CSS 代码:
{:}
作为grid-row-start + grid-column-start + grid-row-end + grid-column-end 属性的简写形式
CSS 代码:
{:}
justify-self
沿着 inline（行）轴线对齐网格项（ 相反的属性是 align-self ，沿着 block（列）轴线对齐）。此值适用于单个网格项内的内容。
值：
start：将网格项对齐到其单元格的左侧起始边缘（左侧对齐）
-
end：将网格项对齐到其单元格的右侧结束边缘（右侧对齐）
-
center：将网格项对齐到其单元格的水平中间位置（水平居中对齐）
-
stretch：填满单元格的宽度（默认值）
CSS 代码:
{:;
}
示例：
CSS 代码:
{:;
}
CSS 代码:
{:;
}
CSS 代码:
{:;
}
CSS 代码:
{:;
}
要为网格中的所有网格项设置 行轴线(row axis) 线上对齐方式，也可以在 网格容器 上设置 justify-items属性。
align-self
沿着 block（列）轴线对齐网格项(grid items)（ 相反的属性是 justify-self ，沿着 inline（行）轴线对齐）。此值适用于单个网格项内的内容。
值：
start：将网格项对齐到其单元格的顶部起始边缘（顶部对齐）
-
end：将网格项对齐到其单元格的底部结束边缘（底部对齐）
-
center：将网格项对齐到其单元格的垂直中间位置（垂直居中对齐）
-
stretch：填满单元格的高度（默认值）
CSS 代码:
{:;
}
示例：
CSS 代码:
{:;
}
CSS 代码:
{:;
}
CSS 代码:
{:;
}
CSS 代码:
{:;
}
要为网格中的所有网格项设置 列轴线(column axis) 上的对齐方式，也可以在 网格容器 上设置 align-items属性。
place-self
place-self 是设置 align-self 和 justify-self 的简写形式。
值：
示例：
CSS 代码:
{:;
}
CSS 代码:
{:;
}
除 Edge 之外的所有主要浏览器都支持 place-self 简写属性。
动画（Animation）
根据 CSS Grid 布局模块 Level 1 规范，有 5 个可应用动画的网格属性：
grid-gap， grid-row-gap，grid-column-gap 作为长度，百分比或 calc。
-
grid-template-columns，grid-template-rows 作为长度，百分比或 calc 的简单列表，只要列表中长度、百分比或calc组件的值不同即可。
浏览器支持CSS网格属性
截至（2018年5月7日），在测试的几个浏览器中仅实现 (grid-)gap，(grid-)row-gap，(grid-)column-gap 的动画。
浏览器支持可设置动画的网格属性：
浏览器
| (grid-)gap,(grid-)row-gap,(grid-)column-gap |
grid-template-columns |
grid-template-rows |
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
相关推荐
Css常用的排序方式权重分配 排序方式： 1、按类型 如，显示和浮动、定位、尺寸、字体等 2、按字母 按字母顺序排列，优点是规则简单 3、按定义长度 按照样式定义的字符长度排列 各有优劣，实际应用中，推荐使用第一种。 但是如果单靠前端工程师在编写过程中这么做的
原文：https://www.cnblogs.com/wenruo/p/9732704.html 先上效果 基本是用CSS实现的，没有用图片，加一丢丢JS。不过没有考虑太多兼容性。 首先画一个 <!DOCTYPE html><html lang="en">
css属性：word-wrap:break-word; 与 word-break:break-all 的用法； zhangq0123 于 2016-10-19 11:06:12 发布 6475 收藏 9分类专栏： CSS HTML 文章标签： html css版权 CSS同时被 2 个专栏收录8 篇
https://destiny001.gitee.io/color/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l
css之background的cover和contain的缩放背景图 对于这两个属性，官网是这样解释的： contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 等比例缩放图象到垂直或者水平其中一项填满区域。 cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景
.CSS.MAP文件作用 https://blog.csdn.net/qq_36441169/article/details/102575563 1、简介在写前端代码，使用bootstrap时，发现同一个目录下，不仅仅有.css文件的同时，还存在.css.map文件的存在。在前端页面调试时也发现，映
Jquery mobile 写html时文字太长无法自动换行。 Jquery mobile 1 篇文章0 订阅 订阅专栏 加上这个 style="word-wrap:break-word;word-break:break-all;" 或者 style="word-wra
详见：http://www.shagua.wiki/project/3 layui图标：http://www.shagua.wiki/project/3?p=85 JQ手册 ：https://www.jc2182.com/jquery/jquery-jiaocheng.html css样式手册：ht
css里面圆形的代码,如何使用纯css实现圆形图像或叶子图像？（代码实例） 网易美学于 2021-08-03 22:15:22 发布946 收藏 文章标签： css里面圆形的代码 有没有想过如何制作那些各式各样的圆形图像而无需用ps，本篇文章就来给你介绍一下如
css文字超出一行就显示省略号 1，css超出一行用点表示 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 2，css超出二行用点表示 overflow:hidden; text-overflow:ellipsis; disp
js动态追加数据单独设置某一个元素的样式。 在开发时，我们有很多数据是从后台获取然后展示的，例如列表，最近开发碰到个需求是获取到列表信息之后，不仅仅是拼接展示出来，还需要将其中的第一个li元素设置成其他的样式类，在网上找了一堆的办法都和自身业务需求不一致，没办法自己通过chrome控制台一点点调试，
css3手机端h5商品列表页，两列等分排列技巧 .picture_list {	width: 100%;	overflow: hidden}.picture_list>li {	width: 50%; min-height: 120px;	float: left;	padding: 0px 3
css3 transform:scale(x)实现字体的缩放： css3 transform:scale(x)字体的缩放： transform:scale(x),针对于整体的缩放，缩放的整体包括宽，高，背景。这自然对于内联元素就无法使用此属性，最好使用无属性的span转换成块元素或者行内块元素进行设
jq获取第一个子元素并添加class <div class="main"> <div class="tit">颜色</div> <ul> <li>银色</li> <li>深灰色
设置背景图片的两种方式，并解决手机端背景图片高度自适应问题 赵世婷 2017-09-19 15:59:43 14372 收藏 5 1 设置背景图片的两种方式： 方式一： .back{undefinedposition: fixed;width: 100%;height: 100%
css层级选择器理论{#ek) E:first-child : 匹配的是E元素，E元素是父元素的第一个子元素 说明：利用 :first-child 这个伪类，只有当元素是另一个元素的第一个子元素时才能匹配。例如，p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素。一般可能
Css多行字符截取方法详解 时间：2021-07-01 10:21:17 相信有很多同学在写前端页面的时候，都会遇到字符长了需要截取的问题，最简单的方法就是手动去截取，可这样又感觉太low了，今天晚上就来讲讲利用css进行字符的截取，不了解css是如何截取的同学可以和我们一起看看哦！ 前言 最近在做
css中content可以用到的字符编码 项目中用到的一些特殊字符和图标 html代码 <div class="cross"></div> css代码.cross{width: 20px;height: 20px;border-radius: 10px;b
CSS 计算属性 calc()的完整指南(上） 2020-05-03 CSS tricks上有一系列的完整指南文章，我后面会翻译这些内容，更新不会一下子完成，而是会分成几个，防止自己因看到文章过长而放弃翻译，一步一个脚印。 CSS有一个特殊的calc()函数，用于做基本的数学运算。下面是一个例子：
