0601-CSS

2006-01-01

前端全栈

字数统计: 9.7k字 | 阅读时长≈ 39分钟

第一部分 HTML

第一章网站基础

1.1 服务器

服务器可以泛指存储网络资源的电子计算机；

1.2 浏览器

五大浏览器
- IE浏览器：微软公司旗下浏览器，IE诞生于1994年，当时微软为了对抗市场份额占据将近百分之九十的网景Netscape Navigator，于是在Windows中开发了自己的浏览器Internet Explorer，自此也引发了第一次浏览器大战。
- Opera浏览器：挪威Opera Software ASA公司旗下的浏览器。1995年，opera公司发布第一版Opera浏览器，使用自己研发的Presto内核。当时opera公司的开发团队不断完善Presto内核，使Opera浏览器一度成为顶级浏览器。直到2016年奇虎360和昆仑万维收购了Oprea浏览器，从此也丢弃了强大的Presto内核，改用当时Google开源的webkit内核。后来Opera浏览器跟随Google将浏览器内核改为Blink内核。自此Presto内核也淡出了互联网市场。
- Safari浏览器：第二次浏览器大战是从苹果公司发布Safari浏览器开始的。2003年，苹果公司在苹果手机上开发Safari浏览器；
- Firefox浏览器：Mozilla公司旗下浏览器，也是刚才提到的网景公司后来的浏览器。网景被收购后，网景人员创办了Mozilla基金会，这是一个非盈利组织，他们在2004年推出自己的浏览器Firefox。Firefox采用Gecko作为内核。Gecko是一个开源的项目，代码完全公开，因此受到很多人的青睐。Firefox的问世加快了第二次浏览器大战的开始。第二次浏览器大战与第一次二元鼎力的局面不同，这一次的特点就是百家争鸣，也自此打破了IE浏览器从98年网景被收购后独步浏览器市场的局面。
- Chrome浏览器：google旗下的浏览器。Chrome浏览器至发布以来一直讲究简洁、快速、安全，所以Chrome浏览器到现在一直受人追捧。最开始Chrome采用webkit作为浏览器内核，直到2013年，google宣布不再使用苹果的webkit内核，开始使用webkit的分支内核Blink。
四大内核
- Trident（也称IE内核）
- webkit：chrome 将 Webkit内核深入人心，殊不知，Webkit 的鼻祖其实是 Safari。现在很多人错误地把 webkit 叫做 chrome内核
- Blink：Blink 其实是 WebKit 的分支
- Gecko：特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。

1.3 网站与html

网站上由众多的网页构成的，每个网页都是html文件，浏览器将html文件中字符串渲染成为网站可见的文本、图片、链接、视频等等；

1.4 url与http协议

URL（Uniform Resource Locator）：统一资源定位器；在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL；
url格式说明
1
protocol :// hostname[:port] / path / [;parameters][?query]#fragment
- protocol（协议）：指定使用的传输协议；
- hostname（主机名）：指存放资源的服务器的域名系统(DNS) 主机名或 IP 地址；
- port（端口号）：整数，可选，省略时使用方案的默认端口，各种传输协议都有默认的端口号；
- path（路径）：由零或多个“/”符号隔开的字符串，一般用来表示主机上的一个目录或文件地址；
- parameters（参数）：这是用于指定特殊参数的可选项；
- query(查询)：可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用“&”符号隔开，每个参数的名和值用“=”符号隔开；
- fragment（信息片断）：字符串，用于指定网络资源中的片段。
http协议概述：HTTP是一个客户端终端（用户）和服务器端（网站）请求和应答的标准（TCP）。通过使用网页浏览器、网络爬虫或者其它的工具，客户端发起一个HTTP请求到服务器上指定端口（默认端口为80）。我们称这个客户端为用户代理程序（user agent）。应答的服务器上存储着一些资源，比如HTML文件和图像。我们称这个应答服务器为源服务器（origin server）。在用户代理和源服务器中间可能存在多个“中间层”，比如代理服务器、网关或者隧道（tunnel）。

第二章 html发展史

