CSS学习笔记之高级教程(五)

23、CSS 媒体查询 - 实例

html 复制代码
/* 如果屏幕尺寸超过 600 像素,把 <div> 的字体大小设置为 80 像素 */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}

/* 如果屏幕大小为 600px 或更小,把 <div> 的字体大小设置为 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}
html 复制代码
@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
html 复制代码
/* 当宽度在 600 像素到 900 像素之间或大于 1100 像素时 - 更改 <div> 的外观 */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

23.1 下面演示一个简单的例子,让我们来更改不同设备的背景色:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    body{
      background-color: lightblue;
    }
    

    /* 响应式布局 - 当屏幕小于 700 像素宽时,让两列堆叠而不是并排 */
    @media screen and (max-width: 900px) {
      body {
        background-color: yellow;
      }
    }

    @media screen and (min-width: 600px) {
      body {
        background-color: pink;
      }
    }
  </style>
</head>

<body>



</body>

</html>

23.2 菜单的媒体查询

在本例中,我们使用媒体查询来创建响应式导航菜单,该菜单在不同的屏幕尺寸上会有所不同:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .container {
      background-color: #333;
      overflow: hidden;
    }

    .container a {
      color: white;
      text-decoration: none;
      padding: 15px 20px;
      display: block;
      float: left;
      font-size: 20px;
    }

    /* 在宽度为 600 像素或更小的屏幕上,使菜单链接彼此堆叠,而不是并排 */
    @media screen and (min-width: 500px) {
      .container a {
        float: left;
      }

      .container {
        background-color: pink;
      }
    }
     /* 在宽度为 900 像素或更大的屏幕上,使菜单链接彼此并排 */
     @media screen and (max-width: 900px) {
     
      .container a {
        float: none;
        /* width: 100%; */
      }

      .container {
        background-color: #333;
      }
    }
  </style>
</head>

<body>

  <div class="container">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
  </div>



</body>

</html>

23.3 列的媒体查询

媒体查询的常见用法是创建弹性布局。在本例中,我们创建了一个布局,该布局在四列、两列和全宽列之间变化,具体取决于不同的屏幕尺寸:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }

    /* 清除列后的浮动 */
    .container:after {
      content: "";
      display: table;
      clear: both;
    }

    .column {
      float: left;
      width: 25%;
      /* padding: 20px; */
    }




    /* 在宽度小于或等于 600px 的屏幕上,使列堆叠在一起,而不是彼此相邻 */
    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="column" style="background-color:#aaa;">
      <h2>Column 1</h2>
      <p>Some text..</p>
    </div>

    <div class="column" style="background-color:#bbb;">
      <h2>Column 2</h2>
      <p>Some text..</p>
    </div>

    <div class="column" style="background-color:#ccc;">
      <h2>Column 3</h2>
      <p>Some text..</p>
    </div>

    <div class="column" style="background-color:#ddd;">
      <h2>Column 4</h2>
      <p>Some text..</p>
    </div>



  </div>



</body>

</html>

