近几年，前端经历了飞速发展，每隔几个月，就有新的技术框架产生，如果你有1年多没有接触过它，那么再上手的时候，你一定会对它感到陌生，似乎一不留神，自己就已经被无情抛弃了。

面对着js框架的飞速发展，得益于babel技术，浏览器可以很快地使用新的框架技术，vue，angular，react似乎也已经统治了好久好久。

而作为前端三剑客的css呢?似乎css3已经是很久很久的事情了，久到了我们不知道它是否还在更新，css是否还有新的技术产生。

虽然各种scss，stylus，less预处理器提高了我们代码的开发和维护，但是css依然缺少一个一击致命，一剑封喉的技术。

庆幸的是，我们等到了grid的到来，它的到来宣布了css布局从此进入了grid时代。

table布局

早期的网页布局是采用table的，也就是所有的内容都会放到table里面，如果想要内嵌布局，就会采用table嵌套table，那个时候可以说布局很简单，因为就是使用table，但是table过于繁琐，因此也产生了大量无用的代码。

div+css

css浮动的出现，彻底解放了网页布局，目前主流的网页采用的都是div+css的布局，这种布局简化了代码结构，通过使用css来定位元素位置，可以说这种布局极大程度上网站的开发效率，同时网页的可维护性也得到大大提高。

grid王者到来

首先我们看下grid的支持情况，从下面的图片可以看到，主流浏览器都是支持的，特别是在最新版的ie也采用和chrome一样的内核之后，可以说现在前端开发终于迎来了最幸福的时刻。

这是一个非常棒的布局解决方案。自从网络诞生以来，我们就一直在努力设计我们的网站，强迫他们去适应和使用那些不适合他们的方式。

不过网格布局的出现，直接从浏览器解决了我们布局的复杂性，我们不再需要复杂的css来生成网格布局，不需要使用bootstrap这样的网格框架来布局，我们可以使用简单的grid布局来完成。

使用grid的优点

• 我们可以创建任意数量的网格。
• fraction unit 使得控制布局比例非常方便。
• repeat可以重复布局。
• 最简原则，只需要定义需要使用的行和列。
• 网格支持命名

如何使用

1. 声明 display:grid;
2. 定义列 grid-template-columns: 100px 100px 100px;
3. 设置间距，grid-row-gap: 20px;

一篇文章说了HTML，现在再来说一说CSS，所谓CSS是指层叠样式表 (Cascading Style Sheets)，通过引入样式表，从而极大的提高了工作效率。

搭配视频观看效果更佳~~

Web前端开发零基础入门HTML/CSS/JavaScript

https://www.ixigua.com/6907467670300393988

什么是CSS？

Cascading Style Sheet

层叠样式表语言（不是编程语言，属于样式表语言，没有变量、数据类型、控制语句...）

CSS其实是专门用来修饰HTML的，让HTML更好看。

CSS是HTML的化妆品。

CSS是为HTML服务的，所以HTML还是主体，CSS是依附在HTML上的，

所以进行CSS的开发，我们还是需要新建html/htm文件。

在HTML中怎么嵌入CSS样式呢？

第一种方式：内联定义

第二种方式：定义内部样式块对象

第三种方式：链入外部样式表文件（这种方式最常用！）

关于选择器的优先级：

• 标签选择器优先级最低。
• 其次是类选择器。
• 最高优先级是id选择器。

CSS设置背景(background)

• 背景颜色 background-color
• 背景图片 background-image
• 背景重复 background-repeat:repeat-x/repeat-y
• 背景位置 background-position:bottom/left/top/right/center
• 背景关联 background-attachment:fixed/scroll

综合写法：

.tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;}

CSS设置文本格式

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

文本缩进 ：Text-indent:2em

文本对齐方式：Text-align:left/right/center/ justify

文本修饰：Text-decoration:underline/line-through/overline/none

字符间距：Word-spacing:px/em 英文单词之间的间隔；

Letter-spacing:px/em汉字和英文字母之间的间隔；

文本转换：Text-transform:uppercase/lowercase/ capitalize

行与行间距：Line-height:px/%

垂直对齐图像： vertical-align：text-top/text-bottom

文本阴影：text-shadow:水平偏移，垂直偏移 颜色

字体

字体类型:font-family:”sans-serif”;

字体样式:font-style:normal ;

字体大小:font-size:20px/3.75em/100%;默认大小为16px,字体为宋体

