高校财务网站建设,如何将网站上传到空间,it外包公司好不好,闽清网站建设当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 第一章 层叠、优先级与继承#xff08;已完结#xff09; 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位#xff08;已完结#xff09; 2.1 相对… 当前内容所在位置可进入专栏查看其他译好的章节内容 第一章 层叠、优先级与继承已完结 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位已完结 2.1 相对单位的威力2.2 em 与 rem2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高2.6 自定义属性2.7 本章小结 第三章 文档流与盒模型已完结 3.1 常规文档流3.2 盒模型3.3 元素的高度3.4 负的外边距3.5 外边距折叠3.6 容器内的元素间距问题3.7 本章小结 第四章 Flexbox 布局已完结 4.1 Flexbox 布局原理4.2 弹性子元素的大小4.3 弹性布局的方向4.4 对齐、间距等细节处4.5 本章小结 第五章 网格布局 ✔️ 5.1 构建基础网格已完结5.2 网格结构剖析 上 5.2.1 网格线的编号下5.2.2 网格与 Flexbox 配合下 5.3 两种替代语法已完结 5.3.1 命名网格线5.3.2 命名网格区域 5.4 显式网格与隐式网格上 5.4.1 添加变化 中5.4.2 让网格元素填满网格轨道下 5.5 子网格全新增补内容 ✔️5.6 对齐相关的属性 文章目录 5.5 子网格布局 Subgrid5.5.1 子网格的其他配置项 Additional options 《CSS in Depth》新版封面 译者按 学完 CSS 网格布局中的隐式网格Implicit grid这一节又迎来了一个非常实用的知识点子网格subgrid。本节内容在 6 年前发行第 1 版时仅以一小段文字说明草草带过。经历了 6 年的技术沉淀作者在第 2 版中索性另起一节通过一个具体的案例将子网格近年来的主流用法与最佳实践融入进来最后还顺便提了一下尚在试验阶段的一个 CSS 新特性砖石布局。窃以为这才是前端开发人员最应具备的职业素养紧跟世界一流水平熟悉业内最佳实践只啃原汁原味的第一手资料。一起来先睹为快吧 5.5 子网格布局 Subgrid
在前面的示例中网格布局都只作用于 DOM 结构的两个层级一是网格容器二是其直接子元素。而对于某些设计可能需要在更大层级范围内实现元素对齐。例如要对齐同一祖先元素内的两个子元素或者对它们设置相同的大小。这类设计的一个示例效果如图 5.19 所示 图 5.19 内部元素对齐的多张卡片布局效果
上述样式设计中多张卡片都位于同一个网格内因此水平方向排列整齐高度也都相同。不仅如此不同卡片的内部元素也实现了相互对齐标题较短的两张卡片通过增加顶部空间来与长标题那张对齐每张卡片的正文段落相互间也实现了首行水平对齐“Read more”即“”字样的超链接部分则实现了底边水平对齐。
要实现上述效果最佳方案是利用一种全新的 CSS 特性称为 子网格subgrid。有了子网格一个网格不仅能放入另一个网格其网格元素还能放置在外层网格的网格线上。本例中每张卡片都占据了三行网格空间并且各自的内容都与其对应的行相互对齐。图 5.20 高亮标出了参与页面布局的网格及其网格间隙。 图 5.20 高亮标注的网格线与网格间隙效果图
这时就能看清卡片本身及其内部元素在同一个网格布局里进行定位的全过程了。 说明 图 5.20 是页面在 Firebox 浏览器中显示、并通过开发者工具 DevTools 标注出网格行的效果截图。在大多数浏览器中想要调试出类似的网格效果只需要打开检查面板Inspector pane然后找到目标元素旁边一个小小的“grid”字样的标签单击它即可。Flexbox 布局也支持类似的功能。 需要注意的是子网格当前还是 CSS 新出的一个功能特性并不像网格那样得到广泛支持。虽然子网格出现在 Firefox 及 Safari 浏览器中已经有些时日了但 Chrome 和 Edge 浏览器也是到 2023 年底才对该特性予以支持。关于子网格在浏览器中的最新支持情况请参阅https://caniuse.com/css-subgrid。
下面来演示上述布局的构建过程。首先创建一个新页面并根据代码清单 5.12 更新页面 HTML 标记
代码清单 5.12 三张作者信息卡片的网格布局 HTML 代码
!doctype html
html langen-US
headlink hrefstyles.css relstylesheet typetext/css /
/head
bodydiv classauthor-bios!-- 主网格容器 --div classcard!-- 卡片元素 --h3Sir Arthur Ignatius Conan Doyle/h3divpA British writer and physician who createdthe fictional detective Sherlock Holmes./p/divdiv classread-morea href/conan-doyleRead more/a/div/divdiv classcard!-- 卡片元素 --h3Mark Twain/h3divpAn American author famous for iTheAdventures of Tom Sawyer/i andiAdventures of Huckleberry Finn/i.He has been called “the father ofAmerican literature.”/p/divdiv classread-morea href/mark-twainRead more/a/div/divdiv classcard!-- 卡片元素 --h3Homer/h3divpAuthor of the Greek epic poems iTheIliad/i and iThe Odyssey/i./p/divdiv classread-morea href/homerRead more/a/div/div/div
/body
/html如以上代码所示实现该布局需要重点处理好这三个层级的 DOM 元素对齐
主网格容器即 div classauthor-bios 元素各网格元素即三个 div classcard 元素卡片各自的子元素。
先来处理基础样式包括背景色、间距、以及用于放置卡片的最顶层网格如代码清单 5.13 所示。其中的样式可能除了个别网格声明还有点陌生如果您正在熟悉网格布局以外其他大部分样式应该都已经很熟悉了
代码清单 5.13 对作者卡片设置网格布局的样式代码
body {background-color: #eee;font-family: Helvetica, Arial, sans-serif;
}.author-bios {display: grid; /* 声明网格容器 */grid-template-columns: repeat(3, 1fr); /* 定义容器中的三个等宽网格列 */gap: 1em;max-inline-size: 800px;margin-inline: auto;
}.card {padding: 1rem;border-radius: 0.5rem;background-color: #fff;
}.card h3 {margin-block: 0;padding-block-end: 0.5rem;border-block-end: 1px solid #eee;
}.read-more {margin-block-start: 1em;text-align: right;
}以上样式生效后三张卡片就会在水平方向一字排开看上去已经非常接近最终效果了如图 5.21 所示。之后就剩子网格的具体设置了。 图 5.21 子网格生效前三张作者信息卡的对齐效果图
要在页面中添加子网格必须先在网格元素中声明 display: grid这样就在外层网格中创建了一个内部网格。接着在该内部网格的 grid-template-rows 和/或 grid-template-columns 中使用关键字 subgrid表示其使用的应该为父网格的网格线。
相关 CSS 样式如代码清单 5.14 所示。请将以下样式更新到本地样式表
代码清单 5.14 为卡片内容设置子网格的样式代码
.card {display: grid; /* 设置该卡片为网格容器 */gap: 0;grid-row: span 3; /* 令卡片横跨三行 */grid-template-rows: max-content auto max-content; /* 为不支持子网格的浏览器设置回退方案指定网格行尺寸 */grid-template-rows: subgrid; /* 使用父网格的网格行 */padding: 1rem;border-radius: 0.5rem;background-color: #fff;
}.card h3 {align-self: end; /* 令标题内容对齐到网格行的底部 */margin-block: 0;padding-block-end: 0.5rem;border-block-end: 1px solid #eee;
}鉴于子网格仍是 CSS 一个较新的功能特性这里特地为 grid-template-rows 提供了一套回退方案来效仿子网格的行为特征该方案只能将三个“Read more”链接相对网格底边统一对齐无法让标题部分相对各自的底边对齐。还有一种备选方案是将这些样式放到 CSS 特性查询语法中检测当前环境对子网格的支持情况例如supports (grid-template-rows: subgrid) {…}。 译注 关于上述回退方案的实际效果原书一笔带过。这里觉得有必要配一张截图方便与子网格的实际对齐效果进行比较 补图1当浏览器不支持子网格功能、备选回退方案生效时的页面效果 本例演示了关键字 subgrid 将元素对齐到父网格行的具体方法您也可以声明 grid-template-columns: subgrid 让元素根据父网格的列对齐甚至同时对行与列对齐。此外还可以在 DOM 树中延续这种写法将子网格嵌套进另一个子网格中。
5.5.1 子网格的其他配置项 Additional options
子网格中的网格线编号、网格线名称以及网格区域名称均从父网格中继承而来因此可以利用它们在子网格中放置元素。例如以下样式会将所有卡片标题放在第二行
.card {grid-template-rows: subgrid [line1] [line2] [line3] [line4];
}以上这些命名网格线与前面 5.3.1 小节介绍的一样它们的含义及用法与在普通网格上定义的网格线均相同。例如声明 grid-row: line3 / line4 会将元素放置在第 3 条和第 4 条水平网格线之间的子网格中。 注意 未来可能出现的一个新网格特性功能叫做 砖石布局masonry layout译注发音为 /ˈmeɪsənri/。它是一种在相册场景下非常流行的布局方式但需要借助 JavaScript 才能实现其效果。在砖石布局中网格元素被放置在一系列宽度相等的网格列中并且允许网格元素根据自身内容决定其高度因此网格行不一定对齐。具体情况可以参考维也纳前端开发者 Manuel Matuzović 发表的这篇概述Day 72: the masonry-auto-flow property 译注 为方便查阅特将 5.3.1 节介绍命名网格线时自行补充的网格布局效果展示如下 补图2 除了最后一条水平网格线其余都被命名为 “row” 对应的样式设置如下详见 5.3.1 节命名网格线 .container {
display: grid;
grid-template-columns:/* 分别给每条垂直网格线命名 */[left-start] 2fr[left-end right-start] 1fr[right-end];
/* 将水平网格线命名为 row */
grid-template-rows: repeat(4, [row] auto);
gap: var(--gap-size);
max-inline-size: 1080px;
margin-inline: auto;
}header,
nav {
grid-column: left-start / right-end;
grid-row: span 1;
}.main {
grid-column: left; /* 跨越 left-start 到 left-end 之间的区域 */
grid-row: row 3 / span 2; /* 从第三个命名网格线 row 开始放置元素并跨越两个网格轨道 */
}.sidebar-top {
grid-column: right; /* 跨越 right-start 到 right-end 之间的区域 */
grid-row: 3 / 4;
}.sidebar-bottom {
grid-column: right; /* 跨越 right-start 到 right-end 之间的区域 */
grid-row: 4 / 5;
}此外关于上面提到的 砖石布局也可以参考 MDN 的 线上官方文档这里只补充其中一个示例效果图 补图3 MDN 官方文档给出的一个砖石布局效果图 关于《CSS in Depth》中译本书名《深入解析 CSS》 第 1 版第 2 版读者评分原版4.7亚马逊中文版9.3豆瓣原版5.0亚马逊中文版暂无待出版出版时间原版2018 年 3 月中文版2020 年 4 月原版2024 年 7 月中文版暂无待出版原价原版$44.99中文版139.00原版$59.99中文版暂无待出版现价原版$36.49中文版52.54 起步原版$52.09中文版暂无待出版原版国内预订起步价 461.00起步价 750.00
本专栏为该书第 2 版高分译文专栏全网首发精译精校持续更新计划今年内完成全书翻译敬请期待
