HTML5+CSS3(十一)-全面详解（学习总结---从入门到深化）

圆角 ☀️

💕💕💕使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角” border-radius 属性，可以使用以下规则：

⭐️ 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
⭐️ 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
⭐️ 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
⭐️ 一个值： 四个圆角值相同

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

div{
    margin: 10px;
}
.box1 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
.box2 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
.box3 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

学习效果反馈 ⭐️⭐️⭐️

🌟🌟🌟 将一个正方形盒子改成圆形，下列哪个设置可以实现：{border-radius:50%;}

阴影 ❄️

盒阴影 💦

💖💖💖 box-shadow 向框添加一个或多个阴影。

box-shadow: h-shadow v-shadow blur spread color inset;

<div class="box"></div>

.box {
    width: 200px;
    height: 200px;
    background-color: #8ac007;
    margin: 50px;
    box-shadow: 10px 10px green;
}

🔥 给阴影添加一个模糊效果

.box {
    width: 200px;
    height: 200px;
    background-color: #8ac007;
    margin: 50px;
    box-shadow: 10px 10px 5px green;
}

🔥 三个方向的阴影效果

.box {
    width: 200px;
    height: 200px;
    background-color: #8ac007;
    margin: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

🔥 内阴影效果

.box {
    width: 200px;
    height: 200px;
    background-color: #8ac007;
    margin: 50px;
    box-shadow: 0 0 30px rgba(0,0,0,.5) inset;
}

🔥 字阴影

⭐️⭐️⭐️ text-shadow 属性向文本设置阴影

text-shadow: h-shadow v-shadow blur color;

<h1>我是标题</h1>

h1 {
    font-size: 30px;
    text-shadow: 5px 5px 5px #FF0000;
}

⭐️⭐️⭐️ 学习效果反馈

完成一个水平垂直阴影位置为0，模糊度为10px，放大5px，颜色为黑色半透明： box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5);

背景渐变 🌀

⭐️⭐️⭐️ CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
为了创建一个渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）

background: linear-gradient(direction, color-stop1, color-stop2, ...);

🔥 从上到下（默认情况下）

<div class="box"></div>

.box {
    width: 300px;
    height: 300px;
    background: linear-gradient(red, blue);
}

🔥从左到右

<div class="box"></div>

.box {
    width: 300px;
    height: 300px;
    background:linear-gradient(to right, red , blue);
}

🔥对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变

.box {
    width: 300px;
    height: 300px;
    background: linear-gradient(to bottom right, red , blue);
}

🔥使用角度

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）