HTML1.0：在1993年由互联网工程工作小组(IETF)工作草案发布(并非标准，众多不同版本HTML陆续在全球使用，但是始终未能形成一个广泛的有相同标准的版本。
HTML2.0：HTML2.0相比初版而言，标记得到了极大的丰富。
HTML3.2：HTML3.2是在1996年提出的规范，注重兼容性的提高，并对之前的版本进行了改进
HTML4.0：1997年12月推出的HTML4.0，将HTML推向了一个新高度。该版本倡导将文档结构和样式分离，并实现了表格更灵活的控制。
HTM.401：由1999年提出的4.01版本是在HTML4.0基础上的微小改进
20世纪90年代是HTML发展速度最快的时期，但是自1999年发布的HTML4.01后，业界普遍认为HTM已经步入瓶颈期，W3C组织开始对Web标准的焦点转向 XHTMI上。
XHTMI1.0：在2000年由W3C组织提出， XHTMI是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。
XHTML1.1：XHTML1.1是模块化的 XHTMI，是货真价实的XML。
XHTML2.0：XHTML2.0是完全模块化可定制的XHTMI，随着HTML5的兴起，XHTML2.0工作小组被要求停止工作。
2004年，一些浏览器厂商联合成立了 WHATWG工作组，致力于Web表单和应用程序。此时的W3C组织专注于 XHTML2.0。在2006年，W3C组织组建了新的HTML工作组采纳了 WHATWG的意见，并于2008年发布了HTML5。
由于HTML5能解决实际的问题，所以在规范还未定稿的情况下，各大浏览器厂家已经开始对旗下产品进行升级以支持HTML5的新功能。因此，HTML5得益于浏览器的实验性反馈并且也得到持续的完善，并以这种方式迅速融入对Web平台的实质性改进中。2014年10月，W3C组织宣布历经8年努力，HTML5标准规范终于定稿。

第三章 html基础

3.1 html基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

3.2 html基础知识

文档声明<!DOCTYPE html>：作用是高速浏览器当前html文本的版本，浏览器通过html版本把文本渲染为网页，html表示是HTML5版本，也称为文档类型声明；必须定义在html文档的第一行；
文档显示语言<html lang="en">：用于定义文档默认的显示语言：①en表示是英语②zh-CN表示是中文
文档字符集<meta charset="UTF-8">：用于定义文档字符集，浏览器渲染html文档时候根据字进行渲染文档中的文本；
标签分类

第四章 html标签

4.1 元信息

元信息
`<head>`	定义关于文档的信息
`<head>`	定义关于 HTML 文档的元信息。
`<base>`	定义页面中所有链接的默认地址或默认目标。

4.2 程序脚本

程序
`<script>`	定义客户端JS脚本。
`<style>`	定义CSS样式脚本
`<noscript>`	定义针对不支持客户端脚本的用户的替代内容。
`<embed>`	定义了一个容器，用来嵌入外部应用或者互动程序（插件）。
`<object>`	定义嵌入的对象。
`<param>`	定义对象的参数。

4.3 容器标签

样式/节
`<div>`	定义独占一行的盒子
`<span>`	定义文档中的节。
`<header>`	定义一个文档头部部分
`<footer>`	定义一个文档底部
`<section>`	定义了文档的某个区域
`<article>`	定义一个文章内容
`<aside>`	定义其所处内容之外的内容。
`<details>`	定义了用户可见的或者隐藏的需求的补充细节。
`<dialog>`	定义一个对话框或者窗口
`<summary>`	定义一个可见的标题。当用户点击标题时会显示出详细信息。

4.4 表格标签

4.5 表单标签

4.6 多媒体标签

第二部分 CSS基础

第一章 CSS基础法语啊

第二章 CSS模型

第三部分 CSS选择器

第一章基本选择器

选择器	示例	描述
通用选择器	*	匹配所有选择器
标签选择器	标签名称	根据HTML标签名称匹配元素
类选择器	.类名	匹配标签class属性值的所有元素，一个元素可以定义多个类，用空格分隔
ID选择器	#id属性值	匹配标签id属性值的一个元素

第二章结构选择器

第三章属性选择器

第四章伪类选择器

第五章表达选择器

第四部分 CSS属性

第五部分 CSS布局

第一章流式布局

标准流也称为普通流或文档流，就是指标签按照HTML标签默认方式进行排列；在标准流中的元素分为行内元素、块级元素、行内块元素；其在标准流中排列特点是：

块级元素：在标准流中独占一行，按顺序从上到下进行排列；
行内块元素：在标准流中具有width和height属性，按顺序从左到右进行排列，超过父盒子宽度后自动换行；
行内元素：在标准流中按顺序从左到右进行排列，超过父盒子宽度后会自动换行；

第二章浮动布局

2.1 浮动概述

在标准流中如果要元素水平排列，虽然可以将元素转换为行内块元素，但是无法控制行内块元素之间的距离，并且水平布局的功能不足以满足网页水平布局的要求；

浮动流：浮动是给盒子添加float属性，给盒子创建了一个浮动框，具有浮动框的元素会从原标准流的位置脱离出来，浮动框根据浮动属性的值，浮动框的左边缘或右边缘会贴靠到所包含的块边缘或另一个浮动框的左右边缘；

浮动的注意点：①浮动和标准流的父元素搭配使用（先用标准流排列水平结构，再在水平布局的父元素中定义元素设置浮动属性）②一个元素浮动了理论上该元素的兄弟元素都需要浮动，因为浮动元素会影响后面的标准流；

2.2 浮动特性

浮动元素会脱离标准流
- 元素浮动后会基于父元素的位置进行左右排版：父级的盒子如果装不下浮动的元素，后面浮动的元素会另起一行；
- 浮动流是一种“半脱离标准流”的排版方式，浮动后会移动到父元素中指定的位置；
- 元素浮动后，原来的位置会被释，浮动区域会覆盖掉标准元素，但是浮动的区域不会覆盖对应位置标准流元素中的文本内容
- 元素浮动不会超越父元素的padding区域和margin区域；
浮动元素会在一行内显示并且元素顶部对齐
- 相同方向的浮动元素：先浮动的元素会显示在前面，后浮动的元素会显示在后面；
- 不同方向的浮动元素：左浮动会找左浮动，右浮动会找右浮动；
- 浮动元素浮动后的位置：右浮动元素在浮动之前在标准流中的位置确定，只在原来所在行浮动；
浮动元素具有行内块的特性
- 浮动流是不区分行内元素、块级元素或行内块元素：浮动所有元素都可以设置宽和高；
- 浮动元素是不能撑起父元素的高度；
- 浮动元素是不可以设置margin 0 auto的；
浮动元素贴靠现象
- 当父元素的宽度足够放置浮动元素时，浮动元素会按顺序贴靠；
- 当父元素宽度不够时，浮动元素会找现在贴靠元素的上一个浮动元素，直到贴靠在父元素；

2.3 消除浮动概述

在实际开发中，浮动元素的标准流的父盒子是不会设置高度的，父盒子的高度应该是被子盒子的内容撑开的，但是父盒子中的所有元素浮动后，浮动元素是撑不开父盒子的高度的，所以会导致父盒子的高度为0，下一个标准流元素会被浮动造的影响：浮动不占有原文档流中的位置，所以会对后面的元素排版产生影响，为了解决这些问题，所以要为该元素清除浮动后造成的影响：元素浮动后不会撑开父元素的高度，父元素的高度为0的问题；清除浮动后父盒子会根据子盒子自动检测高度，就不会影响下面的标准流了；清除浮动属性：clear=both，清除浮动的策略是闭合浮动

额外标签法：也称隔墙法，是w3c推荐；在最后浮动元素的元素后新增一个空盒子（必须是块级元素，不能是行内元素），并且给盒子设置clear属性，缺点是添加无语义的标签，不优雅；
给父元素添加overflow属性：给父元素添加overflow属性，本义是处理溢出样式的；缺点是无法显示溢出的部分，
给父元素添加after伪元素：本质是也是隔墙法，只是墙是通过样式添加的；原理是after伪元素必须要用content属性，需要将content转为块级元素（display=block），转为块级元素后可以为元素设置clear属性，并且这个内容不再浏览器显示（visibility=hidden），缺点是IE不兼容，需要给添加额外样式（*zoom=1）
给父元素添加双伪元素：after是给父盒子后面添加一个虚拟的墙，再加个before属性给父盒子前面添加一个墙，表示浮动元素完全在父盒子中浮动了

2.4 清除浮动

~~清除浮动方式一~~：给父元素设置高度：企业开发中一般盒子的高度是由内容决定，所以不推荐使用盒子高度；
清除浮动方式二：为浮动元素添加clear属性：添加了clear属性的元素margin属性会失效；解决浮动的本质是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素；

清除浮动方式三：隔墙法清除浮动

外墙法：在浮动的元素之间添加一个块级元素，并且为该元素设置属性clear: both属性，外墙法的第一个浮动元素不要使用margin-buttom属性，外墙法的第二个浮动元素不要使用margin-top属性，直接为外墙设置高度属性即可；
内墙法：在第一个浮动元素的所有子元素之后添加一个块级元素，并且为该元素设置属性clear: both属性，内墙法可以让浮动元素使用margin属性；

使用伪元素选择器为元素前后添加块级元素：::before 或::after伪元素的content属性，并且设置height属性设置为0，visibility属性设置为hidden，clear属性设置为both；

.clear-fix:after{
    content:"不建议填空";
    height:0px;
    visibality:hidden;
    display:block;
    clear:both;
}

/** 伪元素有兼容问题:添加兼容处理方式 */
.clear-fix{
    *zoom:1;
}

双伪元素清除浮动：触发bfc，防止外边距合并

.clear-fix:after,.clear-fix:before{
    content:"";
    display:block;
}
.clear-fix{
    clear:both;
}
/** 伪元素有兼容问题:添加兼容处理方式 */
.clear-fix{
    *zoom:1;
}

清除浮动方式四：使用overflow: hidden属性：在IE6中无效，需要添加兼容属性*zoom:1值；缺点子元素中过多的内容被隐藏；

第三章定位布局

3.1 定位概述

第四章 flex布局

5.1 Flex布局特点

传统布局特点：①兼容性好（PC和移动端都适应）、②布局繁琐（布局属性多且乱）、③局限性，在移动端效果不好
Flex布局特点：①操作方便，布局极为简单、②是CSS新特性，对PC端浏览器支持较差

5.2 Flex布局原理

Flex是Flexible Box的（弹性盒子）缩写，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
采用了flex的元素称为Flex Container，容器中所有的元素自动称为容器中的Flex Item；
- Flex Container（FLex容器）：默认有两条轴：默认主轴是水平方向向右，默认测轴是垂直方向向下
- Flex Item（项）：元素的float、clear、vertical-align 的属性将会失效
布局原理：Flex布局就是通过flex container中属性的item的属性设置子元素在主轴方向和测轴方向的摆放方式；一句话总结就是：通过给父盒子添加flex属性，表示父盒子中所有子元素被flex布局方式排列；

display：flex：①flex：父盒子是块级元素，使用flex属性值后父盒子仍然保留块级元素特点，独占一行②inline-flex：父盒子是块级元素，使用inline-flex属性值后父盒子会有行内块元素特点（如果设置父盒子的宽度和高度，flex容器的的宽度将有子元素宽度决定）

1
2
3

.container {
    display: flex | inline-flex;       //可以有两种取值
}

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Container</title>
    <style>
        .box1 {background: red;display: flex;}
        .box1 div { width: 100px;height: 50px;background: green;}
        
        .box2 {background: red; display: inline-flex;}
        .box2 div {width: 100px;height: background: green;}
    </style>
</head>
<body>
<div class="box1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
<br>
<div class="box2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
</body>
</html>

5.3 Flex Container

容器属性	属性值及说明
flex-direction	设置主轴的方向 row：默认值，主轴为水平方向，从左向右 row-reverse：主轴为水平方向，从右向左 column：主轴为垂直方向，从上向下 column-reverse：主轴为垂直方向，从下向上
justify-content	定义了容器内的item在主轴的对齐方式。 flex-start：默认值，左对齐 flex-end：右对齐 center：居中 space-between：两端对齐，item之间的间隔相等，即剩余空间等分成间隙。 space-around：每个item两侧的间隔相等
flex-wrap	设置容器内item是否可换行：如果支持换行，侧轴可以有多条 nowrap：不换行，当主轴尺寸固定但当空间不足时，item尺寸会调整而并不会挤到下一行。 wrap：item主轴总尺寸超出容器时换行，第一行在上方 wrap-reverse：item主轴总尺寸超出容器时换行，，第一行在下方
align-items	定义了item在侧轴上的对齐方式默认值为 stretch 即如果item未设置高度或者设为 auto，将占满整个容器的高度。 flex-start：交叉轴的起点对齐 flex-end：交叉轴的终点对齐 center：交叉轴的中点对齐 baseline: item的第一行文字的基线对齐
align-content	定义了多根轴线的对齐方式，如果item只有一根轴线，那么该属性将不起作用默认值为 stretch多条轴线平分容器的垂直方向上的空间。 flex-start：轴线全部在交叉轴上的起点对齐 flex-end：轴线全部在交叉轴上的终点对齐 center：轴线全部在交叉轴上的中间对齐 space-between：轴线两端对齐，之间的间隔相等，即剩余空间等分成间隙。 space-around：每个轴线两侧的间隔相等
flex-flow	flex-direction 和 flex-wrap 的简写形式

5.3 Flex Item属性

item属性	属性说明
flex	flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
flex-grow	定义item的放大比例，默认为0 如果所有的item 的flex-grow的值都是一样的话那就是以item 的width为最小值平均分配主轴上的宽度如果item没有设置width则所有的item平分主轴上的剩余宽度如果item的flex-grow的值不一样，那就是根据对应的比例来分配主轴上的剩余宽度
flex-shrink	定义了item的缩小比例，默认为1，即如果空间不足，该item将缩小如果所有item的flex-shrink属性都为1，当空间不足时，都将等比例缩小如果一个item的flex-shrink属性为0，其他item都为1，则空间不足时，前者不缩小。
flex-basis	定义了在分配多余空间之前，item占据的主轴空间（main size）浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即item的本来大小。
align-self	item设置自己在测轴的排列方式
order	定义item在容器中的排列顺序数值越小，排列越靠前，默认值为 0

第五章 gaid布局

5.1 概述

网格布局（Grid）：是最强大的CSS布局方案
比较Flex布局：Flex布局是轴线布局，只能针对指定子项在轴线的位置；可以看做是一位布局；
Grid布局：是将容器划分为行和列，产生单元格，然后将子项指定在单元格中，可以看做是二维布局；Grid布局远比Flex布局强大
- 上图这样的布局，就是 Grid 布局的拿手好戏。

5.2 基本概念

容器与项目：采用网格布局的区域，称为”容器”（container）；容器内部采用网格定位的子元素，称为”项目”（item）。
1
2
3
4
5
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
上面代码中，最外层的<div>元素就是容器，内层的三个<div>元素就是项目。

注：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<p>元素就不是项目。Grid 布局只对项目生效。
行和列表：Grid容器中水平方向单元格所在区域称为行（row），垂直方向单元格称为列（column）
单元格：行和列的交叉区域，称为”单元格”（cell）。
网格线：划分网格的线，称为”网格线”（grid line）。水平网格线划分出行，垂直网格线划分出列。正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

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

4.3 网格属性

Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。这部分先介绍容器属性。

1. 开启Grid

1	display:grid \| inline-grid;

display:grid可以将容器变为一个块级容器，容器内部采用网格布局，

display:inline-grid可以将容器变为一个行内块容器，容器内部采用网格布局。

设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

display: grid	display: inline-grid

2. 行和列的划分

行和列的规划：开启网格布局后，需要来规划行和列，主要应用的下面的两个grid容器属性

grid-template-rows: 定义每一行的行高。
grid-template-columns: 定义每一列的列宽。

布局:

grid-template-columns属性对于网页布局非常有用。两栏式布局只需要一行代码。如:将左边栏设为70%，右边栏设为30%。
1
2
3
4
.wrapper {
display: grid;
grid-template-columns: 70% 30%;
}
传统的十二网格布局，写起来也很容易。
1
grid-template-columns: repeat(12, 1fr);

行和列高度设定：①绝对值②百分比③repeat④auto-file⑤fr比例⑥minmax⑦auto⑧网格名称

绝度值:指定每一列的宽度,每一行的高度
1
2
3
4
5
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
上面代码指定了一个三行三列的网格，列宽和行高都是100px。

百分比:为了拒绝使用绝对值,可以指定每一列对应的百分比

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

repeat函数: 如果有很多行, 重复写同样的值会非常繁琐, 可以使用repeat()函数，简化重复的值。
- repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
  1
  2
  3
  4
  5
  .container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
  }
