One post tagged with "css"

一、是什么是混合内容​

混合内容

二.一些配置​

<meta
  http-equiv="Content-Security-Policy"
  content="upgrade-insecure-requests"
/>

这将会把 http 请求转化为 https 请求。这样就不会再出现 Mixed Content 的错误了。 ws 请求也会被转化为 wss 请求

一、HTML 常用标签的分类​

1.块级元素​

块级元素的特点

1. 独占一行，从上到下排布
2. 可以设置 CSS 盒子模型的所有属性（width/height/margin/padding/bolder）
3. 在不设置宽高时，宽继承父级的宽，高由本身的内容决定的
4. 上面盒子的 margin-bottom 和下面盒子的 margin-top 只有一个生效（大值生效）
5. 可以嵌套其他元素
   • P 元素不能嵌套 p 元素
   • dt、dd、h1-h6 元素一般不会嵌套块级元素，一般嵌套 a 和 img
6. 块级元素里面的第一个块级元素的 margin-top 不生效

2 行内元素​

行内元素特点

1. 在一行内显示，从左到右显示
2. 不能设置行高
3. 不能嵌套块级元素，可以嵌套行内元素（span 嵌套 span）
4. 在编辑代码时，行内元素与行内元素之间出现空格或者回车时会出现间隙 4px
   • 解决办法：给父元素或者 body 设置 font-size 为 0，然后在给其他的标签重新设置 font-size
5. 和行内块儿元素在一行时会出现基线对齐问题
   • 解决办法：vertical-algin：top/middle/bottom
6. 左边元素的 margin-right 和右边元素的 margin-left 只有一个生效（大值生效）

3 行内块元素​

行内块元素特点

1. 在一行显示，从左到右排布
2. 可以设置宽高，不设置有本身内容决定
3. 不可以嵌套块级元素，可以嵌套行内元素
4. 在编辑代码时，行内元素与行内元素之间出现空格或者回车时会出现间隙 4px
   • 解决办法：给父元素或者 body 设置 font-size 为 0，然后在给其他的标签重新设置 font-size
5. 和行内块儿元素在一行时会出现基线对齐问题
   • 解决办法：vertical-algin：top/middle/bottom
6. 左边元素的 margin-right 和右边元素的 margin-left 只有一个生效（大值生效）

4 块级元素、行内元素、行内块元素转换----display​

1. display: block

块 - 独占一行：上到下排列 - 设置 CSS 盒子模型所有属性 - width、height、border、padding、margin - 可以嵌套其他元素 - p，dt 不能嵌套块元素 - 在不设置宽高时，宽时继承父级的宽，高是由内容决定的 - 永远在左上角排布的

2. display:inline; 行内

• 在一行显示:左到右
• 不能设置宽高，右内容决定
• 行内元素出现回车或者换行时，回有间隙
  • 解决方法：给父级或者 body{font-size;0;}
• 不可以嵌套块级元素
• 基线对齐 a b i em strong sub sup

3. display:inline-block

行内块元素

• 可以设置宽高、内间距 padding、外间距 margin
• 其他同行内元素 input、img

缺点:基线对齐问题、 间隙、只能从左向右

4. display:none

隐藏、消失

• 如果设置了该属性，会设置成 display: block，隐藏。

二、介绍一下标准的 CSS 的盒子模型？与低版本 IE 的盒子模型有什么不同的？​

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本 IE 盒子模型：宽度=内容宽度（content+border+padding）+ margin

box-sizing 用来控制元素的盒子模型的解析模式,如何计算一个元素的总宽度和总高度，默认为 content-box

• context-box：W3C 的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽
• border-box：IE 传统盒子模型。设置元素的 height/width 属性指的是 border + padding + content 部分的高/宽 该模型也叫怪异盒模型

三、CSS 引入方式？​

1. 行内式

直接写在标签（元素）内，通过标签属性 style 引入------工作中不用

<div style="color:red;">行内式</div>
div 标签 style 标签属性名 "color:red;" 标签属性值

2. 内嵌式