background: linear-gradient(angle, colorstop1, color-stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变

.box {
    width: 300px;
    height: 300px;
    background: linear-gradient(100deg, red, blue);
}

图片上面定位文字，实现渐变 🔥

background: lineargradient(120deg,#ff3149,#ff64a6);

学习效果反馈 ⭐️⭐️⭐️

1.实现9点钟方向的渐变：linear-gradient(-90deg, red, blue);

☁️

转换

转换的效果是让某个元素改变形状，大小和位置 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

transform: none|transform-functions;

translate方法 ⭐️⭐️⭐️

translate() 方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动

<div class="box"></div>

.box {
    width: 100px;
    height: 80px;
    background-color: rgba(255, 0, 0, .8);
    transform: translate(50px, 100px);
}

rotate方法

rotate() 方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

<div class="box"></div>

.box {
    width: 100px;
    height: 80px;
    background-color: rgba(255, 0, 0, .8);
    transform: rotate(30deg);
}

scale方法 🔥

scale() 方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

<div class="box"></div>

.box {
    width: 100px;
    height: 80px;
    background-color: rgba(255, 0, 0, .8);
    transform: scale(2,3);
}

缩放实现将Chrome默认12px缩小为6px 🔥

<p>将字体缩小为6px</p>

p{
    font-size: 12px;
    transform: scale(0.5);
}

skew方法

skew() 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜

<div class="box"></div>

.box {
    width: 100px;
    height: 80px;
    background-color: rgba(255, 0, 0, .8);
    transform: skew(30deg,20deg);
}

rotateX方法 🔥

rotateX() 方法，围绕其在一个给定度数X轴旋转的元素

<div class="box">文本查看信息</div>

.box {
    width: 100px;
    height: 80px;
    background-color: rgba(255, 0, 0, .8);
    transform: rotateX(120deg);
}

rotateY方法 🔥

rotateY() 方法，围绕其在一个给定度数Y轴旋转的元素

<div class="box">文本查看信息</div>

.box {
    width: 100px;
    height: 80px;
    background-color: rgba(255, 0, 0, .8);
    transform: rotateY(120deg);
}

实现小米官网动画效果

<div class="box"></div>

.box {
    width: 200px;
    height: 250px;
    background-color: #8ac007;
    margin: 50px;
}
.box:hover{
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    transform: translate3d(0,-2px,0);
}

学习效果反馈 ⭐️⭐️⭐️

下列哪个方法可以将字体缩小到6px： scale

过渡 ⚡️

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果 通过过渡 transition ，可以让web前端开发人员不需要 javascript 就可以实现简单的动画交互效果

<div class="box"></div>

.box {
    width: 100px;
    height: 80px;
    background-color: rgba(255, 0, 0, .8);
    transition: width 2s ease 1s;
}
.box:hover{
    width: 500px;
}

实现小米官网动画效果

<div class="box"></div>

.box {
    width: 200px;
    height: 250px;
    background-color: #8ac007;
    margin: 50px;
    transition: all .2s linear;
}
.box:hover{
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    transform: translate3d(0,-2px,0);
}

学习效果反馈 ⭐️⭐️⭐️

1.过渡效果属性中， transition-duration 属性的作用是： 过渡效果花费的时间

🌊动画

动画是使元素从一种样式逐渐变化为另一种样式的效果 您可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100% 0% 是动画的开始，100% 是动画的完成。

@keyframes创建动画 ⭐️

使用 @keyframes 规则，你可以创建动画

@keyframes name {
    from|0%{
   css样式
   }
    percent{
   css样式
   }
    to|100%{
   css样式
   }
}

name：动画名称，开发人员自己命名；
percent：为百分比值，可以添加多个百分比值；

animation执行动画 ⭐️

animation: name duration timing-function delay iteration-count direction;

切换背景颜色 ⭐️

<div class="animation"></div>

.animation {
    width: 300px;
    height: 300px;
    background-color: red;
    animation: anima 5s linear 5s infinite;
}
.animation:hover {
    animation-play-state: paused;
}
@keyframes anima {
    0% {
        background-color: red;
   }
    50% {
        background-color: green;
   }
    100% {
        background-color: blueviolet;
   }
}

呼吸效果 ⭐️

<div class="box"></div>

.box {
    width: 500px;
    height: 400px;
    margin: 40px auto;
    background-color: #2b92d4;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    /* animation-timing-function: ease-inout;
   animation-name: breathe;
   animation-duration: 2700ms;
   animation-iteration-count: infinite;
   animation-direction: alternate; */
   animation: breathe 2700ms ease-in-out
   infinite alternate;
}
@keyframes breathe {
    0% {
        opacity: .2;
        box-shadow: 0 1px 2px rgba(255, 255,255, 0.1)
   }
    50% {
        opacity: .5;
        box-shadow: 0 1px 2px rgba(18, 190,84, 0.76)
   }
    100% {
        opacity: 1;
        box-shadow: 0 1px 30px rgba(59, 255,255, 1)
   }
}

学习效果反馈 ⭐️⭐️⭐️

动画属性中， iteration-count: infinite 属性的作用是：设置动画无限循环

绘制特殊图形 🔥

绘制三角形 🔥

制作三角型使用的是border属性，内容区宽高值为0

<div class="box"></div>

.box {
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid blue;
}

绘制梯形 🔥

绘制三角型时宽和高都是0像素，给它加100的宽度看看效果

.box {
    width: 100px;
    height: 0;
    border-bottom: 80px solid red;
    border-left: 50px solid green;
    border-right: 50px solid yellow;
}

学习效果反馈 ⭐️⭐️⭐️

1.绘制一个向右的箭头：
​​​.box { width: 0; height: 0; border-top: 50px solid transparent; border-left: 50px solid red; border-right: 50px solid transparent; border-bottom: 50px solid transparent; }​​

媒体查询 🌁

媒体查询能使页面在不同在终端设备下达到不同的效果
媒体查询会根据设备的大小自动识别加载不同的样式

设置meta标签 🌸

使用设备的宽度作为视图宽度并禁止初始的缩放。在 < head > 标签里加入这个meta标签。

<meta name="viewport" content="width=devicewidth, initial-scale=1,maximum-scale=1, userscalable=no">

媒体查询语法 🌸

@media screen and (max-width: 768px) {
 /* 设备小于768px加载样式 */
    body{
        background-color: red;
   }
}
@media screen and (max-width: 992px) and (min-width: 768px) {
     /* 设备小于768px但小于992px加载样式 */
     body{
         background-color: pink;
     }
}
@media screen and (min-width: 992px) {
 /* 设备大于992px加载样式 */
    body{
   background-color: green;
   }
}

学习效果反馈 ⭐️⭐️⭐️

1.下列代码媒体查询，运行在手机屏幕宽度为800px的设备上，背景颜色是：pink(粉色)

@media screen and (max-width: 768px) {
    body{
        background-color: red;
   }
}
@media screen and (max-width: 992px) and
(min-width: 768px) {
     body{
     background-color: pink;
     }
}
@media screen and (min-width: 992px) {
    body{
   background-color: green;
   }
}

响应式布局 ⛄️

一说到响应式设计，肯定离不开媒体查询media

响应式布局意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式

响应式布局实例 🌸

<div class="container-fluid">
   <div class="nav">
       <div class="list">
           <ul>
               <li class="select"><a href="#">首页</a></li>
               <li><a href="#">电脑</a></li>
               <li><a href="#">手机</a></li>
               <li><a href="#">电视</a></li>
           </ul>
           <div class="search">
               <input type="text" placeholder="手机">
           </div>
       </div>
   </div>
</div>

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #f1f1f1;
}
.nav{
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #555;
}
.nav ul{
    float: left;
}
.nav ul li{
    list-style: none;
    float: left;
    padding: 0 20px;
    }
.nav ul li a{
    text-decoration: none;
    color: #fff;
    font-size: 16px;
}
.select{
    background-color: #333;
}
.nav .search{
    float: right;
    width: 400px;
    height: 100%;
    text-align: right;
    line-height: 50px;
}
.nav .search input{
    width: 200px;
    height: 30px;
    border-radius: 50px;
    border:0;
    padding-left: 10px;
}

@media screen and (max-width: 768px) {
    .nav .search {
        display: none;
   }
    .nav .list {
        width: 100%;
        margin: 0 10px;
   }
}
@media screen and (max-width: 992px) and (min-width: 768px) {
    .nav .search {
        display: block;
   }
    .nav .list {
        width: 800px;
        margin: 0 auto;
   }
}
@media screen and (min-width: 992px) {
    .nav .search {
        display: block;
   }
    .nav .list {
        width: 1240px;
        margin: 0 auto;
   }
}

学习效果反馈 ⭐️⭐️⭐️

下列关于响应式布局描述错误的是：同时加载多种样式，并且全部可以显示出来

栅格系统🌏

栅格系统是媒体查询的具体实现
栅格系统将页面自动分为12个格子，可以根据不同的类前缀实现不同的页面布局

栅格系统实操 🔥

多列 🔥

CSS3 可以将文本内容设计成像报纸一样的多列布局

创建多列 🔥

column-count 属性指定了需要分割的列数

div {
 column-count: 3;
}

列与列之间的间隙 🔥

column-gap 属性指定了列与列间的间隙
​​​div { column-gap: 40px; }​​

列边框 🔥

column-rule-style 属性指定了列与列间的边框样式
​​​div { column-rule-style: solid; }​​

column-rule-width 属性指定了两列的边框厚度
​​​div { column-rule-width: 1px; }​​

column-rule-color 属性指定了两列的边框颜色
​​​div { column-rule-color: lightblue; }​​

column-rule 属性是 column-rule-* 所有属性的简写
​​​div { column-rule: 1px solid lightblue; }​​

学习效果反馈

1.下列哪个属性可以设置多列列数：column-count

Grid_网格布局基础 💤

网格布局（Grid）是最强大的 CSS 布局方案。
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种
各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了

上图这样的布局，就是 Grid 布局的拿手好戏 学习 Grid 布局之前，需要了解一些基本概念

容器和项目 🔥

采用网格布局的区域，称为"容器"（container）。容器内部采用网
格定位的子元素，称为"项目"（item）

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

最外层的 < div> 元素就是容器，内层的三个 < div> 元素就是项目行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）
水平的深色区域就是"行"，垂直的深色区域就是"列"

单元格 🔥

行和列的交叉区域，称为"单元格"（cell）。
正常情况下， n 行和 m 列会产生 n x m 个单元格。比如，3行3列会产生9个单元格

网格线 🔥

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，
垂直网格线划分出列。
正常情况下， n 行有 n + 1 根水平网格线， m 列有 m + 1 根垂直网格线，比如三行就有四根水平网格线
一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线

Grid_容器属性1💦

Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；

另一类定义在项目上面，称为项目属性。

display 属性 🔥

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

<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 class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

#container {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
}
.item {
    font-size: 35px;
    text-align: center;
    border: 1px solid #e5e4e9;
}
.item-1 {
    background-color: #ef342a;
}
.item-2 {
    background-color: #f68f26;
}
.item-3 {
    background-color: #4ba946;
}
.item-4 {
    background-color: #0376c2;
}
.item-5 {
    background-color: #c077af;
}
.item-6 {
    background-color: #f8d29d;
}
.item-7 {
    background-color: #b5a87f;
}
.item-8 {
    background-color: #d0e4a9;
}
.item-9 {
    background-color: #4dc7ec;
}