- repeat()重复某种模式也是可以的
  1
  grid-template-columns: repeat(2, 100px 20px 80px);
  上面代码定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。
auto-fill 关键字:有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
1
2
3
4
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
上面代码表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。
fr关键字: 为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为”片段”）。
- 如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
  1
  2
  3
  4
  .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  }
- fr可以与绝对长度的单位结合使用，这时会非常方便。
  1
  2
  3
  4
  .container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
  }
  上面代码表示，第一列的宽度为150像素，第二列的宽度是第三列的一半。
minmax(): minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
1
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
上面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。
auto 关键字: auto关键字表示由浏览器自己决定长度。
1
grid-template-columns: 100px auto 100px;
上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。
网格线名称: grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。
1
2
3
4
5
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
- 上面代码指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。
- 网格布局允许同一根线有多个名字，比如[fifth-line row-5]。

3. 行间距

单独设置行间距与列间距: grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

简写形式:grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。

1
2
3

grid-gap: <grid-row-gap> <grid-column-gap>;
或者
grid-gap: 行&列间距

根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。

4. 单元格元素移动

单元格移动: 每个单元格的位置是可以指定的，具体的方法就是指定单元格的四个边框，分别定位在哪根网格线。设置网格线所在的位置可以通过下面的属性来进行设置：

