CSS学习笔记之高级教程（四）

最新推荐文章于 2024-07-17 18:42:40 发布
最新推荐文章于 2024-07-17 18:42:40 发布
阅读量789 收藏 29
点赞数 25
分类专栏： CSS 文章标签： css 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wz_1992/article/details/139268018
版权

19、CSS 用户界面

19.1 CSS 调整大小：resize

  • resize 属性规定元素是否应（以及如何）被用户调整大小。
  • resize: horizontal;水平方向可改变大小
  • resize: vertical;垂直方向可改变大小
  • resize: both;水平+垂直方向都可改变大小

20、CSS 变量：var()函数

  • var() 函数用于插入 CSS 变量的值。
  • var() 函数的语法如下：var(name, value)，变量名称必须以两个破折号（--）开头，且区分大小写！

20.1 CSS 变量可以有全局或局部作用域。

全局变量可以在整个文档中进行访问/使用，而局部变量只能在声明它的选择器内部使用。

如需创建具有全局作用域的变量，请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。

如需创建具有局部作用域的变量，请在将要使用它的选择器中声明它。

<!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>
    :root {
      --blue: #1e90ff;
      --white: #ffffff;
    }

    .container{
      background-color: var(--blue);
    }

    h2 {
      color: var(--white);
    }
  </style>
</head>

<body>

  <div class="container">
    <h2>欢迎来到中国</h2>

  </div>

</body>

</html>

运行效果：
在这里插入图片描述

20.2 覆盖变量var（）函数（仅在页面的特定部分中进行更改）

<!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>
    :root {
      --blue: #1e90ff;
      --white: #ffffff;
    }

    .container{
      background-color: var(--blue);
    }

    h2 {
      color: var(--white);
    }

    .button{
      --blue:#0000ff;
      background-color: var(--blue);
      color: white;
      padding: 10px;
      outline: none;
      border: 1px solid var(--blue);
      border-radius: 5px;
    }
  </style>
</head>

<body>

  <div class="container">
    <h2>欢迎来到中国</h2>
    <button class="button">提交</button>

  </div>

</body>

</html>

运行效果：
在这里插入图片描述

20.3 添加一个新的局部变量

<!DOCTYPE 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>
    :root {
      --blue: #1e90ff;
      --white: #ffffff;
    }

    .container{
      background-color: var(--blue);
    }

    h2 {
      color: var(--white);
    }

    .button{
      --button-blue:#5563E3;
      background-color: var(--button-blue);
      color: white;
      padding: 10px;
      outline: none;
      border: 1px solid var(--button-blue);
      border-radius: 5px;
    }
  </style>
</head>

<body>

  <div class="container">
    <h2>欢迎来到中国</h2>
    <button class="button">提交</button>

  </div>

</body>

</html>

运行效果：
在这里插入图片描述

20.4 CSS 在媒体查询中使用变量

现在，我们希望在媒体查询中修改变量值。

提示：媒体查询旨在为不同的设备（显示器、平板电脑、手机等）定义不同的样式规则。您可以在“媒体查询”一章中学习更多有关媒体查询的知识。

在这里，我们首先为 .container 类声明一个名为 --fontsize 的新局部变量。我们将其值设置为 25 像素。然后我们在 .container 类中进一步使用它。然后，我们创建一个 @media 规则，内容为“当浏览器的宽度为 800px 或更宽时，将 .container 类的 --fontsize 变量值更改为 50px。”

这是完整的实例：

<!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>
    :root {
      --blue: #1e90ff;
      --white: #ffffff;
    }

    .container {
      --fontsize: 25px;
    }

    .container {
      background-color: var(--blue);
      font-size: var(--fontsize);
    }

    h2 {
      color: var(--white);
    }

    .button {
      --button-blue: #5563E3;
      background-color: var(--button-blue);
      color: white;
      padding: 10px;
      outline: none;
      border: 1px solid var(--button-blue);
      border-radius: 5px;
    }

    @media screen and (min-width: 800px) {
      .container {
        --fontsize: 50px;
      }
    }
  </style>