默认情况下，容器元素都是块级元素，但也可以设成行内元素

#container {
    display: inline-grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
}

学习效果反馈 ⭐️⭐️⭐️

1.下列哪个属性可以设置容器为Grid布局： display:grid

Grid_容器属性2 😈

容器指定了网格布局以后，接着就要划分行和列 grid-template-columns 属性定义每一列的列宽 grid-template-rows 属性定义每一行的行高

<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 class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

#container {
    display: grid;
    grid-template-columns: 100px 100px
100px;
    grid-template-rows: 100px 100px 100px;
}
.item {
    font-size: 4em;
    text-align: center;
    border: 1px solid #e5e4e9;
}
.item-1 {
    background-color: #ef342a;
}
.item-2 {
    background-color: #f68f26;
}
.item-3 {
    background-color: #4ba946;
}
.item-4 {
    background-color: #0376c2;
}
.item-5 {
    background-color: #c077af;
}
.item-6 {
    background-color: #f8d29d;
}
.item-7 {
    background-color: #b5a87f;
}
.item-8 {
    background-color: #d0e4a9;
}
.item-9 {
    background-color: #4dc7ec;
}

除了使用绝对单位，也可以使用百分比

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

repeat()

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

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

auto-fill 关键字 🔥

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望
每一行（或每一列）容纳尽可能多的单元格，这时可以使用 auto-fill 关
键字表示自动填充

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

