海口网站建设中心专业网站开发设计

当前位置： 首页 > news >正文

海口网站建设中心,专业网站开发设计,做网站的用什么软件呢,全国100个最缺工职业Grid布局 前言一、认识Grid1.1容器和项目1.2行和列1.3单元格和网格线 二、容器属性2.1.grid-template-columns与grid-template-rows属性2.1.1 直接使用长度单位比如px2.1.2 使用百分比 %2.1.3 使用repeat函数2.1.4 按比例划分 fr 关键字2.1.5 自动填充 auto 关键字2.1.6 最大值… Grid布局 前言一、认识Grid1.1容器和项目1.2行和列1.3单元格和网格线 二、容器属性2.1.grid-template-columns与grid-template-rows属性2.1.1 直接使用长度单位比如px2.1.2 使用百分比 %2.1.3 使用repeat函数2.1.4 按比例划分 fr 关键字2.1.5 自动填充 auto 关键字2.1.6 最大值和最小值minmax 2.2 gap属性2.3 grid-template-areas 属性2.3 grid-auto-flow 属性2.4 单元格对其方式justify-items、align-items、place-items属性2.5 整个内容区域对其方式 justify-content、align-content、place-content属性2.6. grid-auto-columns和grid-auto-rows属性 前言 网格布局Grid是最强大的 CSS 布局方案。 它将网页划分成一个个网格可以任意组合不同的网格做出各种各样的布局。以前只能通过复杂的 CSS 框架达到的效果现在浏览器内置了。 CSS Grid布局提供了更直观的网格化布局方式使得响应式设计和复杂页面结构的实现更加简单和高效。 Flex 布局是轴线布局可以看作是一维布局。 Grid 布局则是将容器划分成行和列产生单元格可以看作是二维布局。 Grid 布局远比 Flex 布局强大。 一、认识Grid 实现一个九宫格布局 css代码 * {list-style: none;margin: 0;padding: 0;}body{padding: 2%;} li{text-align: center;padding: 10px;}li:nth-child(1) {background-color: red;}li:nth-child(2) {background-color: blue;}li:nth-child(3) {background-color: green;}li:nth-child(4) {background-color: yellow;}li:nth-child(5) {background-color: pink;}li:nth-child(6) {background-color: purple;}li:nth-child(7) {background-color: orange;}li:nth-child(8) {background-color: aqua;}li:nth-child(9) {background-color: gray;}html代码 ulli1/lili2/lili3/lili4/lili5/lili6/lili7/lili8/lili9/li/ul效果图 ul的css代码 ul {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px;}效果图
1.1容器和项目 上面例子中ul就是容器里面的li就是项目 注意项目只能是容器的顶层子元素不包含项目的子元素。 1.2行和列 水平为行(row)垂直的为列(column) 上面例子中123就是行147就是列 1.3单元格和网格线 行和列的交叉区域称为单元格cell。 正常情况下n行和m列会产生n x m个单元格。比如3行3列会产生9个单元格。 划分网格的线称为网格线grid line。水平网格线划分出行垂直网格线划分出列。 正常情况下n行有n 1根水平网格线m列有m 1根垂直网格线比如三行就有四根水平网格线。 二、容器属性 使布局变为网格布局 display: gird块级元素。 display: inline-grid行内元素。
2.1.grid-template-columns与grid-template-rows属性 grid-template-columns属性定义每一列的列宽 grid-template-rows属性定义每一行的行高。 2.1.1 直接使用长度单位比如px ul {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 60px 60px 60px;}上面表示一个三行三列的网格列宽为100px,行高为60px。 2.1.2 使用百分比 % ul {display: grid;grid-template-columns: 33.33% 33.33% 33.33%;grid-template-rows: 33.33% 33.33% 33.33%;}2.1.3 使用repeat函数 有时候重复写同样的值非常麻烦尤其网格很多时。这时可以使用repeat()函数简化重复的值。 比如上面的%可以简写为repeat(3, 33.33%)意思表示分三行每一行占33.3% repeat()接受两个参数第一个参数是重复的次数上例是3第二个参数是所要重复的值。 repeat()重复某种模式也是可以的。 repeat(2, 160px 40px 100px) 表示一行占160px,第二行占40px第三行占100px并且重复两次也就是分6行 ul {display: grid;grid-template-columns: repeat(2, 160px 40px 100px);}2.1.4 按比例划分 fr 关键字 为了方便表示比例关系网格布局提供了fr关键字fraction 的缩写意为片段。 如果两列的宽度分别为1fr和2fr就表示后者是前者的两倍1fr 2fr表示总共分了3分前者占1/3后者占2/3。 使用过三方ui库的比如Bootstrap,应该清楚网格布局(Layout )是按24等份来划分的这里可以看做第一列划分了8等份第二列划分了16等份。 fr也可以与绝对长度的单位结合使用 ul {display: grid;grid-template-columns: 150px 1fr 2fr;}看到这里是不是想到了什么没错那就是三栏布局左右固定中间自适应可以直接这样写grid-template-columns: 150px 1fr 150px; 2.1.5 自动填充 auto 关键字 auto 表示由浏览器自己决定长度。 ul {display: grid;grid-template-columns: auto 1fr 2fr;}上面例子中第一列的宽度由其内容决定第二、三列则占据剩余的空间 与fr的区别 fr 适用于分配剩余空间不受内容大小限制。 auto 适用于内容驱动的大小调整通常用于使列或行根据内容的实际需要调整其大小。 auto-fill属性只能应用在repeat函数中的第一个参数 比如repeat(auto-fill, 30%);表示自动填充每一份占30%未分配的空间将空余 ul {display: grid;grid-template-columns:repeat(auto-fill, 30%);border: 1px solid red;}2.1.6 最大值和最小值minmax 当空间满足时显示最大值当空间不足时使用最小值当空间不满足最大值且大于最小值时则取值为最小值与最大值中间的值 ul {display: grid;grid-template-columns: 200px 100px minmax(100px, 400px);border: 1px solid red;}上面例子中minmax(100px, 400px) 表示列宽不小于100px不大于400px。 2.2 gap属性 row-gap行与行的间隔行间距 column-gap列与列的间隔列间距 gapcolumn-gap和row-gap的合并简写形式 ul {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);border: 1px solid red;row-gap: 10px;column-gap: 10px;}上面代码可以简写为gap: 10px 2.3 grid-template-areas 属性 grid-template-areas 用于为网格容器中的网格轨道列和行定义命名区域然后通过每个子项的 grid-area 属性将它们与对应的区域名称关联起来 为每个网格项命名 首先在定义网格容器的时候为每个网格项分配一个区域名称可以使用引号和空格来表示每一行用句点 . 来表示空区域。 ul {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas:header header headernav main mainnav main mainfooter footer footer;border: 1px solid red;gap: 10px;}将网格项关联到区域名称 .header {grid-area: header;background-color: #f2f2f2;}.nav {grid-area: nav;background-color: #d5e8d4;}.main {grid-area: main;background-color: #cce5ff;}.footer {grid-area: footer;background-color: #ffb3ba;}实现网格布局 uldiv classheaderHeader/divdiv classnavNav/divdiv classmainMain Content/divdiv classfooterFooter/div/ul实现效果图
2.3 grid-auto-flow 属性 grid-auto-flow属性调整网格的排列方向默认值为row是横着排列可以设置成column竖着排列 ul {display: grid;grid-template-rows: repeat(3, 1fr);border: 1px solid red;grid-auto-flow: column;gap: 10px;}2.4 单元格对其方式justify-items、align-items、place-items属性 justify-items单元格水平方向(左中右) align-items单元格垂直方向(上中下) place-items单元格垂直方向 单元格水平方向 属性可以取下面这些值 start对齐单元格的起始边缘。end对齐单元格的结束边缘。center单元格内部居中。stretch拉伸占满单元格的整个宽度默认值。 ul {display: grid;grid-template-rows: repeat(3, 100px);grid-template-columns: repeat(3, 100px);gap: 10px;justify-items: start;align-items: end;}上面代码相当于place-items:end start; 如果省略第二个值则浏览器认为与第一个值相等。 2.5 整个内容区域对其方式 justify-content、align-content、place-content属性 justify-content整个内容区域在容器里面的水平位置(左中右 align-content整个内容区域的垂直位置(上中下 place-content整个内容区域垂直方向 整个内容区域水平方向 属性可以取下面这些值 start对齐容器的起始边框。end对齐容器的结束边框。center容器内部居中。stretch项目大小没有指定时拉伸占据整个网格容器。space-around 每个项目两侧的间隔相等。所以项目之间的间隔比项目与容器边框的间隔大一倍。space-between - 项目与项目的间隔相等项目与容器边框之间没有间隔。space-evenly - 项目与项目的间隔相等项目与容器边框之间也是同样长度的间隔。 ul {width: 500px;height: 500px;display: grid;grid-template-rows: repeat(3, 100px);grid-template-columns: repeat(3, 100px);gap: 10px;align-content: center;justify-content: center;border: 1px solid red;}当然也可以这样写place-contentcenter,如果省略第二个值浏览器就会假定第二个值等于第一个值。 2.6. grid-auto-columns和grid-auto-rows属性 grid-auto-columns:定义在网格容器中隐式创建的列的大小 grid-auto-rows:定义在网格容器中隐式创建的行的大小。 ul {width: 500px;height: 500px;display: grid;grid-template-rows: repeat(3, 100px);grid-template-columns: repeat(3, 100px);gap: 10px;place-content: center;border: 1px solid red;grid-auto-columns: 40px;grid-auto-rows: 40px;}这个例子中第10项是多余的没有设置宽高就采用了grid-auto-columns属性和grid-auto-rows属性设置的列宽和行高。 grid-auto-columns属性和grid-auto-rows属性用来设置浏览器自动创建的多余网格的列宽和行高。 它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性浏览器完全根据单元格内容的大小决定新增网格的列宽和行高。 参考阮一峰CSS Grid 网格布局教程