CSS网页美化学习（3）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS border 完整示例</title>
    <style>
        /* 通用样式，让盒子更直观 */
        .box {
            width: 200px;
            height: 100px;
            margin: 20px;
            line-height: 100px;
            text-align: center;
        }

        /* 1. 单个属性分开写（对应你图里的「单个属性」表格） */
        .box1 {
            border-width: 3px;    /* 边框粗细：3像素 */
            border-style: solid; /* 边框样式：实线 */
            border-color: red;   /* 边框颜色：红色 */
        }

        /* 2. 连写形式（对应你图里的「连写形式」） */
        .box2 {
            /* 顺序：粗细 样式 颜色，空格分隔，顺序不影响但推荐按这个来 */
            border: 5px dashed blue;
        }

        /* 3. 单方向设置（对应你图里的「单方向设置」） */
        .box3 {
            /* 只给上边框设置：2px 点线 绿色 */
            border-top: 2px dotted green;
            /* 只给右边框设置：4px 实线 橙色 */
            border-right: 4px solid orange;
            /* 只给下边框设置：3px 虚线 紫色 */
            border-bottom: 3px dashed purple;
            /* 只给左边框设置：1px 实线 黑色 */
            border-left: 1px solid #000;
        }

    </style>
</head>
<body>
    <div class="box box1">1. 单个属性分开写</div>
    <div class="box box2">2. 连写形式</div>
    <div class="box box3">3. 单方向设置</div>
</body>
</html>

三个盒子代表不同的表示

padding（内边框）

作用：边框与内容区域的距离

取值：

一个值：padding：10px，上右下左都为10px

两个值：padding：10px 20px，上下为10px，右左为20px

三个值：padding：10px 20px 30px，上为10px，右左为20px，下为30px

四个值：padding：10px 20px 30px 40px，上为10px，右为20px，下为30px，左为40px

记忆：从上开始赋值，然后顺时针赋值，如果相对方向的赋值，另一个方向的值也相同

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS padding 完整示例</title>
    <style>
        /* 通用样式：统一盒子基础样式，方便对比 */
        .box {
            width: 200px;
            margin: 20px auto;
            border: 3px solid #333; /* 加边框，直观看到内边距效果 */
            background: #f0f0f0;
            line-height: 1.5;
        }

        /* 1. 一个值：上下左右全是10px */
        .box1 {
            padding: 10px;
        }

        /* 2. 两个值：上下10px，左右20px */
        .box2 {
            padding: 10px 20px;
        }

        /* 3. 三个值：上10px，左右20px，下30px */
        .box3 {
            padding: 10px 20px 30px;
        }

        /* 4. 四个值：上10px → 右20px → 下30px → 左40px（顺时针） */
        .box4 {
            padding: 10px 20px 30px 40px;
        }

    </style>
</head>
<body>
    <div class="box box1">
        <p>1. 一个值：padding: 10px;<br>上下左右都是10px</p>
    </div>

    <div class="box box2">
        <p>2. 两个值：padding: 10px 20px;<br>上下10px，左右20px</p>
    </div>

    <div class="box box3">
        <p>3. 三个值：padding: 10px 20px 30px;<br>上10px，左右20px，下30px</p>
    </div>

    <div class="box box4">
        <p>4. 四个值：padding: 10px 20px 30px 40px;<br>上→右→下→左（顺时针）</p>
    </div>

</body>
</html>

效果：

margin（外边框）

作用：设置边框外，盒子与盒子之间的距离

取值情况与padding是一模一样的

这里只取两个值的例子来展示一下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>margin 两个值示例</title>
    <style>
        /* 通用样式：统一盒子基础样式，方便对比 */
        .box {
            width: 200px;
            border: 3px solid #333;
            background: #f0f0f0;
            text-align: center;
            line-height: 60px;
        }

        /* 核心：margin 两个值的用法 */
        /* 语法：margin: 上下值 左右值; */
        .box-margin-2 {
            /* 上下外边距 10px，左右外边距 50px */
            margin: 10px 50px;
        }
    </style>