将 CSS 代码放在 style 元素内，在通过 CSS 选择器来选择 HTML 元素，把 CSS 样式添加给这个元素

• style 元素一般都会放在 head 元素内，在 title 标题的后面

<style>
  div {
    color: red;
  }
</style>
<div>内嵌式</div>

3. 外链式

将 CSS 代码单独放在一个 CSS 文件中，在通过 link 标签进行引入

• link 标签一般放在 head 元素内，放在 title 标题的后面
• 在项目中经常使用

<link rel="stylesheet" href="CSS.css" type="text/css" /> link 标签 rel="stylesheet" 样式表，不可缺少
href="" CSS文件地址、路径 type="text/css" 类型 可以不写，建议写全

4. 导入式

'import' "CSS 文件地址"; 都是引入一个单独的 CSS 文件

• @import 放在 style 元素内
• @import 既不是标签，也不是 CSS 样式，是一条声明语句
• @import

<style>
  @import 'CSS.css';
</style>

外链式（link）和导入式（import）的区别​

1. 加载顺序： 外链式：同步加载 HTML 结构和 CSS 样式 导入式：先加载 HTML 结构，加载完成后再加载 CSS 样式
2. 引入方式： 外链式：使用 link 标签引入 导入式：@import 不是标签也不是 CSS 样式，只是一条声明语句
3. 当使用 javascript 控制 DOM 去改变 css 样式的时候，只能使用 link 标签，因为 import 是不能被 DOM 控制的。

四、 CSS 选择器​

语法：CSS 选择器{CSS 样式（CSS 属性名：CSS 属性值；）}

CSS 属性名和属性值之间用冒号":"隔开，用分号";"结束 ![Alt text]

CSS 选择器的分类​

1. 通配符选择器

匹配了所有的 HTML 元素 语法：{CSS 属性名：CSS 属性值} 权重：0<<1

在项目中，通配符选择器不用。它匹配了所有的 HTML 标签，比较消耗性能。

<style>
  * {
    margin: 0;
    padding: 0;
  }
</style>

2. 标签选择器

直接把 HTML 标签当做选择器来用 权重：1

标签选择器会选择 HTML 标签中所有的相同的标签

<style>
  （匹配所有的div标签） div {
    color: red;
  }
</style>

<div>div1</div>

<span>区分行内小模块</span>

<p>段落</p>

<div>div2</div>

3. 类选择器

将 HTML 元素后面添加一个 class 标签属性，利用标签属性值当做选择器来用，在标签属性值前面加一个点"." 权重：10

标签属性值（类名）可以重复使用 标签属性值（类名）客户以有多个，标签属性值（类名）之间用空格隔开 标签属性值：不能是数字，不能以数字开头，不能是中文

<style>
  /*类选择器*/
  .div1 {
    color: yellow;
  }
  .title {
    color: green;
  }
</style>

<div class="div1">div1</div>
<p class="div1 title">段落</p>

4. id 选择器

将 HTML 元素后面添加一个 class 标签属性，利用标签属性值当做选择器来用，在标签属性值前面加一个点"#" 权重：100

id 选择器具有唯一性，不能重名 id 选择器是配合 JS 来使用的

<style>
  #div2 {
    color: red;
  }
</style>
<div class="div1" id="div2">div标签</div>
<p id="div2">错误的 id唯一</p>

5. 后代选择器(派生选择器)

在一个根元素（大盒子）的范围内，查找它的后代元素 语法：祖辈选择器 后代元素{} 权重：所有选择器权重相加之和

后代选择器之间用空格隔开

.box ol li a span{ color:blue; }

6. 分组选择器

将同一份 CSS 样式分别给了不同的 HTML 元素，并给这个元素添加 CSS 样式 语法：选择器 1,选择器 2,选择器 3{CSS 样式} 权重：独立计算的，不会叠加

h2,div,p{ color:red; }

7. 标签属性选择器

利用标签属性名和标签属性值来当做选择器来使用。选择 HTML 元素 语法：[标签属性名]{CSS 样式} [标签属性名=标签属性值]{CSS 样式} 权重：10

