多用户建站系统源码,正邦设计公司简介,建设网站联系方式,怎么让某个关键词排名上去当前内容所在位置#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.2 网格结构剖析 译者按 上一节我们通过一个 2行 × 3列 的简单网格了解了网格布局中的两个核心概念 —— 网格容器grid container和网格元素grid items并认识了一个新的尺寸单位 fr表示 fraction unit即分数单位。这一节作者将结合上一章 Flexbox 布局使用的示例页对网格布局的结构进行抽丝剥茧的深入讲解一起来看看吧由于内容相对较多拟分为上篇、下篇两个部分发表本篇为上篇。 5.2 网格结构剖析
了解网格的各个部分非常重要。前面已经学习了 网格容器 和 网格元素它们是网格布局的基本要素。还有四个重要概念如图 5.3 所示
网格线grid line网格线构成了网格的框架结构分水平网格线和垂直网格线两种分别位于某行或某列的任意一侧。如果指定了间隙 gap那间隙就在网格线上。网格轨道grid track它是两条相邻网格线之间的空间。网格可以有多个水平轨道多行以及多个垂直轨道多列。网格单元grid cell它是网格上的一块单独空间是水平和垂直网格轨道交叉重叠的部分。网格区域grid area它是网格上的矩形区域由一个或多个网格单元组成该区域位于两条垂直网格线和两条水平网格线之间。 图 5.3 网格的组成部分
构建网格布局时会涉及到这些组成部分。例如声明 grid-template-columns: 1fr 1fr 1fr 就能定义三个等宽且垂直的 网格轨道同时还定义了四条垂直的的 网格线一条位于网格的最左边另外两条位于每个网格轨道之间还有一条则位于网格的最右边。
上一章我们用 Flexbox 构建过一个示例页。不妨再回过头去看看当时的设计考虑一下该怎样用网格布局再来实现一版。总体设计如图 5.4 所示虚线标出了每个网格单元的位置。注意某些区域跨越了好几个网格单元即填充了更大的 网格区域。 图 5.4 用网格创建的网页布局效果图。虚线标出了每个网格单元的位置
上面的网格布局包含四行两列其中前两个水平网格轨道分别是页面标题Ink部分和主导航菜单部分。主区域填满了第一个垂直轨道剩余的两个网格单元而侧边栏的两个板块则分置于第二个垂直轨道剩余的两个网格单元内。 说明 布局设计无需填满每一个网格单元。在想留白的地方空出对应的网格单元即可。 使用 Flexbox 布局时必须按照一定的方式去嵌套元素。第 5 章我们先用 Flexbox 定义了两列然后在右侧边栏嵌套了另一个 Flexbox 来定义两个子板块所在的行详见代码清单 5.1。要用网格实现同样的布局效果就得改改页面的 HTML 结构将嵌套的 HTML 拉平使得放置在网格内的每个页面元素都必须是主网格容器main grid container的子元素。新的 HTML 标记如代码清单 5.3 所示。创建一个新页面并按以下代码更新页面内容或者直接修改第五章中的示例页。
代码清单 5.3 网格布局对应的 HTML 结构
bodydiv classcontainer!-- 这里的“容器”即网格容器 --header!-- 每个网格元素都必须是网格容器的子元素 --h1 classpage-headingInk/h1/headernav!-- 每个网格元素都必须是网格容器的子元素 --ul classsite-navlia href/Home/a/lilia href/featuresFeatures/a/lilia href/pricingPricing/a/lilia href/supportSupport/a/lili classnav-righta href/aboutAbout/a/li/ul/navmain classmain tile!-- 每个网格元素都必须是网格容器的子元素 --h1Team collaboration done right/h1pThousands of teams from all over theworld turn to bInk/b to communicateand get things done./p/maindiv classsidebar-top tile!-- 每个网格元素都必须是网格容器的子元素 --form classlogin-formh3Login/h3plabel forusernameUsername/labelinput idusername typetextnameusername//pplabel forpasswordPassword/labelinput idpassword typepasswordnamepassword//pbutton typesubmitLogin/button/form/divdiv classsidebar-bottom tile centered stack!-- 每个网格元素都必须是网格容器的子元素 --smallStarting at/smalldiv classcostspan classcost-currency$/spanspan classcost-dollars20/spanspan classcost-cents.00/span/diva classcta-button href/pricingSign up/a/div/div
/body新版页面将所有内容区域都变成了网格元素标题、菜单nav、主区域外加两个侧边栏。主区域和两个侧边栏都加上了 tile 样式类因为它们都是白色背景也有相同的内边距。
接着对新页面应用网格布局并将各部分内容指定到对应区域。稍后我们将基于第五章的这版示例页引入大量新的样式现在不妨先看看网格生效后的页面渲染情况如图 5.5 所示。 图 5.5 基础网格布局生效后的示例页效果图
然后新建一张样式表并关联到该页面。样式内容如代码清单 5.4 所示
代码清单 5.4 最外层设置的网格布局样式
*,
::before,
::after {box-sizing: border-box;
}:root {--gap-size: 1.5rem;
}body {background-color: #709b90;font-family: Helvetica, Arial, sans-serif;
}.stack * * {margin-block-start: 1.5em;
}.container {display: grid;grid-template-columns: 2fr 1fr; /* 定义两个垂直的网格轨道 */grid-template-rows: repeat(4, auto); /* 定义四个大小为 auto 水平网格轨道 */gap: var(--gap-size);max-inline-size: 1080px; margin-inline: auto;
}header,
nav {grid-column: 1 / 3; /* 垂直网格线从1号线跨越至3号线 */grid-row: span 1; /* 恰好跨越一条水平轨道 */
}.main {/* 将其他网格元素定位到不同的网格线之间 */grid-column: 1 / 2;grid-row: 3 / 5;
}.sidebar-top {/* 将其他网格元素定位到不同的网格线之间 */grid-column: 2 / 3;grid-row: 3 / 4;
}.sidebar-bottom {/* 将其他网格元素定位到不同的网格线之间 */grid-column: 2 / 3;grid-row: 4 / 5;
}.tile {padding: 1.5em;background-color: #fff;
}.tile :first-child {margin-top: 0;
}这段样式代码引入了很多新的写法下面来逐个击破——
首先对 .container 设置了网格容器并用 grid-template-columns 和 grid-template-rows 定义了网格轨道。因为列的分数单位分别为 2fr 和 1fr所以第一列的宽度是第二列的两倍。定义行的时候用到了一个新方法即 repeat() 函数用于简化多个网格轨道的声明。
声明 grid-template-rows: repeat(4, auto) 定义了四个高度为 auto 的水平网格轨道。这种写法相当于声明 grid-template-rows: auto auto auto auto 。轨道大小指定为 auto表示轨道尺寸将根据自身内容进行调整。
repeat() 简化表示法还可以用来定义不同的重复模式比如 repeat(3, 2fr 1fr) 会重复三遍 2fr 1fr从而定义出六个网格轨道重复的结果为 2fr 1fr 2fr 1fr 2fr 1fr效果如图 5.6 所示。 图 5.6 在网格模板定义里使用 repeat() 函数定制重复模式示意图
还可以将 repeat() 作为更长的模式的一部分进行简化。例如grid-template-columns: 1fr repeat(3, 3fr) 1fr 定义了一个 1fr 宽的列后面是连续三个宽度为 3fr 的列最后又是一个宽 1fr 的列即 1fr 3fr 3fr 3fr 1fr。不难发现完整版的模板定义乍一看未必直观因此才有了 repeat() 这样的简化写法。