同时，需要注意的是，当第一个项目移动了之后，第二个项目立即占据了之前第一个项目的位置。

grid-row-start: 设置起始位置的行所在的网格线编号
grid-column-start: 设置起始位置的列所在的网格线编号
grid-row-end: 设置结束位置的行所在的网格线编号
grid-column-start: 设置结束位置的列所在的网格线编号

根据网格线编号移动:

.content div:first-child {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 3;
}

如上面的红色区域所在的行起始位置的网格线为第三根网格线，那么grid-row-start的值就为3，结束位置的网格线为第四根网格线，那么grid-row-end的值就为4。

根据网格线名称移动:

.content {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  /* 开启grid */
  display: grid;
  /* 设置行高和列宽 */
  grid-template-rows: [x1-start] 100px [x1-end x2-start] 100px [x2-end x3-start] 100px [x3-end];
  grid-template-columns: [y1-start] 100px [y1-end y2-start] 100px [y2-end y3-start] 100px [y3-end];

}

/* 通过网格线名进行位移 */
.content div:first-child {
  grid-row-start: x3-start;
  grid-row-end: x3-end;
  grid-column-start: y2-start;
  grid-column-end: y2-end;
}

repeat中的网格线名称:

通过repeat()函数来完成，那么就可以通过下面的写法来对每条网格线进行命名