字体加粗:font-weight:normal;

字体的转变:font-variant:normal/smallcaps;

CSS链接

链接的四种状态

a:link {color:#FF0000;}     /* 未被访问的链接 */
a:visited {color:#00FF00;}  /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}   /* 正在被点击的链接 */

【注意】当为链接的不同状态设置样式时，请按照以下次序规则：

a:hover 必须位于 a:link 和 a:visited 之后

a:active 必须位于 a:hover 之后

去掉a链接默认的下划线

text-decoration:{none/underline}

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

创建链接块

display:block;

列表样式

在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。

要修改用于列表项的标志类型，可以使用属性 list-style-type：

ul {list-style-type : square;}

上面的声明把无序列表中的列表项标志设置为方块。

列表项图像

你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：

ul li {list-style-image : url(xxx.gif);}

列表标志位置

ul{
  list-style-position:inside;
  }

CSS表格

表格边框

table,th,td{border:1px solid red;}

折叠边框

border-collapse:collapse;

• 表格的宽度和高度

width,height

• 表格的文字水平对齐

text-align:center/right/left;

• 表格的文字垂直对齐

vertical-align:bottom;

• 表格的内边距

padding

• 表格的背景颜色

background

盒子模型

margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的。

根据上, 右, 下, 左的顺时针规则, 简写为

margin: 40px 40px 40px 40px;

为便于记忆, 请参考下图：

当上下, 左右margin值分别一致, 可简写为:

margin: 40px 40px;

前一个40px代表上下margin值, 后一个40px代表左右margin值.

当上下左右margin值均一致, 可简写为:

margin: 40px;

padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制块级元素内部, content与border之间的距离

【注意】当你想让两个元素的content在垂直方向(vertically)分隔时, 既可以选择padding-top/bottom, 也可以选择margin-top/bottom, 在此建议你尽量使用padding-top/bottom来达到你的目的, 这是因为css中存在Collapsing margins(折叠的margins)的现象.

边框

• 边框样式：border-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset/hidden
• 边框宽度：border-width
• 边框颜色：border-color

综合写法：

border:1px solid red;

轮廓(outline)

可以按顺序设置如下属性：

• outline-color
• outline-style
• outline-width

CSS所有尺寸

• 宽度

width/min-width/max-width

• 高度

height/min-height/max-height

• 行高

line-height

display显示类型

隐藏元素—–display:none或者visibility:hiddden

display通常可以设置为none、inline、block

visibility通常可以设置为hidden、visible

二者的区别在于display会将元素隐藏掉，并且位置不再被占据，而visibility则是占据原来的位置。

CSS块级元素和内联元素—-display:block/inline/inline-block;

CSS定位(position)

position 属性值的含义：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

CSS浮动

设置浮动：float:left/right;

清除浮动：clear:both/left/right/null;

浮动的两个影响因素：1、文档流 2、显示类型

元素内容溢出

• 溢出滚动条

overflow:scroll（不管是否溢出都会有滚动条）、auto（自动添加）

• 溢出隐藏

overflow:hidden;

CSS的相关特性

1、继承性

它不仅允许样式应用于某个特定的html标签元素，而且还可引用于其后代；

2、CSS层叠

当有相同权重的样式存在时，会根据这些CSS样式的前后顺序来决定，处于最后面的CSS样式会被应用，后面的CSS样式会覆盖前面的样式。

总而言之：内联样式表(标签内部)>嵌入样式表(当前文件中)>外部样式表(外部引入文件)

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

生命是不倒行的

也不与昨日一同停留

- 2024.04.08 -

随着现代网页设计的不断演进，传统的布局方式已经逐渐不能满足设计师和开发者们对于高效、灵活且强大布局系统的追求。而CSS Grid网格布局，正是在这样的背景下应运而生的。

今天，我们就来深入探讨CSS Grid布局的魅力所在，带你解锁这项强大的设计工具，让网页布局变得更加简单和高效。

一、什么是CSS Grid布局？

CSS Grid布局，简称为Grid，是CSS的一个二维布局系统，它能够处理行和列，使得网页布局变得更加直观和强大。与传统的布局方式相比，Grid能够轻松实现复杂的页面结构，而无需繁琐的浮动、定位或是使用多个嵌套容器。

Grid网格布局是一种基于网格的布局系统，它允许我们通过定义行和列的大小、位置和排列方式来创建复杂的网页布局。

这与之前讲到的flex一维布局不相同。

设置display:grid/inline-grid的元素就是网格布局容器，这样就能触发浏览器渲染引擎的网格布局算法。

<div>
<div class="item item-1">
<p></p >
</div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>

上述代码实例中，.container元素就是网格布局容器，.item元素就是网格的项目，由于网格元素只能是容器的顶层子元素，所以p元素并不是网格元素。

二、Grid的基本概念

首先，我们来了解一下CSS Grid布局的核心概念：

容器（Container）：

设置了display: grid;的元素成为容器。它是由一组水平线和垂直线交叉构成，就如同我们所在的地区是由小区和各个路构成。

项目（Item）：

容器内的直接子元素，称为项目。

网格线（Grid Lines）：

划分行和列的线条，可以想象成坐标轴。正常情况下n行会有n+1根横向网格线，m列有m+1根纵向网格线。比如田字就好像是一个三条水平线和三条垂直线构成的网格元素。

上图是一个 2 x 3 的网格，共有3根水平网格线和4根垂直网格线。

行：

即两个水平网格线之间的空间，也就是水平轨道，就好比我们面朝北边东西方向横向排列的楼房称为行。

列：

即两个垂直网格线之间的空间，也就是垂直轨道，也就是南北方向排列的楼房。

单元格：

由水平线和垂直线交叉构成的每个区域称为单元格，网络单元格是CSS网格中的最小单元。也就是说东西和南北方向的路交叉后划分出来的土地区域。

网格轨道（Grid Tracks）：

两条相邻网格线之间的空间。

网格区域（Grid Area）：

四条网格线围成的空间，可以是行或列。本质上，网格区域一定是矩形的。例如，不可能创建T形或L形的网格区域。

三、Grid的主要属性

CSS Grid网格布局的主要属性包括：

• display：设置元素为网格容器或网格项。例如，display: grid; 将元素设置为网格容器，而 display: grid-item; 将元素设置为网格项。

• grid-template-columns 和 grid-template-rows：用于定义网格的列和行的大小。
• grid-column-gap 和 grid-row-gap：用于定义网格的列和行的间距。
• grid-template-areas：用于定义命名区域，以便在网格中引用。
• grid-auto-flow：用于控制网格项的排列方式，可以是行（row）或列（column）。
• grid-auto-columns 和 grid-auto-rows：用于定义自动生成的列和行的大小。
• grid-column-start、grid-column-end、grid-row-start 和 grid-row-end：用于定义网格项的位置。
• justify-items、align-items 和 place-items：用于对齐网格项。
• grid-template：一个复合属性，用于一次性定义多个网格布局属性。

下面将详细介绍这些属性的概念及作用：

3.1 display

通过给元素设置：display:grid | inline-grid，可以让一个元素变成网格布局元素。

语法：

display: grid | inline-grid;

• display: grid：表示把元素定义为块级网格元素，单独占一行;
• display:inline-grid：表示把元素定义为行内块级网格元素，可以和其他块级元素在同一行。

3.2 grid-template-columns和grid-template-rows

grid-template-columns和grid-template-rows：用于定义网格的列和行的大小。

• grid-template-columns 属性设置列宽
• grid-template-rows 属性设置行高

.wrapper {
display: grid;
/* 声明了三列，宽度分别为 200px 200px 200px */
grid-template-columns: 200px 200px 200px;
grid-gap: 5px;
/* 声明了两行，行高分别为 50px 50px */
grid-template-rows: 50px 50px;
}

以上表示固定列宽为 200px 200px 200px，行高为 50px 50px。

上述代码可以看到重复写单元格宽高，我们也可以通过使用repeat()函数来简写重复的值。

• 第一个参数是重复的次数
• 第二个参数是重复的值

所以上述代码可以简写成：

.wrapper {
display: grid;
grid-template-columns: repeat(3,200px);
grid-gap: 5px;
grid-template-rows:repeat(2,50px);
}

除了上述的repeact关键字，还有：

auto-fill：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。

grid-template-columns: repeat(auto-fill, 200px)

表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素。

fr：片段，为了方便表示比例关系。

grid-template-columns: 200px 1fr 2fr

表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。

minmax：产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。第一个参数就是最小值，第二个参数就是最大值。

minmax(100px, 1fr)

表示列宽不小于100px，不大于1fr。

auto：由浏览器自己决定长度。

grid-template-columns: 100px auto 100px

表示第一第三列为 100px，中间由浏览器决定长度。

3.3 grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性

grid-column-gap和grid-row-gap，用于定义网格的列间距和行间距。grid-gap 属性是两者的简写形式。

• grid-row-gap: 10px 表示行间距是 10px
• grid-column-gap: 20px 表示列间距是 20px
• grid-gap: 10px 20px 等同上述两个属性

3.4 grid-auto-flow 属性

grid-auto-flow，用于控制网格项的排列方式，可以是行（row）或列（column）。

• 划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。
• 顺序就是由grid-auto-flow决定，默认为行，代表"先行后列"，即先填满第一行，再开始放入第二行。

当修改成column后，放置变为如下：

3.5 justify-items 属性， align-items 属性， place-items 属性

justify-items、align-items和place-items，用于定义网格项目的对齐方式。

• justify-items 属性设置单元格内容的水平位置（左中右）
• align-items 属性设置单元格的垂直位置（上中下）

.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}

属性对应如下：

• start：对齐单元格的起始边缘
• end：对齐单元格的结束边缘
• center：单元格内部居中
• stretch：拉伸，占满单元格的整个宽度（默认值）

place-items属性是align-items属性和justify-items属性的合并简写形式。

3.6 justify-content 属性， align-content 属性， place-content 属性

• justify-content属性是整个内容区域在容器里面的水平位置（左中右）
• align-content属性是整个内容区域的垂直位置（上中下）

.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;
}

