跳至主要內容

前端样式

Steven2025年3月1日大约 2 分钟CSS

网页样式

参考：

  • https://www.bilibili.com/video/BV1nM411T77W
  • https://www.bilibili.com/video/BV1w84y1r7X8

todo 布局 https://www.bilibili.com/video/BV1am4y1E7DM/ https://www.bilibili.com/video/BV1EM411m71m/

todo 动画 https://www.bilibili.com/video/BV11X4y1V7ZZ https://www.bilibili.com/video/BV1Ki421S7WB 黑白切换⚪扩散

todo 侧边栏 https://www.bilibili.com/video/BV1uL41157hj https://www.bilibili.com/video/BV1kb4y1J7L9/ https://www.bilibili.com/video/BV1kN4y1M7Gq/ https://www.bilibili.com/video/BV1yh411a78Z/ ⭐

todo 顶部菜单 https://www.bilibili.com/video/BV15Y411P7Rd/

todo 项目 https://www.bilibili.com/video/BV1pq4y1c7oy https://www.bilibili.com/video/BV1nw411Q7sS/ https://www.bilibili.com/video/BV1nj411K7ME/ ⭐

基础样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">
      <h1>CSS:层叠样式表</h1>
      <p>层叠样式表（Cascading Style Sheets，CSS）是 Web 的核心语言之一。</p>
      <span>xxxxxxxxxxxxxx</span>
    </div>
    <div>
      <h1>CSS:层叠样式表</h1>
      <p>层叠样式表（Cascading Style Sheets，CSS）是 Web 的核心语言之一。</p>
      <span>xxxxxxxxxxxxxx</span>
    </div>
    <div>
      <h1>CSS:层叠样式表</h1>
      <p>层叠样式表（Cascading Style Sheets，CSS）是 Web 的核心语言之一。</p>
      <span>xxxxxxxxxxxxxx</span>
    </div>
    <div>
      <h1>CSS:层叠样式表</h1>
      <p>层叠样式表（Cascading Style Sheets，CSS）是 Web 的核心语言之一。</p>
      <span>xxxxxxxxxxxxxx</span>
    </div>
    <div>
      <h1>CSS:层叠样式表</h1>
      <p>层叠样式表（Cascading Style Sheets，CSS）是 Web 的核心语言之一。</p>
      <span>xxxxxxxxxxxxxx</span>
    </div>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        /* width: 500px; */
        height: 200px;
        border: 3px dotted grey;
        border-radius: 8px;
        padding: 15px 20px;
        width: 100%;
        box-sizing: border-box;

        /* 居中 */
        margin: 0 auto;
      }

      /* 背景 */
      .box {
        background-color: #f9f9f9;
        box-shadow: 5px 5px 5px grey;
      }

      /* 文字 */
      .box p {
        color: #666;
        text-indent: 2em;
        /* 1px = 1像素 */
        /* 1em = 当前标签的字号 */
        /* 1rem = */
      }
      .box h1 {
        font-size: 50px;
        font-family: "黑体";
        font-weight: normal;
        text-align: center;

        background-color: orange;
        height: 180;
        /* 与高度一致，则垂直居中 */
        line-height: 180px;

        text-shadow: 2px 2px 2px black;
        text-decoration: dashed underline skyblue;
      }
      .box span {
        color: orange;
        writing-mode: vertical-lr;
        /* fix：英文垂直显示问题 */
        text-orientation: upright;
        /* 位置 */
        /* 相对最近的relative定位 */
        position: absolute;
        top: 200px;
        left: 5px;
      }
    </style>
  </body>
</html>

布局

div —— 容器

容器类型：（通过 display: xxx 让 div 变成 xxx 容器）

  • flex （CSS3）： 先出现，好。侧重：todo
  • grid （CSS3）： 后出现，更好。侧重：todo

flex