如果遇到 HTML 元素中带有 class 标签属性时，一般都用类选择器来选择 HTML 元素，不会使用标签属性选择器

[class]{ color: red; } [class=div1]{ color: green; } [title]{ color: gray; } [title=div2]{ color:
pink; }
<div class="div1" title="div2">div元素</div>

8. 交集选择器

两种选择器同属一个元素时，可以用交集选择器来准确选择 HTML 元素 权重：所有选择器相加之和

交集选择器的组成：标签选择器和类选择器、标签选择器和标签属性选择器、标签选择器和 id 选择器、类选择器和标签属性选择器

div.div1{ color: red; } div[title]{ color: green; } .div1[title]{ color: deeppink; }
<div class="div1" title="div2">div元素</div>

9. 子级选择器

存在于包含关系的元素选择，通过父级来选择子级 语法：父级选择器>子级选择器{CSS 样式} 权重：所有选择器权重之和

<style>
  ol > li > a > span {
    color: red;
  }
</style>

<div class="box">
  <ol>
    <li>
      <a href="">
        <span> span1元素 </span>
      </a>
    </li>
  </ol>
  <ul>
    <li>
      <a href="">
        <span>span2元素</span>
      </a>
    </li>
  </ul>
</div>

10. 伪类选择器

给 HTML 元素添加某种状态，例如：鼠标经过时的状态，鼠标点击时的状态、鼠标点击后的状态 权重：10（一般不会计算）

伪类选择器在项目中常用的状态是a:hover{}鼠标经过时的状态

a:link {
} //默认的状态---被高版本浏览器废弃
a:hover {
} //鼠标经过时的状态----常用
a:active {
} //鼠标点击时的状态
a:visited {
} //鼠标点击后的状态

CSS 选择器​

• id 选择器(#myid)、
• 类选择器(.myclassname)、
• 标签选择器(div, h1, p)、
• 相邻选择器(h1 + p)、
• 子选择器（ul > li）、
• 后代选择器（li a）、
• 通配符选择器（*）、
• 属性选择器（a[rel="external"]）、
• 伪类选择器（a:hover, li:nth-child）

四、CSS 继承​

不可以继承的属性​

1. display 相关的属性不可以继承； - display:inline; - display: block; - display:inline-block;
2. 盒子模型所有属性都不可以继承 - width/height - padding - border - margin
3. 背景类 - background-color 背景颜色 - 给父元素加背景颜色 子元素视觉是收到影响 但是不继承
4. 定位属性 - float 浮动 - clear 清除浮动 - overflow:hidden

可以继承的样式属性​

1. 字体相关的属性 - color 字体颜色 - font-size 字体大小 - font-weight 字体粗细 - font-style 字体风格类型 - font-family 字体的额类型 宋体/微软雅黑
2. 文本相关 - line-height 行高 - text-align 文本对齐的方式 - text-indent 首段缩进
3. 文本类型属性 - 下划线可以继承 text-decoration:none 必须加上

css 常见的 bug​

1. css 样式的花括号后面一定不要加分号，会使得分号后面的样式不生效

五、伪类和伪元素​

CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态

/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}

常用的伪类：:hover, :active :first :not :visited :focus p:first-of-type 选择属于其父元素的首个元素 p:last-of-type 选择属于其父元素的最后元素 p:only-of-type 选择属于其父元素唯一的元素 p:only-child 选择属于其父元素的唯一子元素 p:nth-child(2) 选择属于其父元素的第二个子元素 :enabled :disabled 表单控件的禁用状态。 :checked 单选框或复选框被选中。

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式,类似插入一个HTML元素