article {
  grid-template-rows: repeat(3, [r-start] 100px [r-end]);
  grid-template-columns: repeat(3, [c-start] 100px [c-end]);
}

项目位移时的用法如下

div {
  grid-row-start: r-start 1;
  grid-column-start: c-start 1;
  grid-row-end: span 1;
  grid-column-end: span 3;	
}

网格移动简写形式:在设置项目的位置的时候，可以通过grid-row和grid-column这两个简写属性。

div {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}

或者使用网格线名称
div {
	grid-row: 1 / x3-end;
	grid-column: 1 / y2-end
}

grid-row属性的第一个值表示的是grid-row-start，第二个值表示grid-row-end，两个值之间用/来分隔。

grid-column属性第一个值表示grid-column-start，第二个值表示grid-column-end，两个值之间用/来分隔。

5. 单元格合并

span关键字:跨域指定单元格

article {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  /* 开启grid */
  display: grid;
  /* 设置行高和列宽 */
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
}

article div {
  background-color: orange;
}
/* 让第一个div占据第一行 */
article div:first-child {
  grid-row: 1 / span 1;
  grid-column: 1 / span 3;
}
article div:last-child {
  grid-row: 2 / span 2;
  grid-column: 2 / span 1;
}

grid-area:给item设置具体的单元格位置:第一个值表示开始的行第二个值表示开始的列第三个值表示结束的行第四个值表示结束的列。