</head>

<body>

  <div class="container">
    <h2>欢迎来到中国</h2>
    <button class="button">提交</button>

  </div>

</body>

</html>

是另一个例子，在其中我们还更改了 @media 规则中 --blue 变量的值：

<!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>
    :root {
      --blue: #1e90ff;
      --white: #ffffff;
    }

    .container {
      --fontsize: 25px;
    }

    .container {
      background-color: var(--blue);
      font-size: var(--fontsize);
    }

    h2 {
      color: var(--white);
    }

    .button {
      --button-blue: #5563E3;
      background-color: var(--button-blue);
      color: white;
      padding: 10px;
      outline: none;
      border: 1px solid var(--button-blue);
      border-radius: 5px;
    }

    @media screen and (min-width: 800px) {
      .container {
        --fontsize: 50px;
      }
      :root{
        --blue:lightblue;
      }
    }
  </style>
</head>

<body>

  <div class="container">
    <h2>欢迎来到中国</h2>
    <button class="button">提交</button>

  </div>

</body>

</html>

21 、CSS Box Sizing

  • CSS box-sizing 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框。
    假如不指定 CSS box-sizing 属性
    默认情况下，元素的宽度和高度是这样计算的：

width + padding + border = 元素的实际宽度
height + padding + border = 元素的实际高度
这意味着：当您设置元素的宽度/高度时，该元素通常看起来比您设置的更大（因为元素的边框和内边距已被添加到元素的指定宽度/高度中）。

box-sizing 属性解决了这个问题。如果在元素上设置了 box-sizing: border-box;，则宽度和高度会包括内边距和边框

22、CSS Flexbox

CSS Flexbox 布局模块
在 Flexbox 布局模块（问世）之前，可用的布局模式有以下四种：

  • 块（Block），用于网页中的部分（节）
  • 行内（Inline），用于文本
  • 表，用于二维表数据
  • 定位，用于元素的明确位置

弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

22.1 Flexbox 元素

如需开始使用 Flexbox 模型，您需要首先定义 Flex 容器

<!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>
    .container{
      display: flex;
      background-color: DodgerBlue;
    }
    .container > div{
      background-color: #f1f1f1;
      font-size: 20px;
      padding: 20px;
      margin: 10px;
    }

  </style>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>1</div>
    <div>1</div>

  </div>
  
</body>
</html>

上面的元素表示一个带有三个 flex 项目的 flex 容器（蓝色区域）。
通过将 display 属性设置为 flex，flex 容器将可伸缩。
弹性容器的所有直接子元素会（自动）成为弹性项目。

22.2 flex 容器属性

22.2.1 flex-direction 属性：定义容器要在哪个方向上堆叠 flex 项目

在这里插入图片描述

22.2.1.1 flex-direction: column; （定义 flex 项目堆叠方向-垂直反向（从上到下））
<!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>
    .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 定义 flex 项目堆叠方向-垂直反向 */
      flex-direction: column;
 
    }
    .container > div{
      background-color: #f1f1f1;
      font-size: 20px;
      padding: 20px;
      margin: 10px;
      width: 50px;
      text-align: center;
    }

  </style>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>

  </div>
  
</body>
</html>

运行效果：

在这里插入图片描述

22.2.1.2 flex-direction: column-reverse; （定义 flex 项目堆叠方向-垂直反向（从下到上））
 .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 定义 flex 项目堆叠方向-垂直反向 */
      flex-direction: column-reverse;
    }

运行效果：
在这里插入图片描述

22.2.1.3 flex-direction: row ; （从左到右）
  .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 定义 flex 项目堆叠方向-从左到右 */
      flex-direction: row;
    }

运行效果：
在这里插入图片描述

22.2.1.4 flex-direction: row-reverse; （从右到左）
  .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 定义 flex 项目堆叠方向-从右到左 */
      flex-direction: row-reverse;
    }

运行效果：
在这里插入图片描述

22.2.2 flex-wrap 属性：规定是否应该对 flex 项目换行

在这里插入图片描述

