CSS实例

有事请访问https://developer.mozilla.org/

1.翻转动画

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
  display: flex;
    }
    .square {
      width: 400px;
      height: 700px;
      position: relative;
      perspective: 800px;
      transform-style: preserve-3d;
      transition: transform 0.5s;
    }

    .square:hover {
      transform: rotateY(180deg);
    }

    .square .front, .square .back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }

    .square .front {
  background-size: cover;
}

   
    .square .back {
      background-color: rgb(2, 2, 12);
      transform: rotateY(180deg);
    }

    .square .text {
      position: absolute;
      top: 20%;
      left: 20%;
      transform: translate(-50%, -50%);
      font-size: 24px;
      color: rgb(255, 255, 255);
    }
    .square .text-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
    .square .text-container strong {
  font-weight: normal;
  font-size: 24px;
  color: rgb(255, 255, 255);
  margin-bottom: 10px;
}
  </style>
</head>
<body>
  <div class="container">
    <div class="square">
      <div class="front" style="background-image: url('https://www.szmynet.cn/template/default/images/index/indpp1.jpg');">
        <div class="text">高端网站建设</div>
      </div>
      <div class="back">
        <div class="text">高端网站建设</div>
        <div class="text-container">
          <strong>上市集团网站建设</strong>
          <strong>外贸网站建设</strong>
          <strong>营销型网站建设</strong>
          <strong>微信小程序开发</strong>
          <strong>电商/平台型网站建设</strong>
        </div>
      </div>
    </div>


  <div class="square">
    <div class="front" style="background-image: url('https://www.szmynet.cn/static/upload/image/20240124/1706065352658674.jpg');">
      <div class="text">数字营销推广</div>
    </div>
    <div class="back">
      <div class="text">数字营销推广</div>
      <div class="text-container">
      <strong>百度SEM/SE0推广</strong>
      <strong>谷歌SEM/SE0推广</strong>
      <strong>媒体软文推广</strong>
      <strong>全网百科建设</strong>
      <strong>品牌舆情监控</strong>
    </div>
  </div>
</div>

  <div class="square">
    <div class="front" style="background-image: url('https://www.szmynet.cn/static/upload/image/20240124/1706065397132612.jpg');">
      <div class="text">品牌创意设计</div>
    </div>
    <div class="back">
      <div class="text">品牌创意设计</div>
      <div class="text-container">
        <strong>VI设计</strong>
        <strong>包装设计</strong>
        <strong>L0G0设计</strong>
        <strong>宣传海报</strong>
        <strong>画册设计</strong>
        <strong>展会物料设计</strong>
        <strong>印刷制作</strong>
    </div>
  </div>
</div>
</div>
</body>
</html>

flex

响应式布局

前端响应式布局原理与方案（详细版）-CSDN博客

媒体查询

flex弹性布局

rem布局

rem（font size of the root element）是指相对于根元素的字体大小的单位，rem只是一个相对单位题外： rem和em的对比

            1. rem和em都是相对单位

            2. rem相对于根元素

            3. em相对于父元素

       情景描述：

       1. 设置HTML的根元素的font-size为20px

       2. 设置红色的正方形宽高为2rem

       3. 设置绿色的正方形宽高为40px

       4. 从图中可以看出两个正方形一样宽高

       5. 所以1rem === 根元素字号 === 20px

————————————————

  <!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>rem布局</title>
    <style>
      html {
        font-size: 20px;
      }
      .r1 {
        width: 2rem;
        height: 2rem;
        background-color: plum;
      }
      .r2 {
        width: 40px;
        height: 40px;
        background-color: aquamarine;
      }
    </style>
  </head>
  <body>
    <div class="r1"></div>
    <div class="r2"></div>
  </body>
</html>

原文链接：https://blog.csdn.net/m0_66051368/article/details/124137136

自适应布局

百分比布局

grid布局

Grid 布局是一种在 CSS 中用于创建二维网格布局的强大工具。它允许开发人员将一个父容器分割为行和列，并在这个网格中放置子元素，从而实现灵活的布局。

 .container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 列定义 */
        grid-template-rows: 100px 200px; /* 行定义 */
        gap: 10px; /* 单元格间距 */
        grid-auto-rows: 150px; /* 自动调整单元格高度 */
        grid-auto-columns: 100px; /* 自动调整单元格宽度 */
        grid-template-areas:
          "header header"
          "sidebar main"
          "footer footer"; /* 网格行列命名 */
      }

      .item {
        background-color: #ccc;
        padding: 20px;
      }

      .header {
        grid-area: header; /* 子元素放置位置 */
      }

      .sidebar {
        grid-area: sidebar;
        background-color: lightblue;
      }

      .main {
        grid-area: main;
      }

      .footer {
        grid-area: footer;
      }

自动调整单元格大小：通过设置 grid-auto-rows 和 grid-auto-columns 属性，可以自动调整未明确指定大小的单元格的高度和宽度。
跨列和跨行：使用 grid-column 和 grid-row 属性，可以将子元素跨越多个列或多个行。
对齐方式：通过 justify-items 和 align-items 属性，可以控制子元素在单元格中的水平和垂直对齐方式。
单元格间距：使用 gap 属性，可以设置单元格之间的间距，包括行间距和列间距。
响应式布局：可以使用媒体查询和 Grid 布局的自适应特性，根据不同的屏幕尺寸和设备类型，调整网格布局的定义。
网格行列命名：通过 grid-template-areas 属性，可以为网格的行和列定义名称，并使用这些名称来指定子元素的放置位置。
隐式网格：可以通过 grid-auto-flow 属性，控制未被显式放置的子元素在网格中的填充方式，包括按行填充或按列填充。
网格线和网格单位：可以使用网格线的编号或名称来指定网格布局，也可以使用网格单位（例如 fr、auto）来定义单元格的大小。
排序和重叠：使用 z-index 属性，可以控制子元素在网格中的层叠顺序和显示优先级。
fr 单位：在 Grid 布局中，fr（fraction）是一种相对长度单位，用于定义网格容器中的列或行的比例关系。它表示剩余可用空间的一部分。例如，如果我们将一行定义为 grid-template-rows: 1fr 2fr;，表示第一行占据可用空间的 1/3，第二行占据可用空间的 2/3。fr 单位非常有用，因为它可以根据可用空间自动调整大小，适应不同的屏幕尺寸和布局需求。
template 单词：在 Grid 布局中，template 通常指的是用于定义网格的模板，即通过 grid-template-rows 和 grid-template-columns 属性定义的行模板和列模板。这些模板定义了网格容器的行和列的数量、大小和顺序。通过模板，我们可以精确地规划网格的结构和布局。
grid-template-areas：grid-template-areas 是 Grid 布局中一个用于定义网格布局的属性。它允许我们为网格容器的行和列定义命名区域，以便更方便地将子元素放置在相应的区域中。命名区域由一系列用双引号包裹的字符串组成，每个字符串代表一行，并用空格分隔单元格。在示例中的代码片段中，"header header" 表示第一行具有两个命名区域，"sidebar main" 表示第二行具有两个命名区域，"footer footer" 表示第三行具有两个命名区域。

vw和vh

vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下：

单位含义 vw 相对于视窗的宽度，1vw 等于视口宽度的1%，即视窗宽度是100vw vh 相对于视窗的高度，1vh 等于视口高度的1%，即视窗高度是100vh vmin vw和vh中的较小值 vmax vw和vh中的较大值 ————————————————

                        版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/m0_66051368/article/details/124137136

跨域