/* 每一个 <p> 元素的第一行。 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}
常用的伪元素 ： ::before, ::after, ::first-line, ::first-letter

六、垂直居中​

1.定位​

posttion:

• static: 默认值，不会发生任何变化
• relative: 相对定位,相对定位的元素不会离开常规流, 相对于原来的自身
• absolute: 绝对定位,元素会被移出正常文档流，并不为元素预留空间， (元素会被移出正常文档流,相对于最近的非static定位元素)
• fixed: 固定定位,元素会被移出正常文档流，并不为元素预留空间，相对于相对于屏幕视口
• sticky : 粘性定位, 相对于最近滚动的祖先和块级祖先，元素会被移出正常文档流，并不为元素预留空间，相对于相对于屏幕视口

1.如何居中 div？​

1. 使用表格的 vertical-align property 属性

<div id="wrapper">
  <div id="cell">
    <div class="content">Content goes here</div>
  </div>
</div>

#wrapper {
  display: table;
}

#cell {
  display: table-cell;
  vertical-align: middle;
}

2. 相对定位

<div class="content">Content goes here</div>

#content {
  position: absolute;
  top: 50%;
  height: 240px;
  margin-top: -120px; /* negative half of the height */
}

3. 绝对定位

#content {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 240px;
  width: 70%;
}

3. 位移

.wp {
  position: relative;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. 转换为行内块

.wp {
  line-height: 300px;
  text-align: center;
  font-size: 0px;
}
.box {
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
  line-height: initial;
  text-align: left; /* 修正文字 */
}

5. flex

.wp {
  display: flex;
  justify-content: center;
  align-items: center;
}

6. grid

.wp {
  display: grid;
}
.box {
  align-self: center;
  justify-self: center;
}

2. 如何居中一个浮动元素？

.box {
  float: left;
  width: 100px;
  height: 100px;
  margin-left: calc(50% - 50px);
}

一般如果想让元素居中就不会用浮动了

3. 如何让绝对定位(position:absolute)的 div 居中？

.wp {
  position: relative;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. 如何让固定定位(position:fixed)的 div 居中？

#content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 240px;
  width: 70%;
}

七、常见的兼容性问题？​

1. 不同浏览器的标签默认的 margin 和 padding 不一样。 *{margin:0;padding:0;}

2. IE6 双边距 bug：块属性标签 float 后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大。hack：display:inline;将其转化为行内属性。

3. 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将 IE 浏览器从所有情况中分离出来。接着，再次使用“+”将 IE8 和 IE7、IE6 分离开来，这样 IE8 已经独立识别。

   {
   background-color:#f1ee18;/_所有识别_/
   .background-color:#00deff\9; /_IE6、7、8 识别_/
   +background-color:#a200ff;/_IE6、7 识别_/
   \_background-color:#1e0bd1;/_IE6 识别_/
   }
   

   Copy

   <!--只兼容IE8-->
   <!--[if IE 8]>
     <style></style>
   <![endif]-->
   
   <!--兼容IE10及以下浏览器-->
   <!--[if lt IE 10]>
     <style></style>
   <![endif]-->
   
   <!--兼容IE8及以上浏览器-->
   <!--[if gt IE 8]>
     <style></style>
   <![endif]-->
   

   Copy

4. 设置较小高度标签（一般小于 10px），在 IE6，IE7 中高度超出自己设置高度。hack：给超出高度的标签设置 overflow:hidden;或者设置行高 line-height 小于你设置的高度。

5. IE 下，可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute()获取自定义属性；Firefox 下，只能使用 getAttribute()获取自定义属性。解决方法:统一通过 getAttribute()获取自定义属性。

6. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

7. 超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不再具有 hover 和 active 了。解决方法是改变 CSS 属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

八、CSS 里的 visibility 属性有个 collapse 属性值？在不同浏览器下以后什么区别？​

当一个元素的 visibility 属性被设置成 collapse 值后，对于一般的元素，它的表现跟 hidden 是一样的。

chrome 中，使用 collapse 值和使用 hidden 没有区别。 firefox，opera 和 IE，使用 collapse 值和使用 display：none 没有什么区别。

九、 display:none 与 visibility：hidden 的区别？​

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘） visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

十、position 跟 display、overflow、float 这些特性相互叠加后会怎么样？​

display 属性规定元素应该生成的框的类型；position 属性规定元素的定位类型；float 属性是一种布局方式，定义元素在哪个方向浮动。 类似于优先级机制：position：absolute/fixed 优先级最高，有他们在时，float 不起作用，display 值需要调整。float 或者 absolute 定位的元素，只能是块元素或表格。

原因是行内元素添加 float 样式之后就会变成块儿元素，position 不会

十一、对 BFC 规范(块级格式化上下文：block formatting context)的理解？​

BFC 规定了内部的 Block Box 如何布局。 定位方案：

1. 内部的 Box 会在垂直方向上一个接一个放置。
2. Box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
3. 每个元素的 margin box 的左边，与包含块 border box 的左边相接触。
4. BFC 的区域不会与 float box 重叠。
5. BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
6. 计算 BFC 的高度时，浮动元素也会参与计算。

满足下列条件之一就可触发 BFC

1. 根元素，即 html
2. float 的值不为 none（默认）
3. overflow 的值不为 visible（默认）
4. display 的值为 inline-block、table-cell、table-caption
5. position 的值为 absolute 或 fixed

十二、为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？​

浮动会使得元素脱离文档流，不再随文档从上往下排列，如果父级元素下的元素都设置了浮动，就要给父级清浮动

清浮动的方式​

第一种：给父级元素添加overflow:hidden
.ovh{
overflow:hidden;
}

第二种：给父级元素添加clear:both **常用**
.clear{
　clear:both;
}

第三种：给父级元素使用伪元素来清除浮动
.clearfix:after{
　content:"";//设置内容为空
　height:0;//高度为0
　line-height:0;//行高为0
　display:block;//将文本转为块级元素
　visibility:hidden;//将元素隐藏
　clear:both//清除浮动
}
.clearfix{
　zoom:1;为了兼容IE
}

第四种：使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}