22.2.2.2 flex-wrap: wrap;(在必要时进行换行)
<!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>
    .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 定义 flex 项目堆叠方向-从左到右 */
      flex-direction: row;
      /* 定义换行-在需要时候自动换行 */
      flex-wrap: wrap;
    }
    .container > div{
      background-color: #f1f1f1;
      font-size: 20px;
      padding: 20px;
      margin: 10px;
      width: 50px;
      text-align: center;
    }

  </style>
</head>
<body>
  <div class="container">
    <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>
  
</body>
</html>

运行效果：
在这里插入图片描述

22.2.2.1 flex-wrap: wrap;(在必要时进行换行（反方向）)
 .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 定义 flex 项目堆叠方向-从左到右 */
      flex-direction: row;
      /* 定义换行-在需要时候自动换行，且反方向 */
      flex-wrap: wrap-reverse ;
    }

运行效果：
在这里插入图片描述

22.2.2.3 flex-flow 属性：同时设置 flex-direction 和 flex-wrap 属性的简写属性
 .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 定义 flex 项目堆叠方向-从左到右 */
      /* flex-direction: row; */
      /* 定义换行-在需要时候自动换行*/
      /* flex-wrap: wrap; */
      /* 性质简写 */
      flex-flow: row wrap;
    }

22.2.3 justify-content 属性：用于对齐 flex 项目

在这里插入图片描述

22.2.3.1 justify-content: center;(将 flex 项目在容器的中心对齐（水平方向）)
<!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>
    .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 定义 flex 项目堆叠方向-从左到右 */
      /* flex-direction: row; */
      /* 定义换行-在需要时候自动换行*/
      /* flex-wrap: wrap; */
      /* 性质简写 */
      flex-flow: row wrap;
      /* 对齐方式 */
      justify-content: center;
    }
    .container > div{
      background-color: #f1f1f1;
      font-size: 20px;
      padding: 20px;
      margin: 10px;
      width: 50px;
      text-align: center;
    }

  </style>
</head>
<body>
  <div class="container">
    <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>
  
</body>
</html>

运行效果：
在这里插入图片描述

22.2.3.2 justify-content: flex-start;(将 flex 项目在在容器的开头对齐（默认）)
 .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 定义 flex 项目堆叠方向-从左到右 */
      /* flex-direction: row; */
      /* 定义换行-在需要时候自动换行*/
      /* flex-wrap: wrap; */
      /* 性质简写 */
      flex-flow: row wrap;
      /* 对齐方式 */
      justify-content: flex-start;
    }

在这里插入图片描述

22.2.3.3 justify-content: flex-end;(将 flex 项目在在容器的末端对齐)
  .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 定义 flex 项目堆叠方向-从左到右 */
      /* flex-direction: row; */
      /* 定义换行-在需要时候自动换行*/
      /* flex-wrap: wrap; */
      /* 性质简写 */
      flex-flow: row wrap;
      /* 对齐方式 */
      justify-content:  flex-end;
    }

在这里插入图片描述

22.2.3.4 justify-content:space-around;(显示行之前、之间和之后带有空格的 flex 项目)
<!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>
    .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 定义 flex 项目堆叠方向-从左到右 */
      /* flex-direction: row; */
      /* 定义换行-在需要时候自动换行*/
      /* flex-wrap: wrap; */
      /* 性质简写 */
      flex-flow: row wrap;
      /* 对齐方式 */
      justify-content:space-around;
    }
    .container > div{
      background-color: #f1f1f1;
      font-size: 20px;
      padding: 20px;
      margin: 10px;
      width: 50px;
      text-align: center;
    }

  </style>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
   

  </div>
  
</body>
</html>

在这里插入图片描述

22.2.3.5 justify-content:space-between;(显示行之间有空格的 flex 项目)
  .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 定义 flex 项目堆叠方向-从左到右 */
      /* flex-direction: row; */
      /* 定义换行-在需要时候自动换行*/
      /* flex-wrap: wrap; */
      /* 性质简写 */
      flex-flow: row wrap;
      /* 对齐方式 */
      justify-content:space-between;
    }

