上海到北京飞机几小时,vps wordpress mysql优化,wordpress插件 幻灯片,wordpress 分类编号当前内容所在位置#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.7 本章小结 ✔️ 文章目录 5.6 对齐相关的属性 Alignment properties5.7 本章小结 Summary 《CSS in Depth》新版封面
5.6 对齐相关的属性 Alignment properties
网格布局模块规范里的对齐属性有一些与 Flexbox 相同还有一些则是新属性。上一章介绍 Flexbox 布局时已经涵盖了其中大部分内容这一节就来看看这些属性在网格布局中的用法。想要对网格布局的各个方面做进一步控制了解这些属性或许会方便很多。
CSS 给网格布局提供了三个以 justify- 开头的对齐属性justify-content、justify-items 以及 justify-self。它们控制了网格元素在水平方向上的位置。我是这样记的就像在文字处理器里调整文字位置让它们在水平方向上排布。
此外还有三个以 align- 开头的对齐属性align-content、align-items 以及 align-self。它们控制了网格元素在垂直方向上的位置。我是通过类比 行内对齐inline alignment 中的 vertical-align 属性来记住它们的。这些属性如图 5.22 所示。 图 5.22 网格内的对齐属性
要设置网格容器内的网格轨道在水平和垂直方向上的位置可以使用 justify-content 和 align-content 属性实现尤其是在网格元素的尺寸无法填满网格容器的时候。参考以下样式代码
.grid {display: grid;height: 1200px;grid-template-rows: repeat(4, 200px);
}这段代码明确设置了网格容器的高度为 1200px但水平网格轨道的有效总高度仅为 800px网格轨道在剩下那 400px 的空间内如何分布可以通过 align-content 属性进行设置。该属性可以设为下列有效值
start —— 将网格轨道放在网格容器的 左上方top/left。end —— 将网格轨道放在网格容器的 右下方bottom/right。center —— 将网格轨道放在网格容器的 中间in the middle。stretch —— 网格轨道 拉伸 至填满网格容器。space-between —— 将剩余空间 平均分配 到每个网格轨道之间将覆盖任何 gap 设置。space-around —— 将空间均布到每个网格轨道间且在两端各加上 一半 的间距。space-evenly —— 将空间均布到每个网格轨道间且在两端各加上 同等大小 的间距。
想了解更多对齐属性justify/alignment properties的示例请访问 https://gridbyexample.com/。Grid by Example 是一个极好的网站资源里面汇集的大量网格布局示例都是由开发者兼 W3C 成员的 Rachel Andrew 大佬精心整理而成。
最后再来聊聊与定位相关的简写属性place-content、place-items 以及 place-self。这些属性可以同时声明带 align-* 和 justify-* 前缀的属性值例如place-content: center start 等效于 align-content: center; justify-content: start。
因为网格布局的内容非常多所以本章介绍的内容都是网格布局必须掌握的核心概念。建议您对网格布局做更多探索试验。网格有很多种组合方式无法在一章里逐一介绍因此您需要自我挑战一下去尝试一些新事物。在遇到一个有趣的网页布局时看看能否用网格布局来实现。 译注 关于水平方向对齐的那三个 justify 开头的属性作者提供的记忆方式可能有点抽象这里略作补充。所谓的“文字处理器”可以将其理解为微软旗下的办公软件 Word。它在对齐一行文本的时候使用的术语就是 justify。根据上海译文出版社 2000 年 12 月出版的《新英汉词典》世纪版这个单词在印刷行业中的原意为“调整铅字的间隔使齐行”。对照如下图所示的 Word 中英双语提示信息可以进一步加深理解这也是设置文字两端对齐的快捷键选择 Ctrl J 的根本原因 补图1 微软办公软件 Word 就文字对齐给出的双语对照注释 5.7 本章小结 Summary
网格Grid定义了一套基于行与列的页面布局在元素定位时实现了各元素间的相互关联。网格布局与 Flexbox 布局相辅相成共同构成了一套完整的布局系统。网格布局中对同一元素定位有三种实现方案分别对应三类写法网格线编号、命名网格线、以及命名网格区域。可以根据实际的布局需求任选一种对您而言最直观的解决方案。auto-fill/auto-fit 以及隐式网格的定位在布局大量或未知数量的网格元素时效果尤为显著。相比普通网格仅对单一父子结构生效的功能设定子网格可以在深度嵌套的 DOM 结构下轻松实现元素间更深层次的对齐。Flexbox 布局中相同的对齐属性alignment properties也同样适用于网格布局。 关于《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 版高分译文专栏全网首发精译精校持续更新计划今年内完成全书翻译敬请期待