十四、浏览器是怎样解析 CSS 选择器的？​

从右往左

1. HTML 经过解析生成 DOM Tree（这个我们比较熟悉）；而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。Render Tree 中的元素（WebKit 中称为「renderers」，Firefox 下为「frames」）与 DOM 元素相对应，但非一一对应：一个 DOM 元素可能会对应多个 renderer，如文本折行后，不同的「行」会成为 render tree 种不同的 renderer。也有的 DOM 元素被 Render Tree 完全无视，比如 display:none 的元素。

2. 在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 renderer。对于每个 DOM 元素，必须在所有 Style Rules 中找到符合的 selector 并将对应的规则进行合并。选择器的「解析」实际是在这里执行的，在遍历 DOM Tree 时，从 Style Rules 中去寻找对应的 selector。

3. 因为所有样式规则可能数量很大，而且绝大多数不会匹配到当前的 DOM 元素（因为数量很大所以一般会建立规则索引树），所以有一个快速的方法来判断「这个 selector 不匹配当前元素」就是极其重要的。 如果正向解析，例如「div div p em」，我们首先就要检查当前元素到 html 的整条路径，找到最上层的 div，再往下找，如果遇到不匹配就必须回到最上层那个 div，往下再去匹配选择器中的第一个 div，回溯若干次才能确定匹配与否，效率很低。

4. 逆向匹配则不同，如果当前的 DOM 元素是 div，而不是 selector 最后的 em，那只要一步就能排除。只有在匹配时，才会不断向上找父节点进行验证。

5. 但因为匹配的情况远远低于不匹配的情况，所以逆向匹配带来的优势是巨大的。同时我们也能够看出，在选择器结尾加上「*」就大大降低了这种优势，这也就是很多优化原则提到的尽量避免在选择器末尾添加通配符的原因。

出处：https://www.cnblogs.com/aaronjs/p/3300797.html

十五、怎么让 Chrome 支持小于 12px 的文字？​

p {
  font-size: 10px;
  -webkit-transform: scale(0.8);
} //0.8是缩放比例

十六、CSS 属性 overflow 属性定义溢出元素内容区的内容会如何处理?​

visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 溢出部分会被隐藏，并且其余内容是不可见的。 scroll 溢出部分会被隐藏，但是浏览器会显示滚动条以便查看其余的内容。 auto 溢出部分会被隐藏，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。

Grid 布局​

1. display: grid 指定一个容器采用网格布局。