在这里插入图片描述

22.2.4 align-items 属性:用于垂直对齐 flex 项目（垂直方向）

在这里插入图片描述

22.2.4.1 align-items: center;(垂直居中)
<!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>
    .container{
      background-color: DodgerBlue;
      height: 200px;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 定义 flex 项目堆叠方向-从左到右 */
      /* flex-direction: row; */
      /* 定义换行-在需要时候自动换行*/
      /* flex-wrap: wrap; */
      /* 性质简写 */
      flex-flow: row wrap;
      /* 垂直方向对齐方式 */
      align-items: center;
    }
    .container > div{
      background-color: #f1f1f1;
      font-size: 20px;
      padding: 20px;
      margin: 10px;
      width: 50px;
      text-align: center;
    }

  </style>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
   

  </div>
  
</body>
</html>

在这里插入图片描述

22.2.4.2 align-items: flex-start;(在容器顶部对齐)
  .container{
      background-color: DodgerBlue;
      height: 200px;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 性质简写 */
      flex-flow: row wrap;
      /* 垂直方向对齐方式 */
      align-items: flex-start;
    }

在这里插入图片描述

22.2.4.3 align-items:flex-end;(在容器底部对齐)
  .container{
      background-color: DodgerBlue;
      height: 200px;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 性质简写 */
      flex-flow: row wrap;
      /* 垂直方向对齐方式 */
      align-items: flex-end;
    }

在这里插入图片描述

22.2.4.4 align-items:stretch;(拉伸 flex 项目以填充容器（默认）)
   .container{
      background-color: DodgerBlue;
      height: 200px;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 性质简写 */
      flex-flow: row wrap;
      /* 垂直方向对齐方式 */
      align-items: stretch ;
    }

在这里插入图片描述

22.2.4.5 align-items:baseline;(使 flex 项目基线对齐)
.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

在这里插入图片描述

22.2.5 align-content 属性：用于对齐弹性线

在这里插入图片描述

22.2.5.1 align-content:center;
<!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>
    .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 性质简写 */
      flex-flow: row wrap;
      height: 600px;
      /* 对齐弹性线方式 */
      align-content:center;
    }
    .container > div{
      background-color: #f1f1f1;
      font-size: 20px;
      padding: 20px;
      margin: 10px;
      width: 50px;
      text-align: center;
    }

  </style>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  

   

  </div>
  
</body>
</html>

在这里插入图片描述

22.2.5.2 align-content:space-between;（显示的弹性线之间有相等的间距）
   .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 性质简写 */
      flex-flow: row wrap;
      height: 600px;
      /* 对齐弹性线方式 */
      align-content:space-between;
    }

在这里插入图片描述

22.2.5.3 align-content:space-around;（显示弹性线在其之前、之间和之后带有空格）
.container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 性质简写 */
      flex-flow: row wrap;
      height: 600px;
      /* 对齐弹性线方式 */
      align-content:space-around;
    }

在这里插入图片描述

22.2.5.4 align-content:stretch ;（拉伸弹性线以占据剩余空间（默认））
 .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 性质简写 */
      flex-flow: row wrap;
      height: 600px;
      /* 对齐弹性线方式 */
      align-content:stretch ;
    }

在这里插入图片描述

22.2.5.5 align-content:flex-start;（在容器开头显示弹性线）
   .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 性质简写 */
      flex-flow: row wrap;
      height: 600px;
      /* 对齐弹性线方式 */
      align-content:flex-start ;
    }

在这里插入图片描述

22.2.5.6 align-content:flex-end;（在容器末尾显示弹性线）
 .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 性质简写 */
      flex-flow: row wrap;
      height: 600px;
      /* 对齐弹性线方式 */
      align-content:flex-end ;
    }

在这里插入图片描述

22.2.6 完美居中

  align-content:center;
      justify-content: center;

在这里插入图片描述

22.3 子元素（项目）

  • flex 容器的直接子元素会自动成为弹性（flex）项目。