article {
  width: 300px;
  height: 300px;
  border: 1px solid #222;
  /* 开启grid布局 */
  display: grid;
  /* 画出栅格线, 并且在画出栅格线的同时,给栅格线起一个名字,行的栅格线统称为r,列的栅格线统称为c */
  grid-template-rows: repeat(3, [r] 100px); /* 表示行的第一根网格线就叫做r 1，第二个就是r 2 ， 其他的以此类推*/
  grid-template-columns: repeat(3,[c] 100px);
}
article div {
  background-color: orange;
}

/* 通过grid-area 来给每一个单元格设置区域,第一个值表示开始的行 第二个值表示开始的列 第三个值表示结束的行  第四个值表示结束的列 */
article div:first-child {
  grid-area: r 2/ c 1 / r 3 / c 4;
}

article div:last-child {
  grid-area: r 1/c 2 / r 2 / c 3;
}

根据网格名称合并单元格

给网格不同区域进行命名:通过grid-template-areas来给不同的区域进行命名

.content {
  width: 100vw;
  height: 100vh;
  /* 开启grid */
  display: grid;
  /* 三行两列 */
  grid-template-rows: 60px 1fr 60px;
  grid-template-columns: 60px 1fr;
  grid-template-areas: "header header"
    "nav main"
    "footer footer";
}