2. grid-template-columns 属性，grid-template-rows 属性

• 容器指定了网格布局以后，接着就要划分行和列。grid-template-columns 属性定义每一列的列宽，grid-template-rows 属性定义每一行的行高。
• 除了使用绝对单位，也可以使用百分比。

1. repeat()

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用 repeat()函数，简化重复的值。上面的代码用 repeat()改写如下。

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

1. auto-fill 关键字

有时，单元格的大小是固定的，但是容器的大小不确定.自动填充，直到容器不能放置更多的列。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

1. fr

网格布局提供了 fr 关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为 1fr 和 2fr，就表示后者是前者的两倍。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

1. minmax

函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

上面代码中，minmax(100px, 1fr)表示列宽不小于 100px，不大于 1fr。

1. auto

auto 关键字表示由浏览器自己决定长度。 grid-template-columns: 100px auto 100px;

1. 网格线的名称

还可以使用方括号，指定每一根网格线的名字，方便以后的引用。网格布局为 3 行 x 3 列，因此有 4 根垂直网格线和 4 根水平网格线。方括号里面依次是这八根线的名字。

网格布局允许同一根线有多个名字，比如[fifth-line row-5]。

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

1. 实例:grid-template-columns 属性对于网页布局非常有用。两栏式布局只需要一行代码。

   1. 两栏布局

      .wrapper {
        display: grid;
        grid-template-columns: 70% 30%;
      }
      

      Copy

   2. 传统的十二网格布局，写起来也很容易。 grid-template-columns: repeat(12, 1fr);

2. grid-row-gap 属性设置行与行的间隔（行间距），grid-column-gap 属性设置列与列的间隔（列间距）

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

4. grid-gap

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

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

5. grid-template-areas (再看看)

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas 属性用于定义区域

6. grid-auto-flow 属性

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序 grid-auto-flow:row //即"先行后列" grid-auto-flow:column //即"先列后行" grid-auto-flow: row dense; //表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。 grid-auto-flow: column dense; //表示"先列后行"，并且尽量填满空格。

grid-auto-flow:row grid-auto-flow:row grid-auto-flow:row dense grid-auto-flow:row dense grid-auto-flow:column dense grid-auto-flow:column dense

7. justify-content 属性，align-content 属性,place-content 属性

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

place-content: <align-content> <justify-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;
}

8. justify-items ,align-items ,place-items

justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格内容的垂直位置（上中下）。 place-items 属性是 align-items 属性和 justify-items 属性的合并简写形式。 place-items: <align-items> <justify-items>;//如果省略第二个值，则浏览器认为与第一个值相等。

9. grid-auto-columns ,grid-auto-rows

比如网格只有 3 列，但是某一个项目指定在第 5 行。这时，浏览器会自动生成多余的网格，以便放置项目。grid-auto-columns 属性和 grid-auto-rows 属性用来设置，浏览器自动创建的多余网格的列宽和行高. 一般会有 grid-row-start ，grid-column-start， 这两个属性

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px;
}```

10. grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性

    网格线， 是从 1 开始的啊 grid-column-start 属性：左边框所在的垂直网格线 grid-column-end 属性：右边框所在的垂直网格线 grid-row-start 属性：上边框所在的水平网格线 grid-row-end 属性：下边框所在的水平网格线

11. grid-column 属性，grid-row 属性 grid-column 属性是 grid-column-start 和 grid-column-end 的合并简写形式，grid-row 属性是 grid-row-start 属性和 grid-row-end 的合并简写形式

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

    #container {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      grid-template-areas:
        'a b c'
        'd e f'
        'g h i';
    }
    .item-1 {
      grid-area: e;
    }
    

    Copy

    grid-area 属性还可用作 grid-row-start、grid-column-start、grid-row-end、grid-column-end 的合并简写形式，直接指定项目的位置。

    .item {
      grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
    }
    

    Copy

    .item-1 {
      grid-area: 1 / 1 / 3 / 3;
    }
    

    Copy

13. justify-self 属性，align-self 属性，place-self 属性

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

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