用于弹性项目的属性有：

  • order（规定弹性项目相对于同一容器内其余弹性项目的顺序。）
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

22.3.1 order 属性：规定 flex 项目的顺序

  • 代码中的首个 flex 项目不必在布局中显示为第一项。

  • order 值必须是数字，默认值是 0。

<!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>
    .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 性质简写 */
      flex-flow: row wrap;
      height: 600px;
      /* 对齐弹性线方式 */
      align-content:center;
      justify-content: center;
    }
    .container > div{
      background-color: #f1f1f1;
      font-size: 20px;
      padding: 20px;
      margin: 10px;
      width: 50px;
      text-align: center;
    }

  </style>
</head>
<body>
  <div class="container">
    <div style="order: 3;">1</div>
    <div style="order: 2;">2</div>
    <div style="order: 4;">3</div>
    <div style="order: 1;">4</div>
  </div>
  
</body>
</html>

在这里插入图片描述

22.3.2 flex-grow 属性：规定某个 flex 项目相对于其余 flex 项目将增长多少

<!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>
    .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      /* 性质简写 */
      flex-flow: row wrap;
      height: 600px;
      /* 对齐弹性线方式 */
      align-content:center;
      justify-content: center;
    }
    .container > div{
      background-color: #f1f1f1;
      font-size: 20px;
      padding: 20px;
      margin: 10px;
      width: 50px;
      text-align: center;
    }

  </style>
</head>
<body>
  <div class="container">
    <div style="flex-grow: 1;">1</div>
    <div style="flex-grow: 1;">2</div>
    <div style="flex-grow: 8;">3</div>
  </div>
  
</body>
</html>

在这里插入图片描述

22.3.3 flex-shrink 属性：规定某个 flex 项目相对于其余 flex 项目将收缩多少

以下示例为不要让第三个弹性项目收缩得与其他弹性项目一样多：

<!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>
    .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      height: 600px;
      /* 对齐弹性线方式 */
      align-content:center;
      justify-content: center;
    }
    .container > div{
      background-color: #f1f1f1;
      font-size: 20px;
      padding: 20px;
      margin: 10px;
      width: 50px;
      text-align: center;
    }

  </style>
</head>
<body>
  <div class="container">
    <div >1</div>
    <div >2</div>
    <div style="flex-shrink: 0;">3</div>
    <div >4</div>
    <div >5</div>
    <div >6</div>
    <div >7</div>
    <div >8</div>
    <div >9</div>
  </div>
  
</body>
</html>

在这里插入图片描述

22.3.4 flex-basis 属性：规定 flex 项目的初始长度

<!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>
    .container{
      background-color: DodgerBlue;
      /* 定义父元素为容器将可伸缩 */
      display: flex;
      height: 600px;
      /* 对齐弹性线方式 */
      align-content:center;
      justify-content: center;
    }
    .container > div{
      background-color: #f1f1f1;
      font-size: 20px;
      padding: 20px;
      margin: 10px;
      width: 50px;
      text-align: center;
    }

  </style>
</head>
<body>
  <div class="container">
    <div >1</div>
    <div >2</div>
    <div style="flex-basis: 200px;">3</div>
    <div >4</div>
    <div >5</div>
  
  </div>
  
</body>
</html>

在这里插入图片描述
属性

22.3.5 flex 属性：flex-grow、flex-shrink 和 flex-basis 属性的简写属性

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

22.3.6 align-self 属性：规定弹性容器内所选项目的对齐方式。

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>align-self 属性</h1>

<p>"align-self: flex-start;" 在容器顶部对齐所选的弹性项目。</p>
<p>"align-self: flex-end;" 在容器底部对齐所选的弹性项目。</p>

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

<p>align-self 会覆盖容器的 align-items 属性。</p>

</body>
</html>

在这里插入图片描述

22.4 示例一：响应式图片网格

请调整浏览器窗口，来查看响应效果。