</head>
<body>
    <div class="box">没有 margin 的盒子（对比用）</div>
    <div class="box box-margin-2">margin: 10px 50px; <br>（上下10px，左右50px）</div>
    <div class="box">没有 margin 的盒子（对比用）</div>
</body>
</html>

效果：

（2）浮动

网页布局

让垂直布局的盒子变成水平布局

属性名：float

属性：left，right

注意：浮动元素会脱离标准流且因为优先级高会覆盖标准流的元素（标准流就是网页元素默认的排队方式，是不加任何 CSS 布局属性时，浏览器自动排列元素的规则。）

浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

浮动元素会受到上面元素边界的影响，

浮动元素会有特殊的显示效果：一行可以显示多个且可以设置宽高
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Float 极简示例</title>
    <style>
        /* 基础样式 */
        .box { width: 100px; height: 60px; line-height: 60px; text-align: center; color: #fff; }
        .red { background: pink; }
        .blue { background: skyblue; }
        .box2 { width: 200px; height: 80px; background: #f0f0f0; line-height: 80px; }
        .parent { border: 2px solid #333; padding: 5px; } /* 父容器 */
    </style>
</head>
<body>
    
    <div class="parent">
        <div class="box red" style="float: left;">左浮动</div>
        <div class="box blue" style="float: right;">右浮动</div>
    </div>
 

</body>
</html>
效果：

清除浮动

影响：子元素浮动，不会撑开父元素的标准模块（上面那个图显示的正是没有清除浮动导致的情况，可以看到两个盒子都没有在父元素的模块中）

解决方法：直接设置父元素高度 / 父元素设置overflow：hidden

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>清除浮动 前后对比</title>
    <style>
        /* 通用盒子样式 */
        .box {
            width: 150px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            color: #fff;
            float: left; /* 两个子盒子都左浮动 */
        }
        .red { background: #ff6b6b; }
        .blue { background: #4ecdc4; }

        /* 父容器样式 */
        .parent {
            border: 3px solid #333;
            margin: 20px;
            padding: 10px;
        }

        /* 底部标准流盒子（用来展示塌陷影响） */
        .footer {
            height: 60px;
            background: #f7f7f7;
            line-height: 60px;
            text-align: center;
            margin: 0 20px;
            border: 1px solid #ccc;
        }

        /* 🔑 清除浮动的核心代码（伪元素法，最常用） */
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
            /* 兼容旧浏览器（可选） */
            visibility: hidden;
            height: 0;
        }
    </style>
</head>
<body>
    <h3>未清除浮动（父元素高度塌陷）</h3>
    <div class="parent">
        <div class="box red">左浮动盒子</div>
        <div class="box blue">右浮动盒子</div>
        <!-- 子元素浮动脱标，父元素没有高度，边框只由padding撑起 -->
    </div>
    <div class="footer">我是底部标准流盒子（被浮动元素顶上来了）</div>

    <hr style="margin: 30px;">

    <h3>已清除浮动（父元素高度正常）</h3>
    <div class="parent clearfix"> <!-- 给父元素加清除浮动类 -->
        <div class="box red">左浮动盒子</div>
        <div class="box blue">右浮动盒子</div>
        <!-- 清除浮动后，父元素会自动包裹住浮动子元素，高度正常 -->
    </div>
    <div class="footer">我是底部标准流盒子（正常在父元素下方）</div>
</body>
</html>

效果：

（3）定位

基本概念

定位：可以设置元素能够摆放在网页的任意位置；一般用于解决盒子之间的层叠情况

（定位的元素层级优先级更高，会叠加在其他盒子上面）

属性：position

属性值：

static -- 静态定位

relative -- 相对定位

absolute -- 绝对定位

fixed -- 固定定位

偏移值：（方位属性）

水平：left 距离左边的距离、right 距离右边的距离

垂直：top 距离上边的距离、bottom距离下边的距离

例子（这两个定位相对简单）静态定位和固定定位：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>静态 vs 固定定位</title>
  <style>
    body {
      height: 2000px; /* 让页面可以滚动 */
      margin: 0;
    }

    /* 1. 静态定位 static（默认，写不写都一样） */
    .static {
      background: pink;
      padding: 10px;
      /* position: static; 可以不写 */
    }

    /* 2. 固定定位 fixed（粘在屏幕上） */
    .fixed {
      background: skyblue;
      padding: 10px;
      position: fixed;
      top: 20px;
      right: 20px;
    }
  </style>
</head>

<body>
  <div class="static">我是静态定位（跟着页面走）</div>
  <div class="fixed">我是固定定位（滚屏也不动）</div>
</body>
</html>
效果：

可以看到静态的不会随页面移动变化，而固定定位因为定在那个位置所以放大页面时变远了

相对定位

position：relative

特点：需要配合方位属性移动，会相对于自己之前的位置移动

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>相对定位</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background: pink;
    }
    .move {
      /* 相对定位 */
      position: relative;
      top: 10px;
      left: 30px;
    }
  </style>
</head>
<body>
  <div class="box">原来位置</div>
  <div class="box move">相对自己挪了位置</div>
</body>
</html>

效果：

绝对定位（介绍子绝父相）

position：absolute

特点：同样需要配合方位属性实现移动，相对于 静态定位而言进行 定位移动

子绝父相：子元素相对于父元素自由移动

子元素为绝对定位，父元素为相对定位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>绝对定位</title>
  <style>
    .parent {
      width: 300px;
      height: 200px;
      border: 2px solid #333;
      /* 父级加相对定位，子绝父相 */
      position: relative;
    }
    .son {
      width: 80px;
      height: 80px;
      background: pink;
      /* 绝对定位 */
      position: absolute;
      top: 20px;
      left: 30px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="son">绝对定位</div>
  </div>
</body>
</html>

效果：

元素层级关系

属性名：z-index

特点：数字越大，层级越高

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>z-index 层级示例</title>
  <style>
    /* 通用盒子样式 */
    .box {
      width: 150px;
      height: 150px;
      position: absolute; /* 必须是定位元素，z-index才生效 */
      line-height: 150px;
      text-align: center;
      font-size: 18px;
      color: #fff;
    }

    .box1 {
      background: pink;
      top: 20px;
      left: 50px;
      z-index: 1; /* 层级低，在下面 */
    }

    .box2 {
      background: skyblue;
      top: 100px;
      left: 100px;
      z-index: 2; /* 层级高，在上面 */
    }
  </style>
</head>
<body>
  <div class="box box1">z-index: 1（下层）</div>
  <div class="box box2">z-index: 2（上层）</div>
</body>
</html>

效果：

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

二分之一车辆悬架半车模型研究（Simulink仿真实现）

本文针对二分之一车辆悬架系统，构建半车模型并开展B级路面激励下的动态响应研究。以前后轮路面激励为输入，通过仿真分析质心垂向加速度、俯仰角加速度及悬架动行程等关键性能指标，揭示悬架参数对车辆平顺性的影响规律。研究结果可为悬架系统优化设计提供理论依据，同时为整车动力学性能评估提供参考。

AtomGit开源社区

【最新创新】基于多元宇宙优化算法的考虑“源-荷-储”协同互动的主动配电网优化调度研究【IEEE33节点】（Matlab代码实现）

随着分布式新能源（风电、光伏）的大规模并网以及储能技术、需求响应机制的逐步推广，配电网的运行环境日趋复杂，传统依赖凸优化求解器的优化方法已难以满足多约束、非线性、多目标的配电网运行需求。本文以 IEEE33 节点配电网为研究对象，构建了包含新能源出力、储能系统、需求响应的协同优化运行模型，创新性地采用多元宇宙优化算法（Multi-Verse Optimizer, MVO）替代传统求解器，实现系统运