2_CSS基础学习笔记（Web安全方向）

DIV+CSS基础学习笔记（Web安全方向）

1. CSS概述

1.1 什么是CSS

CSS（Cascading Style Sheets，层叠样式表）是一种用来表现HTML或XML等文件样式的计算机语言。

CSS的作用：

精确控制网页元素的位置排版（像素级）
支持几乎所有字体、字号、颜色样式
配合JavaScript动态改变页面样式
将网页内容（HTML）与表现（样式）分离，提高代码复用性和可维护性

1.2 DIV与CSS的关系

DIV 是HTML中的一个标签（<div>），用于定义文档中的区块/容器。
CSS 是样式表，用于控制HTML元素的显示效果。
核心理念：用DIV承载内容，用CSS控制样式，实现结构与表现分离。

2. 样式表类型与引入方式

2.1 嵌入样式表（内嵌式）

在HTML文档的 <head> 部分使用 <style> 标签定义样式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <style>
        .demo1 {
            color: red;
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="demo1">demo1</div>
</body>
</html>

适用场景：单个页面独有样式，或开发测试阶段。

2.2 外部样式表（外链式）

将CSS代码写在独立的 .css 文件中，通过 <link> 标签或 @import 引入。

方式一：link标签（推荐）

<link rel="stylesheet" href="css/style.css">

方式二：@import（不推荐，影响加载性能）

<style>
    @import url("g.css");
</style>

外部CSS文件示例（style.css）：

.demo1 {
    color: red;
    width: 100px;
    height: 100px;
    background: blue;
}

适用场景：多个页面共享样式，便于统一维护。

2.3 内联样式（行内式）

直接在HTML标签的 style 属性中定义样式。

<div style="color: blue; width: 100px; height: 100px; background: black;">
    demo2
</div>

适用场景：临时调试或单个元素特殊样式（不推荐大规模使用）。

2.4 样式优先级（由低到高）

优先级	样式类型
低	浏览器默认样式
↓	外部样式表（link）
↓	内部样式表（style）
↓	内联样式（style属性）
高	!important（最高，谨慎使用）

就近原则：同一选择器下，后定义的样式覆盖先定义的。

3. CSS注释

CSS注释用于说明代码，不会被浏览器解析。

/* 这是单行注释 */

/*
   这是多行注释
   可以换行
*/

4. 样式选择器

选择器用于定位HTML元素并应用样式。

4.1 常用选择器

选择器类型	语法	示例	说明
元素选择器	`元素名`	`div { color: red; }`	匹配所有该标签元素
ID选择器	`#id`	`#header { height: 60px; }`	匹配id属性，唯一
类选择器	`.类名`	`.active { color: blue; }`	匹配class属性，可复用
通配符选择器	`*`	`* { margin: 0; }`	匹配所有元素
群组选择器	`选择器1,选择器2`	`h1, h2, h3 { color: green; }`	同时匹配多个选择器

4.2 层级选择器

选择器类型	语法	示例	说明
后代选择器	`父元素子元素`	`ul li { list-style: none; }`	空格，所有后代
子选择器	`父元素 > 子元素`	`ul > li { color: red; }`	仅直接子元素
相邻兄弟选择器	`元素1 + 元素2`	`h1 + p { margin-top: 0; }`	紧邻的下一个兄弟
通用兄弟选择器	`元素1 ~ 元素2`	`h1 ~ p { color: gray; }`	所有后续兄弟

4.3 属性选择器

/* 匹配有type属性的input */
input[type] { border: 1px solid red; }

/* 匹配type="text"的input */
input[type="text"] { background: #fff; }

/* 匹配class包含"btn"的元素 */
[class*="btn"] { cursor: pointer; }

/* 匹配以"icon-"开头的class */
[class^="icon-"] { display: inline-block; }

4.4 伪类与伪元素

/* 伪类：状态/位置 */
a:hover { color: red; }          /* 鼠标悬停 */
input:focus { outline: none; }   /* 获得焦点 */
li:first-child { font-weight: bold; }
li:nth-child(2n) { background: #f5f5f5; }

/* 伪元素：虚拟元素 */
p::before { content: "★"; }      /* 元素之前插入 */
p::after { content: "★"; }       /* 元素之后插入 */

5. 背景样式

5.1 背景相关属性

属性	说明	取值示例
`background-color`	背景颜色	`#fff`, `red`, `rgba(255,0,0,0.5)`
`background-image`	背景图片	`url(images/bg.jpg)`
`background-repeat`	重复方式	`no-repeat`, `repeat-x`, `repeat-y`
`background-position`	位置	`top right`, `center center`, `50% 50%`
`background-size`	尺寸	`cover`, `contain`, `100% auto`
`background-attachment`	滚动方式	`fixed`（固定）, `scroll`（滚动）
`background-origin`	定位区域	`padding-box`, `border-box`, `content-box`
`background-clip`	绘制区域	`border-box`, `padding-box`, `content-box`

5.2 背景简写

/* 顺序：颜色 图片 重复 位置 滚动 */
background: #f00 url(images/bg.gif) no-repeat top right fixed;

/* 常见用法：背景图不重复居中 */
background: url(images/logo.png) no-repeat center center;

5.3 背景图滚动效果

/* 背景固定（视差效果） */
body {
    background-image: url('bg.jpg');
    background-attachment: fixed;
}

/* 背景随内容滚动（默认） */
div {
    background-attachment: scroll;
}

6. 边框样式

6.1 边框属性

属性	说明	取值示例
`border-color`	边框颜色	`#000`, `red`
`border-width`	边框宽度	`1px`, `2px`, `thin`, `thick`
`border-style`	边框样式	`solid`, `dashed`, `dotted`, `double`, `none`

边框样式值：

none：无边框
hidden：隐藏边框（IE不支持）
solid：实线（常用）
dashed：虚线（常用）
dotted：点状虚线
double：双实线
groove/ridge/inset/outset：3D效果

6.2 方向属性

border-top: 1px solid #333;
border-right: 2px dashed #666;
border-bottom: 3px dotted #999;
border-left: 4px double #ccc;

6.3 简写方式

/* 顺序：宽度 样式 颜色 */
border: 5px solid red;

/* 三值简写：上 左右 下 */
border-width: 1px 2px 3px;

/* 四值简写：上 右 下 左（顺时针） */
border-width: 1px 2px 3px 4px;
border-style: solid dashed dotted double;
border-color: #f00 #0f0 #00f #ff0;

7. 文字与文本属性

7.1 文字属性（字体）

属性	说明	取值示例
`color`	文字颜色	`red`, `#ffeeee`
`font-size`	文字大小	`12px`, `1em`, `100%`
`font-weight`	文字粗细	`bold`, `normal`, `100-900`
`font-family`	字体	`"宋体"`, `Arial, sans-serif`
`font-style`	字体风格	`italic`（斜体）, `normal`
`font-variant`	小型大写字母	`small-caps`, `normal`

字体简写：

/* 顺序：风格 粗细 大小/行高 字体 */
font: italic bold 16px/1.5 "宋体", Arial, sans-serif;

7.2 文本属性

属性	说明	取值示例
`text-align`	水平对齐	`left`, `center`, `right`, `justify`
`text-indent`	首行缩进	`2em`, `20px`
`text-decoration`	文本装饰	`none`, `underline`, `overline`, `line-through`
`line-height`	行高	`1.5`, `20px`（可用于垂直居中）
`letter-spacing`	字间距	`2px`
`word-spacing`	单词间距	`4px`
`vertical-align`	垂直对齐	`middle`, `top`, `bottom`

7.3 垂直居中技巧（单行文本）

/* 行高等于容器高度，实现单行文本垂直居中 */
div {
    height: 40px;
    line-height: 40px;
    text-align: center;
}

8. 列表样式

8.1 列表相关属性

属性	说明	取值示例
`list-style-type`	列表标记类型	`disc`, `circle`, `square`, `decimal`, `none`
`list-style-position`	标记位置	`inside`, `outside`
`list-style-image`	自定义图片标记	`url(icon.png)`

8.2 列表标记类型详解

值	说明
`disc`	实心圆点（默认）
`circle`	空心圆圈
`square`	实心方块
`decimal`	数字（1, 2, 3...）
`decimal-leading-zero`	带前导零的数字（01, 02...）
`lower-roman`	小写罗马数字（i, ii, iii...）
`upper-roman`	大写罗马数字（I, II, III...）
`lower-alpha` / `lower-latin`	小写字母（a, b, c...）
`upper-alpha` / `upper-latin`	大写字母（A, B, C...）
`lower-greek`	小写希腊字母
`none`	无标记

8.3 简写方式

/* 顺序：类型 位置 图片 */
list-style: square inside url('/i/arrow.gif');

/* 常见：去除列表默认样式 */
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

9. 超链接样式

9.1 链接的四种状态

伪类	说明
`a:link`	未访问的链接
`a:visited`	已访问的链接
`a:hover`	鼠标悬停时
`a:active`	点击激活时（鼠标按下未松开）

9.2 示例

/* 去除下划线 */
a {
    text-decoration: none;
}

a:link {
    color: #FF0000;
}
a:visited {
    color: #00FF00;
}
a:hover {
    color: #FF00FF;
    text-decoration: underline;
}
a:active {
    color: #0000FF;
}

注意：LVHA 顺序原则（Love Hates）：link → visited → hover → active。

10. 盒子模型

10.1 盒子模型结构

每个HTML元素在CSS中都被看作一个矩形盒子，由四部分组成（从内到外）：

┌─────────────────────────────┐
│         外边距 (Margin)      │
│  ┌─────────────────────────┐ │
│  │      边框 (Border)      │ │
│  │  ┌───────────────────┐  │ │
│  │  │  内边距 (Padding) │  │ │
│  │  │  ┌─────────────┐  │  │ │
│  │  │  │  内容 Content│  │  │ │
│  │  │  └─────────────┘  │  │ │
│  │  └───────────────────┘  │ │
│  └─────────────────────────┘ │
└─────────────────────────────┘

10.2 盒子的主要属性

属性	说明
`width` / `height`	内容区域宽/高
`padding`	内边距（内容与边框的距离）
`border`	边框
`margin`	外边距（盒子与其他元素的距离）

10.3 Padding（内边距）

/* 四种写法 */
padding: 10px;              /* 上下左右都是10px */
padding: 10px 20px;         /* 上下10px，左右20px */
padding: 10px 20px 30px;    /* 上10px，左右20px，下30px */
padding: 10px 20px 30px 40px; /* 上 右 下 左（顺时针） */

/* 单独设置各方向 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

注意事项：

增加内边距会撑大盒子，需要相应减小宽高以保持盒子大小不变。
可通过 box-sizing: border-box; 让宽高包含padding和border。

10.4 Margin（外边距）

/* 写法与padding相同 */
margin: 10px 20px 30px 40px;

/* 居中技巧：水平居中（块级元素需有固定宽度） */
margin: 0 auto;

外边距合并（折叠）问题：

垂直方向上相邻的两个块级元素的外边距会合并（取最大值）。
父子元素垂直外边距也会合并（父元素没有边框或内边距时）。

10.5 border-box解决方案

/* 让宽高包含padding和border，不再撑大盒子 */
* {
    box-sizing: border-box;
}

11. 浮动（Float）

11.1 浮动的作用

浮动用于让元素脱离文档流，实现图文环绕或多列布局。

/* 浮动方向 */
float: left;   /* 左浮动 */
float: right;  /* 右浮动 */
float: none;   /* 默认，不浮动 */

11.2 清除浮动

浮动元素会脱离文档流，导致父容器高度塌陷，需要清除浮动。

方法一：clear属性

/* 在浮动元素后添加空块级元素 */
.clear {
    clear: both;   /* 清除左右浮动 */
    /* clear: left; 清除左浮动 */
    /* clear: right; 清除右浮动 */
}

方法二：父容器overflow

.parent {
    overflow: hidden;   /* 或 auto */
}

方法三：伪元素清除（推荐）

.parent::after {
    content: "";
    display: block;
    clear: both;
}

11.3 浮动对布局的影响

浮动元素会脱离文档流，后面的元素会向上移动。
浮动元素会覆盖普通元素，但文字内容会环绕浮动元素。
多个浮动元素会在一行排列（如果宽度允许）。

12. 块级元素与行内元素

12.1 块级元素（block）

特点：

独占一行
默认宽度占满父容器
可设置 width、height、margin、padding（所有方向）

常见块级元素：
<div>、<h1>-<h6>、<p>、<ul>、<ol>、<li>、<hr>、<form>、<table>、<header>、<footer>、<section>、<article>

12.2 行内元素（inline）

特点：

不独占一行，多个行内元素排列在同一行
宽度随内容变化
width、height 无效
垂直方向的 padding-top/bottom、margin-top/bottom 不产生边距效果
水平方向的 padding-left/right、margin-left/right 有效

常见行内元素：
<a>、<span>、<br>、<b>、<i>、<em>、<strong>、<code>、<label>、<input>、<img>、<textarea>、<select>

12.3 替换元素（特殊行内元素）

<img>、<input>、<textarea>、<select>、<object> 属于替换元素，它们可以设置宽度和高度，但没有实际内容。

12.4 display属性

/* 转换显示模式 */
display: block;        /* 转为块级元素 */
display: inline;       /* 转为行内元素 */
display: inline-block; /* 行内块（可以设宽高，但不独占一行） */
display: none;         /* 隐藏元素（不占位） */

12.5 visibility属性

visibility: visible;   /* 显示 */
visibility: hidden;    /* 隐藏（占位） */

13. 溢出处理

当内容超出元素框时，使用 overflow 属性控制。

13.1 overflow属性值

值	说明
`visible`	默认值，内容超出元素框可见（不修剪）
`hidden`	内容超出部分被修剪隐藏
`scroll`	显示滚动条（无论内容是否超出）
`auto`	自动，内容超出时显示滚动条

div {
    width: 200px;
    height: 100px;
    overflow: auto;   /* 超出时自动出现滚动条 */
}

13.2 overflow-x / overflow-y

/* 分别控制水平和垂直方向 */
overflow-x: hidden;
overflow-y: scroll;

14. 定位（Position）

14.1 position属性值

值	说明	参考坐标
`static`	默认值，正常文档流	无（忽略top/bottom/left/right/z-index）
`relative`	相对定位	相对于元素自身正常位置
`absolute`	绝对定位	相对于最近的非static定位的祖先元素
`fixed`	固定定位	相对于浏览器窗口
`sticky`	粘性定位	滚动到特定位置时变为固定定位

14.2 相对定位（relative）

相对于自身原来的位置偏移，原位置仍然被占用。

div {
    position: relative;
    top: 20px;    /* 向下移动20px */
    left: 30px;   /* 向右移动30px */
}

14.3 绝对定位（absolute）

脱离文档流，相对于最近的非static定位的祖先元素定位。

.parent {
    position: relative;   /* 作为参照物 */
}
.child {
    position: absolute;
    top: 0;
    right: 0;   /* 在父容器右上角 */
}

14.4 固定定位（fixed）

相对于浏览器窗口定位，滚动时不移动（常用于固定导航、弹窗广告）。

/* 固定顶部的导航栏 */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

14.5 粘性定位（sticky）

滚动到阈值时变为固定定位，实现吸顶效果。

.nav {
    position: sticky;
    top: 0;   /* 滚动到顶部时固定 */
}

14.6 定位四属性

/* 配合position使用 */
top: 10px;      /* 离上边界距离 */
bottom: 20px;   /* 离下边界距离 */
left: 30px;     /* 离左边界距离 */
right: 40px;    /* 离右边界距离 */

15. 堆叠顺序（z-index）

z-index 控制元素的堆叠顺序，值越大越靠上（即值大的元素覆盖值小的元素）。

15.1 使用条件

仅对定位元素（position 不为 static）有效。
默认值 auto。

15.2 示例

.box1 {
    position: relative;
    z-index: 1;   /* 较低层级 */
}
.box2 {
    position: absolute;
    z-index: 10;  /* 较高层级，覆盖box1 */
}

16. 总结与建议

16.1 核心概念总结

概念	关键点
盒子模型	一切皆为盒子，由content + padding + border + margin组成
浮动	脱离文档流，实现布局，需注意清除浮动
定位	static/relative/absolute/fixed/sticky，各有用途
display	block/inline/inline-block/none，控制元素显示方式
选择器	定位元素的方式，层级与优先级是学习难点

16.2 在Web安全中的意义

掌握DIV+CSS有助于：

理解XSS中CSS注入的利用方式（如通过style窃取信息）。
分析页面结构，定位敏感元素（表单、上传框等）。
构造钓鱼页面，模拟真实页面布局。
理解CSP（内容安全策略）中style-src的意义。

16.3 学习建议

动手练习：手写HTML+CSS，构建简单页面布局。
浏览器调试：使用F12开发者工具，实时修改样式观察效果。
重点掌握：盒子模型、浮动清除、定位方式、选择器优先级。
关注布局：flex和grid是目前主流布局方式，建议后续补充学习。

注意本笔记是源于暗月安全培训 https://edu.moonsec.com 的ai整合版

posted @ 2026-07-07 12:08 新手打怪兽阅读(1) 评论(0) 收藏举报

刷新页面返回顶部

新手打怪兽