两个属性的写法完全相同，都可以取下面这些值：

• start - 对齐容器的起始边框
• end - 对齐容器的结束边框
• center - 容器内部居中

• space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
• space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
• space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
• stretch - 项目大小没有指定时，拉伸占据整个网格容器。

3.7 grid-auto-columns 属性和 grid-auto-rows 属性

有时候，一些项目的指定位置，在现有网格的外部，就会产生显示网格和隐式网格。

比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。超出的部分就是隐式网格。

而grid-auto-rows与grid-auto-columns就是专门用于指定隐式网格的宽高。

3.8 grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性

指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置。

• grid-column-start 属性：左边框所在的垂直网格线
• grid-column-end 属性：右边框所在的垂直网格线
• grid-row-start 属性：上边框所在的水平网格线
• grid-row-end 属性：下边框所在的水平网格线

<style>
#container{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.item-1 {
grid-column-start: 2;
grid-column-end: 4;
}
</style>

<div id="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
</div>

通过设置grid-column属性，指定1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。

3.9 grid-area 属性

grid-area 属性指定项目放在哪一个区域。

.item-1 {
grid-area: e;
}

意思为将1号项目位于e区域

grid-area属性一般与上述讲到的grid-template-areas搭配使用。

想要快速入门前端开发吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！点这里前往学习哦！云端源想