fr 关键字 🔥

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

#container {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr;
}

学习效果反馈 ⭐️⭐️⭐️

下列哪个属性可以设置Grid布局行与列的简化重复的值：repeat

Grid_容器属性3 💦

grid-row-gap 属性设置行与行的间隔（行间距）， grid-column-gap 属性设置
列与列的间隔（列间距） grid-gap 属性是 grid-column-gap 和 grid-row-gap 的合并简写形式

<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 class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

#container {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr;
    grid-row-gap: 10px;
    grid-column-gap: 20px;
}
.item {
    font-size: 4em;
    text-align: center;
    border: 1px solid #e5e4e9;
}
.item-1 {
    background-color: #ef342a;
}
.item-2 {
    background-color: #f68f26;
}
.item-3 {
    background-color: #4ba946;
}
.item-4 {
    background-color: #0376c2;
}
.item-5 {
    background-color: #c077af;
}
.item-6 {
    background-color: #f8d29d;
}
.item-7 {
    background-color: #b5a87f;
}
.item-8 {
    background-color: #d0e4a9;
}
.item-9 {
    background-color: #4dc7ec;
}

grid-gap 属性是 grid-column-gap 和 grid-row-gap 的合并简写形式，语法如下

grid-gap: <grid-row-gap> <grid-column-gap>;

