Python前端-2-css基础

梁正雄2026-03-12 17:15

前端

参考：豆包-跟着ai学习，html文件

  • 本章学习知识点

    • 记住关键字，然后用vscode直接补充就行
    • 记原理，代码可以用ai生成，细微调试就行

一、CSS3 基础知识点

1.1、基础语法

  • CSS 引入方式

    引入方式 语法示例 适用场景
    外部样式表（推荐） <link rel="stylesheet" href="style.css"> 多页面共享样式，便于维护
    内部样式表 <style> /* CSS 代码 */ </style> 单页面专属样式
    行内样式（不推荐） <div style="color: red;">内容</div> 临时样式调整，优先级最高

  • CSS 语法格式

    html 复制代码 
    /* 标准格式（推荐）：一个属性一行，便于阅读和维护 */
选择器 {
    属性名1: 属性值1; /* 注释：说明该属性作用 */
    属性名2: 属性值2;
}

/* 紧凑格式：仅适用于极简单样式 */
选择器 {属性名1:值1;属性名2:值2;}

  • CSS 注释规则

    html 复制代码 
    /* 
  多行注释：
  1. 注释不会被浏览器解析
  2. 用于说明样式用途、修改记录等
*/

p {
    color: #333; /* 单行注释：设置段落文字颜色 */
}

1.2、CSS 单位

  • 长度单位（常用）

    单位 说明 使用场景
    px 像素（固定单位） 大部分基础样式（如字体、宽高）
    em 相对父元素字体大小（1em = 父元素 font-size） 响应式文字、内边距
    rem 相对根元素（html）字体大小 全局响应式布局
    % 相对父元素对应属性值 宽度、高度、边距等
    vw/vh 视口宽度 / 高度的 1% 移动端适配
    • 备注：cm/mm/pt 为物理单位，仅适用于打印样式，网页开发极少使用。

  • 颜色单位

    类型 示例 特点
    颜色名称 red、green、blue、skyblue、pink 简单易记，仅适用于基础颜色
    RGB/RGBA rgb(255, 0, 0)、rgba(255, 0, 0, 0.5) 可精确控制颜色，RGBA 支持透明度（0-1）
    16 进制 #ff0000、#f00（简写）、#cccccc（#ccc） 网页开发最常用，简洁高效
    HSL/HSLA hsl(0, 100%, 50%) 按色相 / 饱和度 / 亮度定义，更符合人眼感知

二、CSS 选择器