3.10 justify-self 属性、align-self 属性以及 place-self 属性

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}

这两个属性都可以取下面四个值。

• start：对齐单元格的起始边缘。
• end：对齐单元格的结束边缘。
• center：单元格内部居中。
• stretch：拉伸，占满单元格的整个宽度（默认值）

四、Grid网格布局应用场景

CSS Grid网格布局的应用场景非常广泛，包括但不限于：

1、创建复杂的网页布局：

CSS Grid网格布局可以轻松创建出复杂的网页布局，如多列布局、不规则布局等。

2、创建响应式设计：

CSS Grid网格布局可以轻松实现响应式设计，通过调整网格的大小和间距，可以适应不同的屏幕尺寸。

3、创建复杂的组件布局：

CSS Grid网格布局也可以用于创建复杂的组件布局，如卡片布局、轮播图布局等。

总的来说，CSS Grid网格布局是一种强大的布局工具，可以帮助网页设计者轻松创建出各种复杂的网页布局。

CSS Grid布局为我们提供了一个全新的视角来思考页面布局，它让复杂布局的实现变得简单明了。随着浏览器支持度的提高，未来的网页设计将更加灵活和富有创意。

掌握了CSS Grid布局，你就已经迈出了成为前端设计高手的重要一步。不断实践，不断探索，你会发现更多Grid的神奇之处。

今天就先讲到这里了，

更多前端开发基础知识点击文末阅读原文查看哦！

记得关注【云端源想IT】一起学编程！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享