上面一段 CSS 代码等同于下面的代码

#container {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr;
    grid-gap: 10px 20px;
}

温馨提示

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

学习效果反馈

1.下列哪个属性可以设置Grid布局的行间距：grid-row-gap

Grid_容器属性4 💦

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。 grid-template-areas 属性用于定义区域
首先需要为每一个区域命名，然后将名字根据需求摆放位置及所占区域

<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 class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

#container {
    display: grid;
    grid-template-columns: 100px 100px
100px;
    grid-template-rows: 100px 100px 100px;
    grid-template-areas: 'item1 item1 item2'
                         'item1 item1 item3'
                         'item4 item5 item6'
                         'item7 item8 item9'
}
.item {
    font-size: 4em;
    text-align: center;
    border: 1px solid #e5e4e9;
}
.item-1 {
    grid-area:item1;
    background-color: #ef342a;
}
.item-2 {
    grid-area:item2;
    background-color: #f68f26;
}
.item-3 {
    grid-area:item3;
    background-color: #4ba946;
}
.item-4 {
    grid-area:item4;
    background-color: #0376c2;
}
.item-5 {
    grid-area:item5;
    background-color: #c077af;
}
.item-6 {
    grid-area:item6;
    background-color: #f8d29d;
}
.item-7 {
    grid-area:item7;
    background-color: #b5a87f;
}
.item-8 {
    grid-area:item8;
    background-color: #d0e4a9;
}
.item-9 {
    grid-area:item9;
    background-color: #4dc7ec;
}

学习效果反馈 ⭐️⭐️⭐️

下列哪个属性可以设置Grid布局的区域：grid-template-areas

Grid_容器属性5 💦

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行这个顺序由 grid-auto-flow 属性决定，默认值是 row ，即"先行后列"。也可以将它设成 column ，变成"先列后行"

<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 class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

#container {
    display: grid;
    grid-template-columns: 100px 100px
100px;
    grid-template-rows: 100px 100px 100px;
    grid-auto-flow:column;
}
.item {
    font-size: 4em;
    text-align: center;
    border: 1px solid #e5e4e9;
}
.item-1 {
    background-color: #ef342a;
}
.item-2 {
    background-color: #f68f26;
    }
.item-3 {
    background-color: #4ba946;
}
.item-4 {
    background-color: #0376c2;
}
.item-5 {
    background-color: #c077af;
}
.item-6 {
    background-color: #f8d29d;
}
.item-7 {
    background-color: #b5a87f;
}
.item-8 {
    background-color: #d0e4a9;
}
.item-9 {
    background-color: #4dc7ec;
}

学习效果反馈 ⭐️⭐️⭐️

1.下列哪个属性可以设置Grid布局网格的摆放顺序：grid-auto-flow

Grid_项目属性 💦

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线

<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 class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

#container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}
.item {
    font-size: 4em;
    text-align: center;
    border: 1px solid #e5e4e9;
}
.item-1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    background-color: #ef342a;
}
.item-2 {
    background-color: #f68f26;
}
.item-3 {
    background-color: #4ba946;
}
.item-4 {
    background-color: #0376c2;
}
.item-5 {
    background-color: #c077af;
}
.item-6 {
    background-color: #f8d29d;
}
.item-7 {
    background-color: #b5a87f;
}
.item-8 {
    background-color: #d0e4a9;
}
.item-9 {
    background-color: #4dc7ec;
}

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

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

学习效果反馈 ⭐️⭐️⭐️

1.下列哪个属性可以设置Grid布局的边框：grid-column