grid-area属性来进行设置item占据的命名区域

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      /* 模拟移动端的小屏幕 */
      .content {
        width: 100vw;
        height: 100vh;
        /* 开启grid */
        display: grid;
        /* 三行两列 */
        grid-template-rows: 60px 1fr 60px;
        grid-template-columns: 60px 1fr;
        grid-template-areas: "header header"
          "nav main"
          "footer footer";

      }

      header {
        /* 因为第一行的两个部分都是header区域，所以此时直接全部占领 */
        grid-area: header;
        background-color: #222;
      }

      nav {
        grid-area: nav;
        background-color: lightblue;
      }

      main {
        grid-area: main;
        background-color: lightblue;
      }

      footer {
        grid-area: footer;
        background-color: #222;
      }
    </style>
  </head>

  <body>
    <div class="content">
      <header></header>
      <nav></nav>
      <main></main>
      <footer></footer>
    </div>
  </body>

</html>

6. grid-auto-flow 调整排列方式

一般来说，默认的排列方式是从左向右，从上到下，可以通过grid-auto-flow属性来设置项目到底是水平排列还是垂直排列

默认的排列方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid布局</title>
    <style>
        article {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            /* 开启grid布局 */
            display: grid;
            /* 画出栅格线 */
            grid-template-rows: repeat(3,100px);
            grid-template-columns: repeat(3, 100px);
        }

        article div {
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- 栅格的流动方向 -->
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </article>
</body>
</html>

改变网格排列方向,默认值是row,是行排列,column 则是列排列
1
2
3
article {
grid-auto-flow: column;
}

当存在剩余空间时,强制将剩余空间填满

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid布局</title>
    <style>
        article {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            /* 开启grid布局 */
            display: grid;
            /* 画出栅格线 */
            grid-template-rows: repeat(3,100px);
            grid-template-columns: repeat(3, 100px);
            /* 当存在剩余空间时,强制将剩余空间填满 */
            grid-auto-flow: row;
        }

        article div {
            background-color: orange;
        }
        article div:nth-child(1) {
            grid-column: 1 / span 2;
        }

        article div:nth-child(2) {
            grid-column: 2 / span 1;
        }
    </style>
</head>
<body>
    <!-- 栅格的流动方向 -->
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </article>
</body>
</html>

如果想要从上到下的用元素填补剩余空间，可以如下:

article {
  /* 当存在剩余空间时,强制将剩余空间填满 */
  grid-auto-flow: row dense;
}

7. 单元格位置调整

单元格水平方向和垂直方向位置调整:通过justify-content属性来调整所有项目在容器中的水平位置，通过align-content属性来调整所有项目在容器中垂直位置。
1
2
3
4
article {
justify-content: center;
align-content: end;
}
位置取值如下:
- start
- end
- center
- space-around
- space-between
- space-evenly
案例: 让所有的项目在水平方向居中，垂直方向在底部。
位置调整简写方式: place-content: 第一个属性值表示align-content的值，第二个属性值表示justify-content的属性值。
1
place-content: center end;

8. 单元格中item位置调整

单元格中item位水平位置或垂直位置调整:通过justify-items属性来设置水平方向的位置，通过align-items属性来设置元素在垂直方向上的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid布局</title>
    <style>
        article {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            /* 开启grid */
            display: grid;
            grid-template-columns: repeat(4, 60px);
            grid-template-rows: repeat(3,60px);
            /* 设置项目在单元格中垂直居中 */
            justify-items: center;
            align-items: center;
        }

        article div {
            background-color: pink;
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>

        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </article>
</body>
</html>

设置单个item在单元格中的位置:通过justify-self属性来设置项目在单元格中的水平位置，通过align-self属性设置项目在单元格中的垂直位置。
1
2
3
4
article div:first-child {
justify-self: end;
align-self: center;
}
简写属性:place-self，第一个值表示垂直方向align-self属性的值，第二个值表示水平方向justify-self的位置

第六部分 CSS动画

第七部分移动端开发

打赏

版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！