2.1、选择器原理

  1. 基本选择器： （优先级：ID > 类 > 标签 > 全局）

    选择器 语法 说明 示例
    标签选择器 tagName 选中所有指定标签 p { color: #666; }（所有段落文字变灰色）
    类选择器 .className 选中所有 class 为指定值的元素 .box { width: 100px; }（所有 class="box" 的元素宽 100px）
    ID 选择器 #idName 选中唯一 ID 为指定值的元素（ID 全局唯一） #header { height: 80px; }（仅 id="header" 的元素生效）
    全局选择器 * 选中页面所有元素 * { margin: 0; padding: 0; }（重置默认边距）
    群组选择器 sel1, sel2, sel3 同时选中多个选择器的元素 h1, h2, h3 { font-weight: normal; }（所有标题取消加粗）

  2. 层级选择器

    选择器 语法 说明 示例
    后代选择器 sel1 sel2 选中 sel1 下所有 sel2（包括子 / 孙 / 曾孙） .nav a { color: #333; }（.nav 内所有 a 标签）
    子元素选择器 sel1 > sel2 仅选中 sel1 直接子元素的 sel2 .nav > li { float: left; }（.nav 直接子元素 li）
    相邻兄弟选择器 sel1 + sel2 选中 sel1 紧邻的下一个 sel2 h1 + p { margin-top: 10px; }（h1 后第一个 p 标签）
    通用兄弟选择器 sel1 ~ sel2 选中 sel1 后面所有同级的 sel2 h1 ~ p { color: #999; }（h1 后所有同级 p 标签）

  3. 属性选择器

    选择器 语法 说明 示例
    含指定属性 [attr] 选中包含 attr 属性的元素 input[disabled] { opacity: 0.5; }（禁用的输入框半透明）
    属性等于值 [attr=value] 选中 attr 属性值等于 value 的元素 input[type="text"] { width: 200px; }（文本输入框宽 200px）
    属性以值开头 [attr^=value] 选中 attr 属性值以 value 开头的元素 a[href^="https"] { color: green; }（https 链接变绿色）
    属性以值结尾 [attr$=value] 选中 attr 属性值以 value 结尾的元素 a[href$=".pdf"] { icon: url(pdf.png); }（PDF 链接加图标）
    属性包含值 [attr*=value] 选中 attr 属性值包含 value 的元素 a[href*="baidu"] { color: #3388ff; }（含百度的链接）
    多属性组合 [attr1][attr2] 同时满足多个属性条件 input[type="tel"][disabled] { cursor: not-allowed; }

  4. 复合选择器（多条件叠加）

    语法 说明 示例
    标签 + 类 tag.className 选中指定标签且 class 匹配的元素 p.item { text-indent: 2em; }（仅 class="item" 的 p 标签缩进）
    类 + 属性 .className[attr] 选中指定类且含指定属性的元素 .btn[type="submit"] { background: #007bff; }

  5. 选择器优先级（核心规则）

    • 优先级权重：ID 选择器 (100) > 类 / 属性 / 伪类选择器 (10) > 标签 / 伪元素选择器 (1) > 全局选择器 (0)
    • 叠加计算 ：组合选择器的优先级 = 各部分权重之和（如 #nav .item a = 100 + 10 + 1 = 111）
    • !important ：加在属性值后可强制提升优先级（如 color: red !important;），尽量少用
    • 就近原则：同优先级时，后定义的样式覆盖先定义的

2.2、选择器示例

  • 基本选择器

    • 标签选择器

      css 复制代码 
      /* 选中页面所有 <p> 标签 */
p {
  color: #666;        /* 文字颜色设为灰色 */
  font-size: 14px;    /* 字体大小14px */
  line-height: 1.5;   /* 行高1.5倍 */
}

/* 选中页面所有 <a> 标签 */
a {
  text-decoration: none; /* 去掉下划线 */
}

      效果 ：所有 <p> 标签文字统一样式，所有 <a> 标签默认无下划线。

    • 类选择器

      html 复制代码 
      /* 选中所有 class="box" 的元素 */
.box {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc; /* 灰色边框 */
  padding: 10px;          /* 内边距10px */
}

/* 选中所有 class="text-red" 的元素 */
.text-red {
  color: #ff0000; /* 文字红色 */
}

      效果 ：任意标签只要添加 class="box" 就会应用盒子样式，class="text-red" 就会文字变红（可复用）。

    • ID 选择器

      css 复制代码 
      /* 选中唯一 id="header" 的元素（ID 全局唯一） */
#header {
  height: 80px;
  background-color: #f5f5f5; /* 浅灰色背景 */
  text-align: center;        /* 文字居中 */
}

/* 选中唯一 id="footer" 的元素 */
#footer {
  padding: 20px;
  color: #999;
}

      效果 ：仅页面中 id="header"/id="footer" 的元素生效，一个页面只能有一个同名 ID。

    • 全局选择器

      html 复制代码 
      /* 选中页面所有元素（常用作重置默认样式） */
* {
  margin: 0;        /* 清除默认外边距 */
  padding: 0;       /* 清除默认内边距 */
  box-sizing: border-box; /* 盒模型：宽高包含边框/内边距 */
}

      效果：重置浏览器默认样式，避免不同浏览器的默认边距 / 样式差异。

    • 群组选择器

      html 复制代码 
      /* 同时选中 h1、h2、.title 三种选择器的元素 */
h1, h2, .title {
  font-weight: normal; /* 取消加粗 */
  color: #333;         /* 深灰色文字 */
  margin-bottom: 10px; /* 底部外边距10px */
}

      效果 ：h1、h2 标签和所有 class="title" 的元素共用同一套样式，减少重复代码。

  • 层级选择器

    • 后代选择器（空格）

      html 复制代码 
      /* 选中 .nav 下所有 <a> 标签（包括子/孙/曾孙节点） */
.nav a {
  color: #666;
  margin: 0 5px;
}

/* 选中 #content 下所有 class="item" 的元素 */
#content .item {
  border-bottom: 1px dashed #eee;
}

      效果 ：.nav 内部无论嵌套多少层，所有 <a> 标签都生效；#content 内所有 .item 元素添加虚线底边框。

      • 子元素选择器（>）

        html 复制代码 
        /* 仅选中 .nav 直接子节点的 <li> 标签（孙节点的 li 不生效） */
.nav > li {
  display: inline-block; /* 横向排列 */
  padding: 8px 12px;
}

/* 仅选中 .list 直接子节点的 <div> 标签 */
.list > div {
  background-color: #f9f9f9;
}

        效果：只匹配「直接子元素」，避免样式穿透到深层嵌套的元素。

      • 相邻兄弟选择器（+）

        css 复制代码 
        /* 选中 h2 紧邻的下一个 <p> 标签（仅第一个） */
h2 + p {
  color: #e63946; /* 红色文字 */
  font-weight: bold; /* 加粗 */
}

/* 选中 .active 紧邻的下一个 .item 元素 */
.active + .item {
  border-left: 3px solid #007bff;
}

        效果：仅匹配「紧邻且同级」的下一个元素，中间隔了其他元素则不生效。

      • 通用兄弟选择器（~）

        css 复制代码 
        /* 选中 h2 后面所有同级的 <p> 标签（不限紧邻） */
h2 ~ p {
  font-style: italic; /* 斜体 */
  color: #777;
}

/* 选中 #tab1 后面所有同级的 .tab 元素 */
#tab1 ~ .tab {
  opacity: 0.8; /* 透明度80% */
}

        效果：匹配「同级且在后面」的所有指定元素，不要求紧邻。

  • 属性选择器

    • 含指定属性

      css 复制代码 
      /* 选中所有带 disabled 属性的 input 元素 */
input[disabled] {
  background-color: #f0f0f0; /* 浅灰色背景 */
  cursor: not-allowed;      /* 禁用光标 */
}

/* 选中所有带 href 属性的 <a> 标签 */
a[href] {
  text-decoration: underline; /* 加下划线 */
}

      效果：只要元素包含指定属性，无论属性值是什么都生效。

    • 属性等于值

      css 复制代码 
      /* 选中 type="text" 的 input 元素 */
input[type="text"] {
  width: 200px;
  padding: 5px;
  border: 1px solid #999;
}

/* 选中 target="_blank" 的 <a> 标签 */
a[target="_blank"] {
  background: url("external.png") no-repeat right; /* 加外部链接图标 */
  padding-right: 15px;
}

      效果：仅匹配属性值「完全等于」指定值的元素。

    • 属性以值开头（^=）

      css 复制代码 
      /* 选中 href 以 https 开头的 <a> 标签 */
a[href^="https"] {
  color: #2a9d8f; /* 青绿色 */
  font-weight: bold;
}

/* 选中 class 以 "btn-" 开头的元素 */
[class^="btn-"] {
  padding: 6px 12px;
  border-radius: 4px;
}

      效果：匹配属性值「以指定字符开头」的元素。

    • 属性以值结尾（$=）

      css 复制代码 
      /* 选中 href 以 .pdf 结尾的 <a> 标签 */
a[href$=".pdf"] {
  color: #e76f51; /* 橙色 */
}

/* 选中 src 以 .jpg 结尾的 <img> 标签 */
img[src$=".jpg"] {
  border: 2px solid #ddd;
}

      效果：匹配属性值「以指定字符结尾」的元素。

    • 属性包含值（*=）

      css 复制代码 
      /* 选中 href 包含 "baidu" 的 <a> 标签 */
a[href*="baidu"] {
  color: #3388ff; /* 蓝色 */
}

/* 选中 class 包含 "active" 的元素 */
[class*="active"] {
  background-color: #fff3cd;
}

      效果：匹配属性值「包含指定字符」的元素（字符可在任意位置）。

    • 多属性组合

      css 复制代码 
      /* 同时满足 type="tel" 和 disabled 的 input 元素 */
input[type="tel"][disabled] {
  border: 1px solid #ff6b6b; /* 红色边框 */
}

/* 同时满足 href 包含 "docs" 且 target="_blank" 的 <a> 标签 */
a[href*="docs"][target="_blank"] {
  color: #6a994e;
}

      效果：多个属性条件叠加，需「同时满足」才生效。

  • 复合选择器（多条件叠加）

    • 标签 + 类

      css 复制代码 
      /* 仅选中 class="highlight" 的 <p> 标签（div.highlight 不生效） */
p.highlight {
  background-color: #fff3cd;
  border-left: 3px solid #ffc107;
  padding-left: 10px;
}

/* 仅选中 class="primary" 的 <button> 标签 */
button.primary {
  background-color: #007bff;
  color: white;
  border: none;
}

      效果：「标签 + 类」无分隔符，需同时满足标签类型和类名才生效。

      • 类 + 属性

        css 复制代码 
        /* 仅选中 class="btn" 且 type="submit" 的按钮 */
.btn[type="submit"] {
  background-color: #007bff;
  padding: 8px 20px;
}

/* 仅选中 class="form-item" 且 required 的 input 元素 */
.form-item[required] {
  border: 1px solid #dc3545;
}

        效果：「类 + 属性」无分隔符，需同时满足类名和属性条件才生效。

三、CSS 尺寸、边框与内边距

3.1、尺寸属性（宽高控制）

  • 属性说明

    属性 作用 取值示例 关键说明
    width 设置元素宽度 width: 200px; / width: 50%; 块级元素默认 100% 宽度，行内元素无效
    height 设置元素高度 height: 100px; / height: auto; 默认值 auto（由内容撑起）
    max-width 最大宽度（不超过此值） max-width: 800px; 适配响应式布局，防止元素过宽
    min-width 最小宽度（不小于此值） min-width: 300px; 防止元素过窄导致内容错乱
    max-height 最大高度（不超过此值） max-height: 500px; 超出部分可配合 overflow 处理
    min-height 最小高度（不小于此值） min-height: 200px; 保证容器最低高度，内容多则自动撑开

  • 示例（尺寸控制）

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>尺寸属性示例</title>
    <style>
        /* 基础容器 */
        .container {
            background: #f5f5f5;
            border: 1px solid #ccc;
            margin: 20px 0;
        }
        
        /* 固定宽高 */
        .box1 {
            width: 300px;
            height: 150px;
        }
        
        /* 响应式宽度（最大/最小宽度） */
        .box2 {
            width: 80%; /* 占父元素80%宽度 */
            max-width: 600px; /* 最多600px */
            min-width: 300px; /* 最少300px */
            height: auto; /* 高度由内容决定 */
            padding: 10px;
        }
        
        /* 最大高度 + 溢出处理 */
        .box3 {
            width: 300px;
            max-height: 100px; /* 最大高度100px */
            overflow: auto; /* 超出部分显示滚动条 */
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container box1">固定宽高：300px × 150px</div>
    <div class="container box2">响应式宽度：80%（300px~600px），高度自适应</div>
    <div class="container box3">最大高度100px，超出滚动<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容</div>
</body>
</html>

    效果说明：

    • box1：固定宽高，无论内容多少都保持 300px×150px；
    • box2：宽度随父元素缩放，但限制在 300px~600px 之间，高度随内容变化；
    • box3：高度最多 100px，内容超出时显示滚动条，避免容器撑破。

3.2、边框属性（Border）

  • 属性说明

    属性 作用 取值 / 示例
    border-style 边框样式（必设，否则边框不显示） solid（实线）/ dotted（点线）/ dashed（虚线）/ double（双实线）/ none（无）
    border-width 边框宽度 1px / 3px / medium（默认）/ thin / thick
    border-color 边框颜色 #ccc / red / rgb(200,200,200)
    border 复合属性（推荐） border: 1px solid #ccc;（宽度 样式 颜色，顺序可换）

  • 边框样式演示示例

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>边框样式示例</title>
    <style>
        .border-box {
            width: 200px;
            height: 80px;
            margin: 10px 0;
            text-align: center;
            line-height: 80px;
        }
        
        /* 不同边框样式 */
        .solid { border: 2px solid #007bff; } /* 实线 */
        .dotted { border: 2px dotted #dc3545; } /* 点线 */
        .dashed { border: 2px dashed #28a745; } /* 虚线 */
        .double { border: 3px double #ffc107; } /* 双实线（宽度建议≥3px） */
        .none { border: 2px none #666; } /* 无边框（不显示） */
        
        /* 单独设置某一侧边框 */
        .single-side {
            width: 200px;
            height: 80px;
            margin: 10px 0;
            border-top: 2px solid #007bff; /* 仅顶部边框 */
            border-bottom: 1px dashed #666; /* 仅底部边框 */
        }
    </style>
</head>
<body>
    <div class="border-box solid">solid 实线</div>
    <div class="border-box dotted">dotted 点线</div>
    <div class="border-box dashed">dashed 虚线</div>
    <div class="border-box double">double 双实线</div>
    <div class="border-box none">none 无边框</div>
    <div class="single-side">单独设置上下边框</div>
</body>
</html>

    关键技巧：

    • border-style 是边框显示的核心，仅设置宽度 / 颜色但样式为 none 时，边框不显示；
    • 双实线（double）建议宽度≥3px，否则视觉效果不明显；
    • 可通过 border-[top/right/bottom/left] 单独设置某一侧边框。

3.3、内边距（Padding）

  • 属性说明

    简写形式 等价展开 说明
    padding: 10px; padding-top:10px;<br>padding-right:10px;<br>padding-bottom:10px;<br>padding-left:10px; 四个方向内边距均为 10px
    padding: 10px 20px; padding-top:10px;<br>padding-right:20px;<br>padding-bottom:10px;<br>padding-left:20px; 上下 10px，左右 20px
    padding: 10px 20px 30px; padding-top:10px;<br>padding-right:20px;<br>padding-bottom:30px;<br>padding-left:20px; 上 10px，左右 20px，下 30px
    padding: 10px 20px 30px 40px; padding-top:10px;<br>padding-right:20px;<br>padding-bottom:30px;<br>padding-left:40px; 上 右 下 左（顺时针顺序）

  • 实用示例（Padding 简写与单独设置）

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内边距 Padding 示例</title>
    <style>
        .padding-box {
            width: 200px;
            background: #f5f5f5;
            border: 1px solid #ccc;
            margin: 15px 0;
        }
        
        /* 不同 Padding 简写 */
        .p1 {
            padding: 20px; /* 四个方向20px */
        }
        .p2 {
            padding: 10px 30px; /* 上下10px，左右30px */
        }
        .p3 {
            padding: 5px 15px 20px; /* 上5px，左右15px，下20px */
        }
        .p4 {
            padding: 5px 10px 15px 20px; /* 上5，右10，下15，左20 */
        }
        
        /* 单独设置某一侧 Padding */
        .single-padding {
            width: 200px;
            background: #f5f5f5;
            border: 1px solid #ccc;
            padding-top: 10px; /* 仅顶部内边距 */
            padding-left: 30px; /* 仅左侧内边距 */
        }
    </style>
</head>
<body>
    <div class="padding-box p1">padding: 20px;<br>四个方向20px</div>
    <div class="padding-box p2">padding: 10px 30px;<br>上下10px，左右30px</div>
    <div class="padding-box p3">padding: 5px 15px 20px;<br>上5px，左右15px，下20px</div>
    <div class="padding-box p4">padding: 5px 10px 15px 20px;<br>上5，右10，下15，左20</div>
    <div class="single-padding">单独设置：顶部10px，左侧30px</div>
</body>
</html>

    关键注意：

    • Padding 会增加元素总宽度（默认盒模型 content-box 下），如需避免，需设置 box-sizing: border-box；
    • Padding 不能设为负值，而 Margin 可以；
    • 行内元素的上下 Padding 不会影响行高，但左右 Padding 生效（可通过 display: inline-block 解决）。

  • 总结

    • 尺寸属性 ：max-width/min-width 是响应式布局核心，优先用 max-width 替代固定宽度；height: auto 让元素高度随内容自适应。
    • 边框属性 ：border-style 是必选属性，复合写法 border: 宽度 样式 颜色 最常用，可单独设置某一侧边框。
    • 内边距 Padding：简写遵循「顺时针」规则（上→右→下→左），缺失值对称补充，可单独设置某一侧，无负值。

四、CSS盒模型

4.1、盒模型概念

  • 层级说明： CSS 盒模型是每个 HTML 元素的基础布局结构，由内到外分为 4 层：

    层级 说明 特点
    content 内容区域（文字 / 图片等） 宽高由 width/height 定义
    padding 内边距（内容与边框之间的距离） 会增加元素总宽高，背景色覆盖
    border 边框（内边距外的线条） 会增加元素总宽高
    margin 外边距（元素与其他元素之间的距离） 不占元素自身宽高，透明无背景

  • 关键 ： 默认盒模型（content-box）中，元素总宽度 = width + padding + border ；推荐使用 box-sizing: border-box，此时总宽度 = width（padding/border 包含在 width 内）

4.2、示例

  • 基础语法1-基础盒模型结构演示

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒模型基础示例</title>
    <style>
        /* 基础盒子样式 */
        .box {
            width: 200px;       /* 内容宽度 */
            height: 100px;      /* 内容高度 */
            background-color: #f5f5f5; /* 背景色（覆盖content+padding） */

            /* 1. 内边距 padding：上 右 下 左（顺时针） */
            padding: 20px;      /* 四个方向都20px */

            /* 2. 边框 border：宽度 样式 颜色 */
            border: 2px solid #007bff; /* 2px 实线 蓝色 */

            /* 3. 外边距 margin：上 右 下 左（顺时针） */
            margin: 30px;       /* 四个方向都30px */
        }
    </style>
</head>
<body>
    <div class="box">我是基础盒子（content）</div>
</body>
</html>

    效果说明：

    • 盒子内容区域（文字部分）宽 200px、高 100px；
    • 内容与边框之间有 20px 内边距（上下左右都有）；
    • 边框是 2px 蓝色实线；
    • 盒子与页面其他元素（这里是 body）之间有 30px 外边距。

  • 基础语法2-padding/border/margin 单独设置方向

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>方向单独设置示例</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background: #f5f5f5;
            
            /* padding 单独设置：上、右、下、左 */
            padding-top: 10px;    /* 仅顶部内边距 */
            padding-right: 20px;  /* 仅右侧内边距 */
            padding-bottom: 10px; /* 仅底部内边距 */
            padding-left: 20px;   /* 仅左侧内边距 */
            
            /* border 单独设置某一侧 */
            border-top: 3px solid red;    /* 仅顶部边框 */
            border-bottom: 1px dashed #666; /* 仅底部虚线边框 */
            
            /* margin 单独设置某一侧 */
            margin-top: 15px;     /* 仅顶部外边距 */
            margin-left: 50px;    /* 仅左侧外边距 */
        }
    </style>
</head>
<body>
    <div class="box">单独设置方向的盒子</div>
</body>
</html>

    核心语法：

    • padding/margin：-top/-right/-bottom/-left 后缀可单独设置某方向；
    • border：除了方向后缀，还可设置样式（solid 实线 /dashed 虚线 /dotted 点线）。

  • 进阶1 - 利用 padding 实现文字居中（无固定高度）

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>padding 垂直居中</title>
    <style>
        .btn {
            /* 不设置高度，由 padding 撑起 */
            padding: 10px 20px; /* 上下10px，左右20px */
            background: #007bff;
            color: white;
            border: none;			/* 无边框  */
            cursor: pointer;		/* 鼠标滑上去有个小手指 */
        }
    </style>
</head>
<body>
    <button class="btn">按钮文字垂直居中</button>
</body>
</html>

    优点：无需固定高度，文字多少不影响垂直居中，适配性更好。

  • 进阶2 - 利用 margin 实现元素水平居中

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>margin 水平居中</title>
    <style>
        .container {
            width: 400px;       /* 固定宽度 */
            height: 200px;
            background: #f5f5f5;
            /* 水平居中核心：左右 margin 设为 auto */
            margin: 0 auto;     /* 上下0，左右自动 */
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">我是水平居中的盒子</div>
</body>
</html>

    注意 ：仅对「块级元素 + 固定宽度」生效，行内元素需先转块级（display: block）。

  • 进阶3 - border 实现小三角

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>border 实现三角</title>
    <style>
        .triangle {
            width: 0;           /* 宽高设为0 */
            height: 0;
            /* 四个方向边框设置不同颜色，只保留需要的方向 */
            border-width: 10px; /* 三角大小由边框宽度决定 */
            border-style: solid;
            border-color: transparent transparent #007bff transparent; 
            /* 上、右、下、左：仅底部蓝色，其余透明 */

        }
    </style>
</head>
<body>
    <div class="triangle"></div> <!-- 显示向上的蓝色小三角 -->
</body>
</html>

    修改方向 ：调整 border-color 中透明 / 有色的位置即可（比如 #007bff transparent transparent transparent 是向下的三角）。 border-color： 每一个框占25%， 顺序按顺时针的上右下左

  • 进阶4 - box-sizing: border-box（推荐全局使用）

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>border-box 盒模型</title>
    <style>
        /* 全局设置：所有元素使用 border-box 盒模型 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /* 核心：padding/border 包含在 width 内 */
        }
        
        .box {
            width: 200px;       /* 总宽度就是200px，不会被padding/border撑开 */
            padding: 20px;
            border: 5px solid #007bff;
            background: #f5f5f5;
        }
    </style>
</head>
<body>
    <div class="box">总宽度=200px（padding+border 包含在内）</div>
</body>
</html>

    核心优势：设置 width/height 后，padding/border 不会额外增加元素总宽高，布局更可控（新手必用）。

  • 避坑示例1 - margin 塌陷（父子元素）

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>margin 塌陷解决</title>
    <style>
        .parent {
            width: 300px;
            background: #f5f5f5;
            /* 解决塌陷：加边框/内边距/overflow: hidden 任选其一 */
            /* border: 1px solid transparent; */
            /* padding-top: 1px; */
            overflow: hidden; /* 推荐：无额外空间占用 */
        }
        
        .child {
            width: 100px;
            height: 100px;
            background: #007bff;
            margin-top: 20px; /* 若无父元素的解决样式，margin会作用到父元素上 */
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

    问题说明 ：子元素的 margin-top 会「穿透」父元素，导致父元素也跟着下移；解决方式如上注释。

  • 避坑示例2 - margin 合并（兄弟元素）

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>margin 合并解决</title>
    <style>
        .box1 {
            height: 100px;
            background: #f5f5f5;
            margin-bottom: 30px; /* 底部外边距 */
        }
        
        .box2 {
            height: 100px;
            background: #007bff;
            margin-top: 20px; /* 顶部外边距 */
            /* 解决合并：给其中一个元素加 float/absolute 或用 padding 替代 */
            float: left;
            width: 100%; /* 浮动后需重置宽度 */
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <!-- 无解决样式时，两个盒子间距是 30px（取最大值），而非 50px -->
</body>
</html>

    问题说明：兄弟元素的上下 margin 会「合并」，最终间距取最大值而非相加；解决方式如上。

  • 总结

    • 核心语法 ：padding/border/margin 均可通过 -top/-right/-bottom/-left 单独设置方向，也可简写（如 padding: 10px 20px 表示上下 10px、左右 20px）。
    • 实用技巧 ：box-sizing: border-box 全局设置可避免宽高计算混乱；margin: 0 auto 实现块级元素水平居中；padding 适合做内间距，margin 适合做外间距。
    • 避坑要点 ：父子 margin 塌陷用 overflow: hidden 解决，兄弟 margin 合并可改用 padding 或浮动。

五、其它属性

5.1、字体属性

  • 字体属性说明表

    属性 取值 / 特性 效果说明
    font-family 字体名称列表（如 "微软雅黑", Arial, sans-serif） 优先使用第一个字体，找不到则依次往后，最后用通用字体兜底
    font-size px/em/rem/%/vw 等（如 16px、1em） 设置字体大小，16px 是网页正文默认大小
    font-weight normal (400)/bold (700)，或数字 100-900 normal：正常字重；bold：加粗；数字越大越粗
    font-style normal/italic normal：取消斜体；italic：设置斜体
    font-variant normal/small-caps normal：正常样式；small-caps：小写字母转为小型大写（中文无效果）
    font（复合） [weight/style/variant] size family（size 和 family 必写） 整合字体属性，按「样式 / 字重 → 大小 → 字体族」顺序书写
    • font:[weith | style | variant] size family

  • 字体属性示例代码

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性</title>
    <style>
        .font-family-demo{ font-family: "微软雅黑", "Arial";  }
        .font-size-demo{ font-size: 18px; }
        .font-weight-normal{ font-weight: normal; }
        .font-weight-normal2 {font-weight: bold;}
        .font-style-normal{ font-style: normal; }
        .font-style-normal2{ font-style: italic; }
        .font-variant-normal{ font-variant: normal; }
        .font-variant-small{ font-variant: small-caps; }
        .font-complex{ font: bold italic small-caps 18px "微软雅黑"; }
    </style>
</head>
<body>
    <div class="font-family-demo">font-family：微软雅黑优先</div>
    <div class="font-size-demo">font-size：18px</div>
    <div class="font-weight-normal">font-weight：normal</div>
    <div class="font-weight-normal2">font-weight：bold</div>
    <div class="font-style-normal">font-style：normal</div>
    <div class="font-style-normal2">font-style： italic</div>
    <div class="font-variant-normal">font-variant：normal (Hello)</div>
    <div class="font-variant-small">font-variant：small-caps (Hello)</div>
    <div class="font-complex">font 复合属性：bold+italic+small-caps+18px+微软雅黑</div>
</body>
</html>

5.2、颜色属性

  • 颜色属性说明表

    属性 取值 / 特性 效果说明
    color 十六进制（#336699）/RGB（rgb (51,102,153)）/RGBA/ 英文单词（blue） 设置文字颜色，RGBA 第四个值为透明度（0-1），取值范围 0（全透明）-1（不透明）

  • 示例

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2、颜色属性</title>
    <style>
        .color-hex{color: #336699;}
        .color-rgb{color: rgb(51, 102, 153);}
        .color-rgba{color: rgba(51, 102, 153, 0.8);}
        .color-word{color: blue;}
    </style>
</head>
<body>
    <div class="color-hex">color：#336699（十六进制）</div>
    <div class="color-rgb">color：rgb(51, 102, 153)（RGB）</div>
    <div class="color-rgba">color：rgba(51, 102, 153, 0.8)（RGBA）</div>
    <div class="color-word">color：blue（英文单词）</div>
</body>
</html>
    • 随便填个色系，然后用vscode拉到要用的属性值就行

5.3、文本属性

  • 子分类 1：文本对齐 & 间距

    • 属性说明表

      属性 取值 / 特性 效果说明
      word-spacing 数值 + 单位（如 10px）/normal 调整英文单词之间的间距，中文无效果；normal 恢复默认间距
      letter-spacing 数值 + 单位（如 3px）/normal 调整每个字符 / 字母的间距，中英文都有效；normal 恢复默认间距
      text-align left/center/right/justify/inherit 控制文本水平对齐，仅对块级元素内的内联内容生效；justify 两端对齐
      vertical-align baseline/middle/top/bottom/sub/super 等 控制内联元素 / 表格单元格的垂直对齐，对块级元素无效；baseline 是默认值
      line-height 纯数字（如 1.8）/ 数值 + 单位（如 80px）/normal 1. 纯数字是字体大小的倍数（提升可读性）；2. 等于容器高度时实现单行文本垂直居中

    • 示例

      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3、文本对齐</title>
    <style>
        .word-spacing-demo {word-spacing: 10px;}
        .letter-spacing-demo {letter-spacing: 3px;}
        .text-align-center {text-align: center;}
        .text-align-justify {text-align: justify;}
        .vertical-demo { font-size: 24px;}
        .vertical-demo span {
            font-size: 12px;
            vertical-align: middle ;
        }
        .line-height-readable {
            line-height: 1.8;
            font-size: 18px;
        }
        .line-height-center {
            width: 300px;
            height: 80px;
            border: 1px solid #ccc;
            line-height: 80px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="word-spacing-demo">word-spacing：Hello World（单词间距10px）</div>
    <div class="letter-spacing-demo">letter-spacing：你好 Hello（字符间距3px）</div>
    <div class="text-align-center">text-align：center（水平居中）</div>
    <div class="text-align-justify">text-align：justify（两端对齐），这是一段测试文本，用于展示两端对齐的效果。</div>
    <div class="vertical-demo">vertical-align：middle <span>小号文字居中</span></div>
    <div class="line-height-readable">line-height：1.8（提升可读性）<br>第二行文本，行高更舒适</div>
    <div class="line-height-center">line-height：80px（单行垂直居中）</div>
</body>
</html>

  • 子分类 2：文本装饰 & 排版

    • 属性说明表

      属性 取值 / 特性 效果说明
      text-decoration none/underline/overline/line-through 控制文本装饰线：none 去除下划线（常用在 a 标签）；underline 下划线；line-through 删除线
      text-indent 数值 + 单位（如 2em）/ 百分比（如 10%） 控制文本首行缩进，2em=2 个当前字体大小（网页正文最常用）；百分比基于父容器宽度

    • 示例

      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4、文本装饰</title>
    <style>
        .text-dec-none { text-decoration: none; cursor: pointer;}
        .text-dec-line { text-decoration: line-through; color: gray;}
        .text-indent-demo { text-indent: 2em; font-size: 18px; line-height: 1.4;}
    </style>
</head>
<body>
    <a href="#" class="text-dec-none">text-decoration：none（无下划线链接）</a>
    <div class="text-dec-line">text-decoration：line-through（删除线+灰色）</div>
    <div class="text-indent-demo">text-indent：2em（首行缩进2字符），这是网页正文最经典的排版方式，让段落开头有缩进，符合中文阅读习惯。</div>
</body>
</html>

  • 子分类 3：文本换行 & 空白处理

    • 属性说明表

      属性 取值 / 特性 效果说明
      word-wrap normal/break-word 强制长单词 / URL换行，避免溢出容器；break-word 是开发中核心用法
      overflow-wrap normal/break-word（word-wrap 的 CSS3 官方别名） 与 word-wrap 效果完全一致，优先级更高，建议优先使用
      white-space normal/pre/pre-wrap/pre-line/nowrap/inherit 控制空白（空格 / 换行）的处理方式： 1. normal：合并空格 / 换行； 2. pre：保留空格 / 换行但不自动换行； 3. pre-wrap：保留空格 / 换行且自动换行； 4. nowrap：不换行

    • 示例

      html 复制代码 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5、文本换行</title>
    <style>
        /* 长单词换行（推荐用overflow-wrap） */
        .overflow-wrap-demo {
          width: 200px;
          border: 1px solid #ccc;
          overflow-wrap: break-word;
        }
        /* 空白处理 - pre-wrap */
        .white-space-pre-wrap {
          width: 200px;
          border: 1px solid #ccc;
          white-space: pre-wrap;
        }
        /* 空白处理 - nowrap */
        .white-space-nowrap {
          width: 200px;
          border: 1px solid #ccc;
          white-space: nowrap;
          overflow: hidden; /* 配合nowrap隐藏溢出内容 */
          text-overflow: ellipsis; /* 溢出显示省略号 */
        }
    </style>
</head>
<body>
    <div class="overflow-wrap-demo">overflow-wrap：break-word（长单词换行）：supercalifragilisticexpialidocious</div>
    <div class="white-space-pre-wrap">white-space：pre-wrap
    保留空格  和 换行，且自动换行</div>
    <div class="white-space-nowrap">white-space：nowrap（不换行+省略号）：这是一段超长的测试文本，用于展示不换行且溢出显示省略号的效果</div>

</body>
</html>
相关推荐
kyriewen113 小时前
你点的“刷新”是假刷新？前端路由的瞒天过海术
开发语言·前端·javascript·ecmascript·html5
极梦网络无忧3 小时前
OpenClaw 基础使用说明（中文版）
python
codeJinger4 小时前
【Python】操作Excel文件
python·excel
XLYcmy4 小时前
一个针对医疗RAG系统的数据窃取攻击工具
python·网络安全·ai·llm·agent·rag·ai安全
Islucas5 小时前
Claude code入门保姆级教程
python·bash·claude
skywalk81635 小时前
Kotti Next的tinyfrontend前端模仿Kotti 首页布局还是不太好看，感觉比Kotti差一点
前端
萝卜白菜。5 小时前
TongWeb7.0相同的类指明加载顺序
开发语言·python·pycharm
赵钰老师5 小时前
【ADCIRC】基于“python+”潮汐、风驱动循环、风暴潮等海洋水动力模拟实践技术应用
python·信息可视化·数据分析
爬山算法5 小时前
MongoDB（80）如何在MongoDB中使用多文档事务？
数据库·python·mongodb
热门推荐
01GitHub 镜像站点02Qwen3.5-Omni与Qwen3.6模型全面解析（含测评/案例/使用教程）03VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）04OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程052026年3月AI领域大事件：DeepSeek引领开源风暴06【技术干货】Gemma 4 上手深度指南：本地多模态大模型的新基线07AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南08纯 HTML/CSS/JS 实现的高颜值登录页，还会眨眼睛！少女心爆棚！09Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services10“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）