概念：

  • 坐标轴
    • main axis 左右
      • main start
      • main end
    • cross axis 上下
      • cross start
      • cross end
  • 排布： flex-direction: xxx
    • row/row-reverse 基于 main axis 横向排布
    • column/column-reverse 基于 cross axis 横向排布
  • 宽度（在item中指定）：
    • flex-basis 提供基础宽度
    • flex-grow/flex-shrink/flex 提供宽度比例
      • flex-grow: 1 扩展剩余宽度（e.g. 容器width=500px 元素5个width=10px 元素实际width=10px+(500px-10px*5)/5=500px/5=100px）
      • flex-shrink: 1 缩减多余宽度（e.g. 容器width=500px 元素5个width=200px 元素实际width=200px-(200px*5-500px)/5=500px/5=100px）
      • flex: 1 2 30px = grow 1; shrink 2; basis 30px
  • 对齐
    • align-items: stretch/flex-start/flex-end/center/baseline 交叉轴元素对齐
    • justify-items: 主轴元素对齐
    • justify-content: flex-start/flex-end/center/space-between/space-aroundspace-evenly 主轴内容对齐
    • align-content: 同上 交叉轴内容对齐
    • flex-wrap: nowrap/wrap 换行
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">
        <h1>CSS:层叠样式表</h1>
        <p>层叠样式表（Cascading Style Sheets，CSS）是 Web 的核心语言之一。</p>
        <span>xxxxxxxxxxxxxx</span>
      </div>
      <div class="flex-item">
        <h1>CSS:层叠样式表</h1>
        <p>层叠样式表（Cascading Style Sheets，CSS）是 Web 的核心语言之一。</p>
        <span>xxxxxxxxxxxxxx</span>
      </div>
      <div class="flex-item">
        <h1>CSS:层叠样式表</h1>
        <p>层叠样式表（Cascading Style Sheets，CSS）是 Web 的核心语言之一。</p>
        <span>xxxxxxxxxxxxxx</span>
      </div>
    </div>

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

      .flex-container {
        /* 居中显示 */
        width: 100%;
        max-width: 800px;
        min-width: 500px;
        margin: 0 auto;
        background-color: red;

        display: flex;
      }

      .flex-item {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f9f9f9;
      }

      /* 元素倾向 */
      .flex-container {
        height: 800px;
        /* 垂直：center/flex-start */
        align-items: flex-end;
        /* 水平：  */
        justify-content: center;
      }
      .flex-item {
        max-height: 500px;
        max-width: 200px;
      }

      /* 比例分配 */
      .flex-item {
        /* 1 3 1 1 ... */
        flex: 1;
      }
      .flex-item:nth-child(2) {
        flex: 3;
      }
      /*
    0n+3 —— 第三个
    1n+0 —— 每个
    2n+0 —— 偶数，等于 :even()
    2n+1 —— 奇数，等于 :odd()
    3n+4 —— 4 7 10 13 ...
    */

      /* 左右固定尺寸 */
      .flex-item:nth-child(2) {
        flex: 3;
      }
      .flex-item:nth-child(2n + 1) {
        width: 200px;
      }
    </style>
  </body>
</html>

grid

参考

  • todo https://www.webhek.com/post/interactive-guide-to-grid/
  • todo https://ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

grid = 网格

概念：

  • 行/列
    • grid-template-columns: 200px/1fr/repeat(12, 50px)/repeat(auto-fill, 150px)/repeat(auto-fill, minmax(150px, 1fr)) 列宽
      • fr = fraction
    • grid-template-rows 行高
    • grid-auto-rows 默认行高
  • 空隙
    • grid-row-gap
    • grid-column-gap
    • gap 简写
  • 布局
    • grid-column-start/grid-column-end 简写 grid-column: start/end （tip:跨度1则可忽略end）
    • grid-row-start/grid-row-end 简写 grid-row: start/end
    • 可视化简写 grid-template-areas 加 grid-area: xxx
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item">
        <h1>CSS:层叠样式表</h1>
        <p>层叠样式表（Cascading Style Sheets，CSS）是 Web 的核心语言之一。</p>
        <span>xxxxxxxxxxxxxx</span>
      </div>
      <div class="grid-item">
        <h1>CSS:层叠样式表</h1>
        <p>层叠样式表（Cascading Style Sheets，CSS）是 Web 的核心语言之一。</p>
        <span>xxxxxxxxxxxxxx</span>
      </div>
      <div class="grid-item">
        <h1>CSS:层叠样式表</h1>
        <p>层叠样式表（Cascading Style Sheets，CSS）是 Web 的核心语言之一。</p>
        <span>xxxxxxxxxxxxxx</span>
      </div>
      <div class="grid-item">
        <h1>CSS:层叠样式表</h1>
        <p>层叠样式表（Cascading Style Sheets，CSS）是 Web 的核心语言之一。</p>
        <span>xxxxxxxxxxxxxx</span>
      </div>
      <div class="grid-item">
        <h1>CSS:层叠样式表</h1>
        <p>层叠样式表（Cascading Style Sheets，CSS）是 Web 的核心语言之一。</p>
        <span>xxxxxxxxxxxxxx</span>
      </div>
      <div class="grid-item">
        <h1>CSS:层叠样式表</h1>
        <p>层叠样式表（Cascading Style Sheets，CSS）是 Web 的核心语言之一。</p>
        <span>xxxxxxxxxxxxxx</span>
      </div>
    </div>
    <style>
      .grid-container {
        max-width: 1024px;
        /* margin: 0 auto; */
        padding: 0 auto;

        display: grid;

        /* 一、宽度 */
        /* 固定 */
        grid-template-columns: 200px 300px 200px; 
        /* 百分比 */
        grid-template-columns: 20% 40% 10%;
        /* 比例 */
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(3, 1fr);
        /* 自适应 */
        grid-template-columns: repeat(auto-fill, 200px);
        /* 混合 */
        grid-template-columns: 200px auto 300px;

        /* 二、高度 */
        height: 300px;
        grid-template-rows: 1fr 2fr; 
      }
      .grid-item {
        padding: 10px;
        margin: 1px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f9f9f9;

        /* 如果内容不设置隐藏，那区域依然会被撑开 */
        overflow: hidden;
      }
    </style>
  </body>
</html>

动画

todo https://www.bilibili.com/video/BV1nM411T77W?

Copyright © 2025 Steven