或使用flex(响应布局)

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .container{
      display: flex;
      flex-wrap: wrap;
    }

    /* 清除列后的浮动 */
    .container:after {
      content: "";
      display: table;
      clear: both;
    }

    .column {
      flex: 25%;
      padding: 20px;
    }




    /* 在宽度小于或等于 600px 的屏幕上,使列堆叠在一起,而不是彼此相邻 */
    @media screen and (max-width: 600px) {
      .column {
        flex: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="column" style="background-color:#aaa;">
      <h2>Column 1</h2>
      <p>Some text..</p>
    </div>

    <div class="column" style="background-color:#bbb;">
      <h2>Column 2</h2>
      <p>Some text..</p>
    </div>

    <div class="column" style="background-color:#ccc;">
      <h2>Column 3</h2>
      <p>Some text..</p>
    </div>

    <div class="column" style="background-color:#ddd;">
      <h2>Column 4</h2>
      <p>Some text..</p>
    </div>



  </div>



</body>

</html>

24、CSS 网格布局模块

24.1 设置网格布局

  • HTML 元素的 display 属性设置为 gridinline-grid 时,它就会成为网格容器。
html 复制代码
.container{
	display:grid;
}
html 复制代码
.container{
	display:inline-grid;
}

这两者的区别是:

一个是块级;一个是行内块级

24.2 网格布局介绍

24.2.1 网格列(Grid Columns)

  • 网格项的垂直线被称为列。

24.2.2网隔行(Grid Rows)

  • 网格项的水平线被称为行。

24.2.3 网格间隙(Grid Gaps)

  • 每列/行之间的间隔称为间隙。

您可以通过使用以下属性之一来调整间隙大小:

  • grid-column-gap // 竖直间隙
  • grid-row-gap// 水平间隙
  • grid-gap // 是 row-gap 和column-gap 属性的简写属性,或者携程grid-gap;

24.2.4 网格行(Grid Lines)

列线与竖线

  • 列之间的线称为列线(column lines)。
  • 行之间的线称为行线(row lines)。

24.3 网格容器

24.3.1 grid-template-columns属性:定义网格布局中的列数,并可定义每列的宽度

后面几个数值就默认为几列

  • grid-template-columns: 100px 100px 100px 100px; (设置网格列数 这里设置为4列,每一列宽度为100px)
  • grid-template-columns: auto auto auto auto;(设置网格列数 这里设置为4列,每一列自动分配宽度来填满表格容器。
html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      .gird-container {
      /* 设置为网格布局,并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列,每一列宽度为100px */
      /* grid-template-columns: 100px 100px 100px 100px; */
      /* 设置网格列数 这里设置为4列,每一列宽度为1/4宽度 */
      grid-template-columns: auto auto auto auto;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
    }


    .grid-item{
      background-color: lightblue;
      padding: 20px;
      text-align: center;
      border: 1px solid white;
    }
  </style>
</head>

<body>

  <div class="gird-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
  </div>

</body>

</html>

运行效果:

24.3.1.2 通过使用repeat(重复次数,重复值)函数,可以简写重复的值。
  • 数值:直接设置重复次数,即列数
html 复制代码
  /* 相当于:grid-template-columns: 100px 100px 100px 100px; */
      grid-template-columns: repeat(4,100px);
  • auto-fill:表示自动填充,让一行或一列中尽可能地容纳更多的单元格。
html 复制代码
 /* 表示自动填充,让一行或一列中尽可能地容纳更多的单元格。 */
      grid-template-columns: repeat(auto-fill,200px);

运行效果:

24.3.1.3 比例fr:表示片段,为了方比那表示比例关系
html 复制代码
   /* 使用比例,表示第一个列宽度设置为200px,后面剩余的宽度被按照比例划分,分别为剩余宽度的1/3和2/3 */
      grid-template-columns: 200px 1fr 2fr;

运行效果:

24.3.1.4 范围minmax
  • minmax:产生一个长度范围,表示长度就在这个范围值中都可以应用到网格项目中。第一个参数就是最小值,第二个参数时最大值。
html 复制代码
/* 使用比例 */
      grid-template-columns: minmax(100px,300px);

24.3.2 grid-template-rows 属性:定义每列的高度

  • 其拥有和grid-template-columns差不多的属性值可选,例如:repeat()函数fr比例关系auto-fill自动填充minmax长度范围
html 复制代码
    .gird-container {
      /* 设置为网格布局,并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列,每一列宽度为1/4宽度 */
      grid-template-columns: auto auto auto auto;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
      /* 设置第一行 第二行 每一列的高度 */
      grid-template-rows: 100px 200px;
    }

运行效果:

24.3.3 justify-content 属性

  • justify-content 属性用于在容器内对齐整个网格。网格的总宽度必须小于容器的宽度,这样 justify-content 属性才能生效。
  • justify-content 属性(水平)对齐弹性容器的项目,当项目不占用主轴上所有可用空间时。
24.3.3.1 justify-content: flex-start;( 默认值。项目位于容器的开头。)
html 复制代码
 .gird-container {
      /* 设置为网格布局,并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列,每一列宽度为1/4宽度 */
      grid-template-columns: auto auto auto auto;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
      /* 设置第一行 第二行 每一列的高度 */
      /* grid-template-rows: 100px 200px; */
      /*  */
     justify-content: flex-start;
    }
24.3.3.2 justify-content: flex-end;( 项目位于容器的结尾。)
html 复制代码
  .gird-container {
      /* 设置为网格布局,并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列,每一列宽度为1/4宽度 */
      grid-template-columns: auto auto auto auto;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
      /* 设置第一行 第二行 每一列的高度 */
      /* grid-template-rows: 100px 200px; */
      /*  */
      justify-content: flex-end;
    }
24.3.3.3 justify-content: center;(项目位于容器中央。)
html 复制代码
.gird-container {
      /* 设置为网格布局,并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列,每一列宽度为1/4宽度 */
      grid-template-columns: auto auto auto auto;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
      /* 设置第一行 第二行 每一列的高度 */
      /* grid-template-rows: 100px 200px; */
      /*  */
      justify-content:center;
    }
24.3.3.4 justify-content: space-between;(项目在行与行之间留有间隔)
24.3.3.5 justify-content: space-around;( 项目在行之前、行之间和行之后留有空间。)

24.3.4 justify-items属性:(规定全部单元格在自身内部行内方向的对齐方式)

24.3.4.1 justify-items: start;
html 复制代码
  .gird-container {
      /* 设置为网格布局,并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列,每一列宽度为1/4宽度 */
      /* grid-template-columns: auto auto auto auto; */
      grid-template-columns: 1fr 1fr;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
      /* 设置第一行 第二行 每一列的高度 */
      /* grid-template-rows: 100px 200px; */
      /*  */
      /* justify-content:space-around; */
   /* 单元格内部对齐方式 */
      justify-items: start;
    }
24.3.4.2 justify-items: center;

24.3.5 align-content 属性:用于垂直方向对齐容器内的整个网格

24.3.5.1 align-content: end;
24.3.5.2 align-content: start;
24.3.5.3 align-content: center;
24.3.5.4 align-content: space-between;
24.3.5.4 align-content: space-around;
24.3.5.6 align-content: stretch;(默认值。行拉伸以占据剩余空间。)

24.3.6 align-items 属性:(用于设置网格内部全部单元格的垂直位置)

24.3.6.1 align-items: flex-start;
24.3.6.1 align-items: flex-end;

24.3.7 grid-auto-flow 属性

  • 默认情况下,网格中子元素的排列顺序都是"先行后列",填充完第一行之后,再开始放入第二行。
24.3.7.1 grid-auto-flow: column;
html 复制代码
   .gird-container {
      /* 设置为网格布局,并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列,每一列宽度为1/4宽度 */
      /* grid-template-columns: auto auto auto auto; */
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows:100px 100px;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
      /* 网格中子元素的排列顺序 */
      grid-auto-flow: column;
    }
24.3.7.2 grid-auto-flow: row;

24.4 网格项目

  • 容器中的子元素也叫做项目。
  • 通常容器在每一行的每一列都有一个网格项目,但是可以通过设置网格项目的样式,让它们跨越多个列或多个行。
  • 使用grid-column-start、grid-column-end、grid-column属性

示例:把网格项目放在列线 1,并在列线 3 结束它:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .gird-container {
      /* 设置为网格布局,并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列,每一列宽度为1/4宽度 */
      /* grid-template-columns: auto auto auto auto; */
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows:100px 100px;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
    }

    .gird-container div {
      background-color: lightblue;
      padding: 20px;
      border: 1px solid white;
    }
    .grid-item1{
      grid-column-start: 1;
      grid-column-end: 3;
      /*可简写为grid-column:1 / 3; */
    }
  </style>
</head>

<body>

  <div class="gird-container">
    <div class="grid-item1">1</div>
    <div class="grid-item2">2</div>
    <div class="grid-item3">3</div>
    <div class="grid-item4">4</div>
 
  </div>




</body>

</html>

示例:把网格项目放在行线 1,并在行线 3 结束它:

html 复制代码
 .grid-item1{
      /* grid-column-start: 1;
      grid-column-end: 3; */
      grid-row-start: 1;
      grid-row-end: 3;
            /*可简写为grid-row:1 / 3; */
    }

24.4.1grid-area 属性

该属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。
注意顺序

html 复制代码
/* 简写 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end */
         grid-area: 1 / 1 / 3 / 3;

表示使 "item1" 从 row-line 1 和 column-line 1 开始,在 row-line 3 和 column line 3 结束(包前不包后)即,横向和纵向各占位2个。

html 复制代码
.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}

表示使 "item8" 从 row-line 2 和 column-line 1开始,并跨越 2 行和 3 列

24.4.2 justify-self 属性:(单个网格项在行内方向的对齐方式。在网格项上设置。优先级比justify-items高。)

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .gird-container {
      /* 设置为网格布局,并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列,每一列宽度为1/4宽度 */
      grid-template-columns: auto auto auto auto;
      grid-template-rows:100px 100px;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
      /* 单元格位置(水平) */
      justify-items: start;
 
    }

    .gird-container div {
      background-color: lightblue;
      padding: 20px;
      border: 1px solid white;
    }
    .grid-item1{
      justify-self:flex-end;
    }
   
  </style>
</head>

<body>

  <div class="gird-container">
    <div class="grid-item1">1</div>
    <div class="grid-item2">2</div>
    <div class="grid-item3">3</div>
    <div class="grid-item4">4</div>
    <div class="grid-item5">5</div>
    <div class="grid-item6">6</div>
  </div>




</body>

</html>

24.4.3 align-self 属性:(该属性用于设置某个单元格内容的垂直位置,优先级比align-items高)

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .gird-container {
      /* 设置为网格布局,并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列,每一列宽度为1/4宽度 */
      grid-template-columns: auto auto auto auto;
      grid-template-rows:100px 100px;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
      /* 单元格位置(水平) */
      justify-items: start;
    /* 单元格位置(垂直) */
    align-items: flex-end;
 
    }

    .gird-container div {
      background-color: lightblue;
      padding: 20px;
      border: 1px solid white;
    }
    .grid-item1{
        /* 单元格位置(水平)  优先级高于justify-items*/
      justify-self:flex-end;
      /*  单元格位置(垂直)  优先级高于 align-items */
      align-self: flex-start;
    }
   
  </style>
</head>

<body>

  <div class="gird-container">
    <div class="grid-item1">1</div>
    <div class="grid-item2">2</div>
    <div class="grid-item3">3</div>
    <div class="grid-item4">4</div>
    <div class="grid-item5">5</div>
    <div class="grid-item6">6</div>
  </div>




</body>

</html>

24.5 实践

思路:参考24.2.4 网格行(Grid Lines)

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .gird-container {
      /* 设置为网格布局,并且占据页面一整行 */
      display: grid;
      background-color: #2196F3;
      padding: 10px;
      /* 设置网格列数 这里设置为4列,每一列宽度为1/4宽度 */
      grid-template-columns: auto auto auto ;
      /* 设置网格项目间间隙 */
      gap: 10px 10px;
 
    }

    .gird-container div {
      background-color: lightblue;
      padding: 20px;
      border: 1px solid white;
      text-align: center;
    }

    @media screen and (max-width: 600px) {
      /* .grid-item1{
        grid-area: 1 / 1 / span 1 / span 3;
      }
      .grid-item2{
        grid-area: 3 / 3 / 4 / 4;
      }

      .grid-item3{
        grid-area: 2 / 1 / 3 / 2;
      }

      .grid-item4{
        grid-area: 2 / 2 / 4 / 3;
      }

      .grid-item5{
        grid-area: 3 / 1 / 4 / 2;
      }
      
      .grid-item6{
        grid-area: 2 / 3 / 3 / 4;
      } */
      .grid-item1{
        grid-area: 1 / 1 / span 1 / span 3;
      }
      .grid-item2{
        grid-area: 3 / 3 / span 1 / span 1;
      }

      .grid-item3{
        grid-area: 2 / 1 / span 1 / span 1;
      }

      .grid-item4{
        grid-area: 2 / 2 / span 2 / span 1;
      }

      .grid-item5{
        grid-area: 3 / 1 / span 1 / span 1;
      }
      
      .grid-item6{
        grid-area: 2 / 3 / span 1 / span 1;
      }
    }
 
  </style>
</head>

<body>

  <div class="gird-container">
    <div class="grid-item1">1</div>
    <div class="grid-item2">2</div>
    <div class="grid-item3">3</div>
    <div class="grid-item4">4</div>
    <div class="grid-item5">5</div>
    <div class="grid-item6">6</div>
  </div>




</body>

</html>

24.6 对比flex

1、和flex布局相比之下的区别
Grid网格布局和flexbox的主要区别:flexbox是一维布局(沿横向或者纵向),Grid是二维布局(同时沿着横向和纵向)

举例:当使用flexbox布局,设置了flex-wrap :

nowrap;之后,换行后的元素并不会与上一行的元素对齐,当使用了nowrap之后,每个新行都变成了一个新的弹性容器,空间分布只在行内进行。

2、什么情况下选择grid布局还是flexbox布局?

可参考以下三点:

(1)换行需要与上一行元素对齐?选择Grid

(2)需要同时按行和列控制布局?选择Grid

(3)只需要按行或者列控制布局?选择flexbox

相关推荐
nbsaas-boot几秒前
如何利用ChatGPT加速开发与学习:以BPMN编辑器为例
学习·chatgpt·编辑器
dr李四维2 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
CV学术叫叫兽39 分钟前
一站式学习:害虫识别与分类图像分割
学习·分类·数据挖掘
我们的五年1 小时前
【Linux课程学习】:进程程序替换,execl,execv,execlp,execvp,execve,execle,execvpe函数
linux·c++·学习
酷酷的威朗普1 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
渊兮兮1 小时前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
一棵开花的树,枝芽无限靠近你1 小时前
【PPTist】添加PPT模版
前端·学习·编辑器·html
VertexGeek2 小时前
Rust学习(八):异常处理和宏编程:
学习·算法·rust
土豆湿2 小时前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
二进制_博客2 小时前
Flink学习连载文章4-flink中的各种转换操作
大数据·学习·flink