<!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;
      height: 600px;
      /* 对齐弹性线方式 */
      align-content: center;
      justify-content: center;
    }

    img {
      width: 100%;
    }

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

    .column {
      flex: 25%;
      max-width: 25%;
      padding: 0 5px;
    }

    /* 响应式布局 - 创建两列而不是四列布局 */
    @media (max-width: 800px) {
      .column {
        flex: 50%;
        max-width: 50%;
      }
    }

    /* 响应式布局 - 创建上下堆叠而不是并排的两列布局 */
    @media (max-width: 600px) {
      .column {
        flex: 100%;
        max-width: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="row">
    <div class="column">
      <img src="imgs/flower.png" alt="flower">
      <img src="imgs/flower02.png" alt="flower">
      <img src="imgs/flower03.png" alt="flower">
      <img src="imgs/flower04.png" alt="flower">
      <img src="imgs/flower.png" alt="flower">
      <img src="imgs/flower02.png" alt="flower">
      <img src="imgs/flower03.png" alt="flower">
      <img src="imgs/flower04.png" alt="flower">
    </div>

    <div class="column">
      <img src="imgs/flower04.png" alt="flower">
      <img src="imgs/flower03.png" alt="flower">
      <img src="imgs/flower02.png" alt="flower">
      <img src="imgs/flower.png" alt="flower">
      <img src="imgs/flower04.png" alt="flower">
      <img src="imgs/flower03.png" alt="flower">
      <img src="imgs/flower02.png" alt="flower">
      <img src="imgs/flower.png" alt="flower">
    </div>

    <div class="column">
      <img src="imgs/flower.png" alt="flower">
      <img src="imgs/flower02.png" alt="flower">
      <img src="imgs/flower03.png" alt="flower">
      <img src="imgs/flower04.png" alt="flower">
      <img src="imgs/flower.png" alt="flower">
      <img src="imgs/flower02.png" alt="flower">
      <img src="imgs/flower03.png" alt="flower">
      <img src="imgs/flower04.png" alt="flower">
    </div>

    <div class="column">
      <img src="imgs/flower04.png" alt="flower">
      <img src="imgs/flower03.png" alt="flower">
      <img src="imgs/flower02.png" alt="flower">
      <img src="imgs/flower.png" alt="flower">
      <img src="imgs/flower04.png" alt="flower">
      <img src="imgs/flower03.png" alt="flower">
      <img src="imgs/flower02.png" alt="flower">
      <img src="imgs/flower.png" alt="flower">
    </div>
  </div>

</body>

</html>

运行效果：
在这里插入图片描述

22.5 示例二：使用 Flexbox 的响应式网站

<!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>
    :root {
      --fontsize-25px: 25px;
      --fonsize-20px: 20px;
    }

    * {
      margin: 0;
      padding: 0;
      font-family: Arial;
      box-sizing: border-box;
    }


    .intro {
      background-color: yellow;
      padding: 20px;
      text-align: center;
    }

    .header {
      background-color: #1abc9c;
      padding: 50px;
      color: white;
      text-align: center;
    }

    .nav {
      display: flex;
      background-color: #333;
    }

    .nav a {
      text-decoration: none;
      color: white;
      padding: 15px;
      font-size: 20px;
    }

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

    .aboutus {
      flex: 30%;
      background-color: #f1f1f1;
      padding: 20px;
    }

    .list {
      flex: 70%;
      background-color: white;
      padding: 20px;
    }

    .footer{
      width: 100%;
      padding: 20px;
      background-color: #ededed;
      text-align: center;
      margin-top: 10px;
    }

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

      .row,
      .nav {
        flex-direction: column;
      }
    }
  </style>
</head>

<body>


  <!-- 注释 -->
  <div class="intro">
    <h4>请调整浏览器窗口来查看响应效果</h4>
  </div>

  <!-- header -->
  <div class="header">
    <h1>我的网站</h1>
    <br>
    <p>拥有 <b>弹性</b> 布局</p>
  </div>

  <!-- 导航栏 -->
  <div class="nav">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
  </div>

  <!-- 弹性内容 -->
  <div class="row">
    <div class="aboutus">
      <!-- 关于我 -->
      <h1 style="font-size: var(--fontsize-25px);">关于我</h1>
      <p style="font-size: var(--fonsize-20px); margin-top: 10px;">我的照片</p>
      <div style="background-color: #aaa; padding: 10px; margin-top: 10px; height: 200px;">
        图像
      </div>
      <p style="margin-top:10px;">Some text about me in culpa qui officia deserunt mollit anim..</p>
      <h1 style="font-size: var(--fontsize-25px); margin-top: 10px;">More Text</h1>
      <p style="margin-top: 10px;">Lorem ipsum dolor sit ame.</p>
      <div style="background-color: #aaa; padding: 10px; margin-top: 10px; height: 50px;">
        图像
      </div>
      <div style="background-color: #aaa; padding: 10px; margin-top: 10px; height: 50px;">
        图像
      </div>
      <div style="background-color: #aaa; padding: 10px; margin-top: 10px; height: 50px;">
        图像
      </div>
    </div>
    <!-- 右侧列表 -->
    <div class="list">

      <div class="item">
        <h1>标题</h1>
        <p>标题描述，2021 年 1 月 1 日</p>
        <div style="background-color: #aaa; padding: 10px; margin-top: 10px; height: 200px;">
          图像
        </div>
        <p style="margin-top: 10px;">一些文本..</p>
        <p style="margin-top: 10px;">Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
      </div>
      <br>

      <div class="item">
        <h1>标题</h1>
        <p>标题描述，2021 年 1 月 1 日</p>
        <div style="background-color: #aaa; padding: 10px; margin-top: 10px; height: 200px;">
          图像
        </div>
        <p style="margin-top: 10px;">一些文本..</p>
        <p style="margin-top: 10px;">Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
      </div>


    </div>
  </div>
  <div class="footer">Footer</div>
</body>

</html>

运行效果：
在这里插入图片描述

在这里插入图片描述

文阿花
关注
  • 25
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SpringBoot 学习笔记完整教程
07-13
SpringBoot学习笔记完整教程 SpringBoot是Spring框架的一个简化版，旨在简化Spring应用程序的初始设置和开发过程。它集成了大量的常用库，如数据访问、安全、Web等，使得开发者可以快速构建健壮的微服务应用。本...
html div css linux php 学习笔记等计算机软件编程学习及教程资料合集.zip
05-25
这个压缩包文件包含了一系列关于计算机软件编程学习的资源，特别是关注HTML、CSS、Linux和PHP这四个关键领域的知识。以下是对这些主题的详细说明： 1. **HTML**（HyperText Markup Language）：HTML是构建网页的...
前端入门和进阶学习笔记超详细的图文教程
08-10
本教程"前端入门和进阶学习笔记超详细的图文教程"旨在帮助初学者从零基础开始，逐步掌握JavaScript，并进一步提升至全栈工程师的水平。 一、JavaScript基础 JavaScript是一种解释型的、基于原型的对象导向语言，它...
h5前端学习笔记
03-21
综合以上信息，这份“h5前端学习笔记”涵盖了HTML5的基础到高级特性，CSS样式设计，JavaScript编程，以及一些实际应用场景的案例，对于想要系统学习和提升前端技能的开发者来说，是非常宝贵的资源。
Web前端入门和进阶学习笔记超详细的前端学习图文教程
08-10
总的来说，这份"Web前端入门和进阶学习笔记超详细的前端学习图文教程"会带你走过从基础到高级的整个前端开发旅程，让你具备成为一名Web全栈工程师所需的知识和技能。通过系统学习并实践，你可以掌握构建现代Web应用...
Web前端-Web开发CSS基础3-盒模型
a15735748145a的博客
07-16 482
1. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；2. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；3. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；
Web开发：四角线框效果（HTML、CSS、JavaScript）
最新发布
m0_65029152的博客
07-17 739
本文主要记录前端给图片动态添加四角线框的相关内容和实现过程；
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1110
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
Web前端-Web开发CSS基础5-浮动
a15735748145a的博客
07-16 378
1. 设置<div>元素的宽为100像素，高也为100像素，并且向左悬浮；12. 设置类名为class1的元素，让其自动下移到右边没有悬浮元素为止；13. 设置类名为class2的元素，让其自动下移到右边没有悬浮元素为止；14. 设置类名为class3的元素，让其自动下移到右边没有悬浮元素为止；9. 设置<button>元素，让其自动下移到左边没有悬浮元素为止；10. 设置<input>元素，让其自动下移到左边没有悬浮元素为止；11. 设置<img>元素，让其自动下移到左边没有悬浮元素为止；
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 523
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
05.CSS 缓动变量 && 首字下沉 & 放大缩小动画
粉丝们务必加入微信粉丝群
07-14 201
我们可以轻松定义自定义缓动变量,帮助我们的设计脱颖而出。事实上,上面提到的内置函数也可以使用。虽然这些函数适合日常使用,但还有一个功能更强大但令人生畏的选项可用,即。首字下沉，让第一段的第一个字母比其余文本大。在设计中,大多数 Web 开发人员对于。创建一个放大缩小的动画效果。的大多数用例使用内置的。
如何在CSS中控制动画的触发位置？
xixixixixixixi21的博客
07-14 249
在CSS中控制动画的触发位置主要是通过transform属性来实现的。例如，如果你希望动画从某个固定的位置开始，可以设置transform: translate(x, y)，其中x和y是你想让元素偏离其原始位置的距离。通常表示元素静止在原位；可以百分比定位，比如translate(50%, 0)会让元素居中；直接用像素值指定距离。例如，如果你想让一个元素在页面加载时从左侧滑入，可以设置transform:然后配合transition或animation来创建滑动效果。
CSS基础学习之元素定位（6）
07-17 310
属性用于指定一个元素在文档中的定位方式。和属性则决定了该元素的最终位置。
只用 CSS 能玩出什么花样？
艾恩小灰灰的博客
07-17 740
CSS 的潜力远远超出了日常布局和样式的范畴。通过巧妙运用其功能，我们不仅能够构建美观且功能性的网站，还能创造出令人赞叹的视觉艺术。从基本形状到复杂的动画，CSS 提供了无尽的可能性，等待着每一位前端开发者去探索和实现。以上代码示例展示了 CSS 的部分能力，但真正的乐趣在于实验和创造。所以，拿起你的代码编辑器，开始探索 CSS 的无限可能性吧！
CSS变换
m0_63165331的博客
07-14 623
本文主要讲述CSS中的变换相关内容。
CSS【详解】边框 border，边框-圆角 border-radius，边框-填充 border-image，轮廓 outline
朝阳39的博客
07-10 1186
template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {< template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {
Web前端-Web开发CSS基础4-显示
a15735748145a的博客
07-16 238
1. <div>, <p>, <h1>到<h6>, <ol>与<ul>及其<li>, <table>, <header><footer><section><article><aside><nav>语义元素, <form>2. <div>, <p>, <h1>到<h6>, <ol>与<ul>及其<li>, <table>, <header><footer><section><article><aside><nav>语义元素, <form>，而其父元素的position未设置，则该元素的位置将会相对于谁？
【CSS in Depth 2 精译_018】3.1.2 逻辑属性 + 3.1.3 用好逻辑属性的简写形式
PeacefulWinter的博客
07-14 795
本篇重点介绍了CSS常规流中的一个重要的基础概念——逻辑属性。它是理解flexbox及grid布局核心概念的基础。文章通过详细的对比和示例进行了深入讲解，并列举了常见的逻辑属性与对应的传统属性。最后还介绍了一种将逻辑属性作为样式简写的巧妙方法，值得广大CSS爱好者收藏并实践。
HTML和CSS笔记整理.docx
05-11
这是一份详细的前端课程笔记文档...这份文档为前端开发者提供了一个全面且易于理解的HTML和CSS学习资源，无论是初学者还是进阶者，都能从中受益匪浅。通过学习和实践这些内容，用户将能够构建出功能丰富、美观的网页。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值