做网站放太多视频,惠山做网站公司,山西智能建站系统价格,wordpress百科网vip教程深入学习 CSS3 目前最强大的布局系统 Grid 网格布局
Grid 网格布局的基本认识
Grid 网格布局: Grid 布局是一个基于网格的二位布局系统#xff0c;是目前 CSS 最强的布局系统#xff0c;它可以同时对列和行进行处理#xff08;它将网页划分成一个个网格#xff0c;可以任…深入学习 CSS3 目前最强大的布局系统 Grid 网格布局
Grid 网格布局的基本认识
Grid 网格布局: Grid 布局是一个基于网格的二位布局系统是目前 CSS 最强的布局系统它可以同时对列和行进行处理它将网页划分成一个个网格可以任意组合不同的网格做出各种各样的布局
CSS 布局的过渡: CSS 一直用于对页面进行布局但一直都不是很完美 1.一开始我们使用 table 做布局然后转向浮动、定位以及 inline-block但所有这些方法本质上都是 Hack 的方式并且遗漏了很多重要的功能例如垂直居中 Hack 通常指的是一种快速、非标准或非预期的解决方案用于绕过某些限制或问题2. 随着 CSS3 的引入特别是 Flexbox 和 Grid 布局的出现网页布局变得更加直观和灵活减少了对这些 “Hack” 方法的依赖Flexbox 和 Grid 提供了更强大的布局控制解决了许多历史遗留的布局问题如垂直居中、响应式设计等 3. Flexbox 在一定程度上解决了这些问题但它的目的是为了更简单的一维布局而不是复杂的二维布局 4. Flexbox 布局是轴线布局只能指定 项目 针对轴线的位置可以看作是一维布局 → 而 Grid 布局则是将容器划分成 行 和 列产生单元格然后指定 项目所在 的单元格可以看作是二维布局Grid 布局远比 Flex 布局强大 5. Grid 布局是第一个专门为解决布局问题而生的 CSS 模块
术语: 在深入了解网格的概念之前我们需要了解一些重要的术语 1. 网格容器与项目 容器Container: 设置了 display: gird / inline-grid 的元素就称之为网格容器grid container 项目Item: grid 容器中的直接子元素就为网格项目grid item .container {display: gird
}下面的 .container 元素就为网格容器grid container所有的直接子元素 .item 就为该网格容器的一个个项目grid item
div classcontainerdiv classitem/div div classitemp classsub-item/p/divdiv classitem/div
/div2. 行和列: 容器里面的水平区域称为 行row,垂直区域称为 列column 3. 单元格: 行和列的交叉区域称为 单元格cell 4. 网格线: 划分网格的线称为网格线grid line水平网格线划分出行垂直网格线划分出列
Grid 网格布局的使用
Grid 网格布局的属性主要分为两类: 一类定义在容器上面称为容器属性另一类定义在项目上面称为项目属性
容器属性
display: 将元素定义为 grid contaienr并为其内容建立新的网格格式化上下文(grid formatting context) grid - 生成一个块级 (block-level) 网格 inline-grid - 生成一个行级 (inline-level) 网格 subgrid - 如果你的 grid container 本身就是一个 grid item即,嵌套网格你可以使用这个属性来表示你想从它的父节点获取它的行/列的大小而不是指定它自己的大小 .container {display: grid | inline-grid | subgrid;
}tip: 注意column, float, clear, 以及 vertical-align 对一个 grid container 没有影响即设置这些属性了也无效
grid-template-columns / grid-template-rows: 划分行和列使用空格来分隔的多个值来定义网格的列和行 grid-template-columns: - 属性定义每一列的列宽 grid-template-rows: - 属性定义每一行的行高 .container {display: grid; /* 定义网格布局 */grid-template-rows: 100px 100px 100px; /* 定义每一行行高 */grid-template-columns: 100px 100px 100px; /* 定义每一列列宽 */
} 上面代码指定了一个三行三列的网格列宽和行高都为 100px.item {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;border: 1px solid white;background-color: orange;color: white;
}bodyspanH/spandiv classcontainerdiv classitem1/divdiv classitem2/divdiv classitem3/divdiv classitem4/divdiv classitem5/divdiv classitem6/divdiv classitem7/divdiv classitem8/divdiv classitem9/div/divspanH/span
/bodyrepeat(count,any-value): - 有时候重复写同样的值非常麻烦尤其网格很多时 → 这时可以使用repeat()函数简化重复的值 通过 repeat 函数来简化上面的写法
.container {display: grid;grid-template-rows: repeat(3, 100px);grid-template-columns: repeat(3, 100px);
}auto-fill 关键字: - 有时单元格的大小是固定的但是容器的大小不确定 → 如果希望每一行或每一列容纳尽可能多的单元格这时可以使用 “auto-fill” 关键字表示自动填 .container {display: grid;grid-template-columns: repeat(auto-fill, 100px); /* 具体多少列根据容器大小自动划分每列列宽 100px */grid-template-rows: repeat(3, 100px);
} 下图列数只是某一容器大小的示例图并非所有具体列数根据对应的容器大小与列宽有关auto-fit 关键字: - 该关键字与上面的 auto-fill 的行为基本是相同的都会尽可能的生成更多的列或行但是两者也存在一点区别 auto-fill 不管单元格是否中是否有元素都会生产对应单元格的空间 auto-fit 则是如果单元格中没有元素时会将对应的列宽收缩为 0 上面文字描述起来可能比较抽象如下两图示例为了更好的展示对应的区别先将上面单元格的数量缩减成 3 个先 可以理解为 auto-fill 会尽可能的沾满容器空间所以可能会存在一些空单元格 → 而 auto-fit 不会因为容器还有剩余宽度而进行生成更多的单元格而是会收缩网格只生成对应有内容的单元格 - 常用 fr 关键字: - 网格布局提供了fr关键字fraction 的缩写意为片段该关键字可以更方便的定义单元格之间的比例关系 如下三列宽分别为 1fr 2fr 3fr 时就表示第二项是第一项的两倍第三项就是第一项的三倍 minmax(min,max): - 该函数可以生成一个长度范围表示长度在这个范围之中 如 minmax(300px, 1fr) 就表示列宽不小于 300px不大于 1fr auto 关键字: - 该关键字表示长度由浏览器进行决定也可以理解为默认会自动吸收对应容器的剩余长度当然如果对应单元格元素设置了 min-width/max-width 当达到对应的最值时对应的效果可能就会有些出入 auto / fr / minmax: - 该三个对应的功能都比较类似都会自动吸收容器的剩余空间但如果同时存在时也会有对应的优先级与对应需要注意的问题 优先级: - minmax 优先级大于 frfr 的优先级tip: - 为了保证最小空间网格可能会超出容器元素的范围auto 的最小宽度为 fit-content即内容宽度 网格线的名称: - grid-template-columns 属性和 grid-template-rows 属性里面还可以使用方括号指定每一根网格线的名字后面网格项目item可以使用对应的网格线名称可以更加方便将项目元素布局到对应想要的位置上网格项目中具体如何使用后面网格项目属性讲到时再进行演示 .container {display: grid;grid-template-columns: [col-1] 100px [col-2] auto [col-3] 100px [col-4];grid-template-rows: [row-1] 100px [row-2] 100px [row-3] 100px [row-4];
}gap / row-gap / column-gap : 用来设置行与行之间的间隔行间距与列与列的间隔列间距 普通写法{row-gap: 设置行与行之间的间隔行间距; column-gap: 设置列与列之间的间隔列间距; } 我们也可以上面两个属性的简写属性 gap 来快速设置对应的间隔: gap: row-gap column-gap{gap: 行间距 列间距;} 当行间距与列间距相同时我们也可以只需写一个值{gap: 行列间距;}.container {...row-gap: 12px; /* 设置行间距 */column-gap: 12px; /* 设置列间距 */
}grid-auto-flow: 用于指定网格中项目的放置流向放置顺序值通常为 row先行后列 或 column先列后行默认为 row 即先行后列 → 基本效果如下示例图 grid-auto-flow 属性除了可以设置成 row 和 column还可以设置成 row dense 和 column dence第二个值主要用于某些项目在指定完位置后剩下的项目怎么放置如: 先行后列并且尽可能紧密填满 → 文字描述可能会比较抽象我们可以通过下面几张图来进行理解
grid-template-areas: 网格布局中允许通过该属性来指定一些区域area每一个区域由一个或多个单元格组成 {grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);grid-template-areas:a b cd e fg h i;
}例1: 如上述代码就相当于给网格划分出 9 个单元格人后然后将其定名为 a-i 的九个区域分别对应这九个单元格{grid-template-areas: a a ab b bc c c;
}例2: 上面代码将 9 个单元格分成 a、b、c 三个区域{grid-template-areas: a . cd . fg . i;
}例3: 如果某些区域不需要利用则使用 点.表示grid-template-areas: header header headermain main sidebarfooter footer footer;例4: 上面代码中顶部是页眉区域 header底部是页脚区域 footer中间部分则为 main 和 sidebar作用: - 当在网格容器中划分好对应的区域后我们可以在子元素网格项目中通过 grid-area 属性来对某一个网格项目快速的放置到对应的区域中具体图例演示在后面项目属性 grid-area 中进行更加直观的示例 tip: - 需要注意区域的命名会影响到网格线每个区域的起始网格线会自动命名为 区域名-start终止网格线会自动命名为 区域名-end
place-items / justify-items / align-items: 这些属性用于设置单元格中元素的摆放位置justify-items 水平方向align-items 垂直方向place-items 前面两个的简写方式 属性值: 左 中 右 拉伸
.container {justify-items: start | end | center | stretch;align-items: start | end | center | stretch;place-items: align-items justify-items; /* 简写: 如果只写一个值时将会认为这两个值相等 */
} 对应属性值的作用及对应 justify-items 示例图:- start - 对齐单元格的起始边缘- end - 对齐单元格的结束边缘- center - 单元格内部居中- stretch - 拉伸占满单元格的整个宽度默认值 → 当元素没有指定具体的大小时place-content / justify-content / align-content: 这些属性用于定义整个网格区域在容器元素的摆放位置justify-content 水平方向align-content 垂直方向place-content 前面两个的简写方式 属性值: 这些属性值跟 flex 布局中的基本一致
.container {justify-content: start | end | center | stretch | space-around | space-between | space-evenly;align-content: start | end | center | stretch | space-around | space-between | space-evenly; place-content: align-content justify-content; /* 简写: 如果只写一个值时将会认为这两个值相等 */
} 对应属性值的作用及对应 justify-content 示例图:- start - 对齐容器的起始边框默认- end - 对齐容器的结束边框- center - 容器内部居中- stretch - 项目大小没有指定时拉伸占据整个网格容器即没有通过 grid-template-columns / grid-template-rows 指定对应列宽或行高时- space-around - 每个项目两侧的间隔相等。所以项目之间的间隔比项目与容器边框的间隔大一倍- space-between - 项目与项目的间隔相等项目与容器边框之间没有间隔两端对齐- space-evenly - 项目与项目的间隔相等项目与容器边框之间也是同样长度的间隔grid-auto-rows / grid-auto-columns: 用于指定一些自动生成的行和列对应的行高与列宽如: 当一个网格是三行三列的但里面某一个网格项目指定在第 5 行等等此时网格就会自动生成一些行或列 → 或在一个三行三列的网格中只有 9 个单元格但网格中的元素却超出了九个时此时也会自动生成一行或列→ 这些自动生成的行或列对应的行高或列宽是 fit-content 适应内容的 → 而该两个属性就是用来指定一些自动生成的行或列对应的行高与列宽的 如下示例: 在一个三行三列的网格容器中有十个子元素 → 因为网格单元格不够就会自动生成一行我们可以通过 grid-auto-row 属性来指定对应自动生成行的行高列同理 .container {gap: 6px;display: grid;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);grid-auto-rows: 100px; /* 指定自动生成的行的行高大小 */
}grid-template / grid:
grid-template: - 该属性为 grid-template-columns 、grid-template-rows 和 grid-template-areas 这三个属性的简写形式grid: - 该属性为 grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns 和 grid-auto-flow 这六个属性的简写形式tip: - 从易读易写的角度考虑还是建议不要合并属性所以这里就不详细介绍这两个属性了
项目属性
grid-row-start / grid-row-end / grid-column-start / grid-column-end : 1用于定义某个网格项目的的位置通过指定项目的四个边框分别定位在哪根网格线上 如下: 将第一个网格项目的网格项的行和列都在对应行或列的 1 到 3 网格线上
.item1 {grid-row-start: 1; /* 定义项目行开始线 */grid-row-end: 3; /* 定义项目行结束线 */grid-column-start: 1; /* 定义项目列开始线 */grid-column-end: 3; /* 定义项目列结束线 */
}2这四个属性的值除了指定为第几个网格线还可以指定为网格线的名字 .container {width: 400px;display: grid;gap: 6px;/* 给网格容器对应的网格线命名 */grid-template-columns: [column-1] 100px [column-2] 100px [column-3] 100px;grid-template-rows: [row-1] 100px [row-2] 100px [row-3] 100px;
}/* 通过命名网格线来指定 item1 对应的放置位置 */
.item1 {grid-row-start: row-1;grid-row-end: row-3;grid-column-start: column-1;grid-column-end: column-3;
}3在该四个属性上也可以使用 span 关键字 来表示跨越多少个网格↓ {grid-row-start: span 所要跨越的网格个数;grid-column-start: span 3; /* 如: 表示该项目在列上跨越 3 个单元格 */
}grid-row / grid-column: 该两个属性为上面 grid-row-start / grid-row-end / grid-column-start / grid-column-end 属性的简写形式 .item {grid-column: start-line / end-line;grid-row: start-line / end-line;
} 该两个属性只是上面的简写形式所以具体就不做过多的演示了grid-area: 属性用于指定项目放在哪一个区域来快速放置对应项目到指定的位置上具体网格区域的定义方式参照前面
我们可以通过在网格容器上定义好对应的区域在在对应的网格项目上通过该属性来指定项目所要放置的位置从而实现快速的实现想要的布局效果如下 ↓
place-self / justify-self / align-self: 这些属性用于设置单元格内容的摆放位置justify-self 水平方向align-self 垂直方向place-self 前面两个的简写方式 tip: 该三个属性与前面容器属性中 place-items / justify-items / align-items 的作用一样不同的容器属性设置会作用在所有的单元格上而该项目属性slef只作用于某个项目上单元格 .item {justify-self: start | end | center | stretch;align-self: start | end | center | stretch;
}因为前面容器属性 justify-items 上已经解释了每个属性值的含义了所以这里就不再过多的解释每一个属性值了其它属性补充 z-index: 如果单元格中的元素与其它单元格元素出现层叠是可以通过该属性来指定对应的层叠顺序与 position 层叠同理 例如: 因为元素的大小可以跟单元格的大小无关即元素可以指定比单元格更大的大小所以就有可能会超出到其它的单元格上 → 与其它单元格元素产生了层叠 order: 属性规定了弹性容器中的可伸缩项目在布局时的顺序flexbox该属性再网格布局中同样适用值越小越布局顺序越靠前如下示例图
