当前位置：首页 > article >正文

【前端】CSS 基础

article 2025/10/18 15:14:33

> 作者：დ旧言~
> 座右铭：松树千年终是朽，槿花一日自为荣。

> 目标：了解 CSS 基础语法。

> 毒鸡汤：有些事情，总是不明白，所以我不会坚持。早安!

> 专栏选自：前端基础知识_დ旧言~的博客-CSDN博客

> 望小伙伴们点赞👍收藏✨加关注哟💕💕

一、CSS是什么

概念：

CSS(Cascading Style Sheet)：样式层叠器，用于控制页面表现，简单来说就是用于美化页面的效果。

1.1、语法规则

使用：

选择器 {属性名1：属性值1;属性名2：属性值2;...  ...
}

说明：

冒号后面带空格。
选择器和 { 之间也有一个空格。
css 不区分大小写，开发时统一使用小写。
每一对属性需要使用；隔开，最后一对属性可以不加。
CSS注释的格式，也可以通过 ctrl + / 快速注释

1.2、引入方式

1.2.1、内部样式表

概念：

内部样式表是写在当前编辑的 html 中的 style 标签内，理论上来说 style 标签可以放到 html 的任意位置，但我们一般都是习惯放到 head 标签中。其中 p { } 表示选择器。

举个栗子：

<!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>国漫之光</title><!-- style标签里面写的是CSS代码 --><style>p {/* 设置字体大小 */font-size: 50px;/* 设置字体颜色 */color: green;}</style>
</head>
<body><!-- <div style="color: red;font-size: 20px;">welcome to the world</div> --><p>welcome to the world</p>
</body>
</html>

1.2.2、行内样式表

概念：

行内样式表是通过 style 属性，来直接指定某个标签的样式。

<body><p style="color: red; font-size: larger;">welcome to the world </p>
</body>

细节说明：

行内样式表的优先级更高。

1.2.3、外部样式

使用说明：

创建一个 css 文件，在 css 文件中，编辑样式。
在 html 文件中，使用 link 标签，并通过路径引入 css 文件。

举个栗子：

解释说明：

stylesheet 值：说明浏览器链接的资源是一个 CSS 样式表,用于为文档提供样式。通过这种方式,你可以将 CSS 样式与 HTML 文档分离,使代码更易于维护和管理。
href="demo1.css" ：是指定外部样式表的 URL 地址,它告诉浏览器从何处加载 CSS 文件。
CSS 文件名为 "demo1.css"：通常与 HTML 文件位于同一目录中。

二、CSS 基础选择器

2.1、基础选择器

类型如下：

元素选择器
类选择器
id 选择器
通配符选择器

2.1.1、元素选择器

语法 :

标签名{}

作用 : 选中对应标签中的内容

能快速将同一类型的标签都选择出来
但是不能差异化

举个栗子：

<head><style>/* 标签选择器 */div {color: red;font-size: 30px;}</style>
</head>
<body><div>hello</div><div>world</div><div>nihao</div>
</body>

2.1.2、类选择器

语法：class属性值{}

类名用 . 开头
通过类属性来指定元素样式，一个标签可以有多个类名
可以让多个标签都使用一个类

作用 :

选中对应class属性值的元素。

举个栗子：

<head><style>/* 类选择器 */.one {color: green;}.two {font-size: 70px;}</style>
</head>
<body><!-- 一个类选择器可以被多个标签来引用，一个标签也可以引用多个类选择器 --><div class="one">hello</div><div>world</div><div class="one two">nihao</div>
</body>

2.1.3、id选择器

语法：#id属性值{}

以 #开头表示 id选择器。
id 值是唯一的，只能有一个，就像身份证号一样。

作用：

选中对应id属性值的元素

举个栗子：

<head><style>/* id选择器 */#world {color:rgb(225, 0, 255);font-size: 70px;}</style>
</head>
<body><div>hello</div><div id="world">world</div><div>nihao</div>
</body>

注意：

id的属性值只能给1个,可以重复利用,不能以数字开头。

2.1.4、通配符选择器

语法：

*{}

作用：

让页面中所有的标签执行该样式,通常用来清除间距。

举个栗子：

    <style>/* 通配符选择器 */* {color: red;}</style>

基础选择器总结：

2.2、复合选择器

2.2.1、后代选择器

框架如下：

元素1 元素2 {设置样式	}

注意：

只对元素2 进行设置样式，不影响元素1
元素1 是父级，元素2 可以是子级，或孙子级，或重孙子级…
元素1 和元素2 可以是标签选择器、类选择器、id 选择器…

举个栗子：

2.2.2、子选择器

框架如下：

元素1>元素2 { 样式声明 }

使用大于号分割
只选儿子 , 不选孙子元素

举个栗子：

<head><style>/* 子选择器  对孙子不生效*/ol>a {color: green;}</style>
</head>
<body><ol><li><a href="#">张三</a></li><li>李四</li><li>王五</li></ol>
</body>

2.2.3、并集选择器

框架如下：

元素1, 元素2 { 样式声明 }

举个栗子：

<head><style>/* 并集选择器 */ol li,ul li {color:red}</style>
</head>
<body><ul><li>张三</li></ul><ol><li><a href="#">张三</a></li><li>李四</li></ol>
</body>

2.2.4、伪类选择器

举个栗子：

<head><style>/* 伪类选择器 - 鼠标悬停的效果 */div:hover {color: green;}/* 伪类选择器 - 鼠标按下的效果 */div:active {color:blue}</style>
</head>
<body><div>hello world</div>
</body>

2.3.5、复合选择器总结

2.3.6、选择器优先级

三、常见元素属性

3.1、字体属性

举例说明：

<head><style>div {/* 字体大小 */font-size: 100px;/* 字体颜色 */color: red;/* 字体粗细 */font-weight: lighter; font-weight: normal;font-weight: bold;font-weight: bolder;/* 字体属性 */font-family: 宋体;}</style>
</head>
<body><div>hello world</div>
</body>

字体样式：

    <style>/* 取消倾斜 */div {font-style: normal;}/* 设置倾斜 */div {font-style: italic;}</style>

3.2、文本属性

3.2.1、设置文本颜色

举例说明：

<head><style>div {color: red;color: #00ff00;color: rgb(0, 0, 255);}</style>
</head>
<body><div>hello world</div>
</body>

color 属性值的三种写法：

预定义的颜色值 (单词)
[ 最常用 ] 十六进制形式
RGB 方式

认识 RGB：

我们使用 R (red), G (green), B (blue) 的方式表示颜色 ( 色光三原色 ). 三种颜色按照不同的比例搭配 , 就能混合出各种五彩斑斓的效果.
计算机中针对 R, G, B 三个分量 , 分别使用一个字节表示 (8 个比特位 , 表示的范围是 0-255, 十六进制表示为 00-FF).
数值越大 , 表示该分量的颜色就越浓 . 255, 255, 255 就表示白色 ; 0, 0, 0 就表示黑色

3.2.2、文本水平对齐

属性说明：

text-align属性主要用于设置文本的水平对齐方式。
这个属性只对行内元素和文本内容生效。对于块级元素，它不会改变其对齐方式，但是会影响其内部的文本内容和行内元素的对齐方式。
如果想让块级元素居中显示，常见的做法是使用margin: 0 auto;（前提是已设定了该块级元素的宽度）

举个栗子：

    <style>div {/* 居中对齐、左对齐、右对齐 */text-align: center;text-align: left;text-align: right;}</style>

3.2.3、文本修饰

text-decoration 属性：

允许对文本设置某种效果，如加下划线。

四个取值的效果：

underline 下划线 . [ 常用 ]
none 啥都没有 . 可以给 a 标签去掉下划线
overline 上划线 . [ 不常用 ]
line-through 删除线 [ 不常用 ]

3.2.4、文本缩进

使用框架：

text-indent: [值];

单位可以使用 px 或者 em，一个文字大小就是 1em。

举个栗子：

    <style>div {/* 首行缩进两个字 */text-indent: 2em;}</style>

3.2.5、行高

使用框架：

line-height: [值];

举个栗子：

    <style>div {line-height: 50px;/* 行高也可以取 normal 等值.这个取决于浏览器的实现. chrome 上 normal 为 21 px */line-height: normal;}</style>

3.3、列表样式

CSS 列表属性用于定义 HTML 常见列表的样式：

3.4、表格样式

CSS表格属性用于定义HTML表格的样式：

四、背景属性

背景属性：

举个栗子：

    <style>div {/* 背景颜色 可设置的值和文本颜色差不多*/background-color: grey;/* 背景图片 */background-image: url(image/female.png);/* 背景平铺 */background-repeat: no-repeat;/* 背景位置 水平居中，顶部对齐 */background-position: center top;/* 背景尺寸 */background-size: contain;}</style>

背景颜色 (background-color)：

设置的值和文本颜色差不多，默认情况下是 transparent（透明）的

背景图片（background-image）：

比 image 更方便控制位置，url 里可以放相对路径、绝对路径，网络路径

背景平铺（background-repeat）：

重要的四个取值，repeat（平铺），no-repeat（不平铺），repeat-x（水平平铺），repeat-y（垂直平铺）。默认情况下是 repeat。

背景位置（background-position）：

背景尺寸（ background-size）：

可以填具体数值，例如：50px，还可以是使用 cover（把背景图像扩展至足够大，以使背景图像完全覆盖背景区域）和 contain（把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域. ）

背景图固定：

五、边框圆角矩形

概念：

使用说明：

通过 border-radius 使边框带圆角效果. 
基本用法：border-radius: length;

举个栗子：

<style>div {width: 200px;height: 200px;background-color: grey;border: 2px solid green;/* 圆角矩形 */border-radius: 10px;/* 将 border-radius 的值设为正方形边长的一半就可以变为圆形 */}
</style>

六、元素的显示模式

常见的块级元素：

<div>：用于将内容分组或创建一个块状区域，通常用于布局和样式控制。
<p>：表示段落，用于展示文本段落。
<h1> 到 <h6>：表示标题，级别从最高到最低。
<ul>：表示无序列表，用于显示项目列表，每个项目前没有特定的顺序。
<ol>：表示有序列表，用于显示项目列表，每个项目前有序号。
<li>：表示列表项，在无序列表或有序列表中使用。
<table>：表示表格，用于展示有结构的数据。
<blockquote>：表示长引用，用于引用长篇文本。
<address>：表示联系信息，通常用于在文章底部提供联系方式。
<form>：表示表单，用于收集用户输入。
<hr>：表示水平分割线，用于在内容间添加分隔线。

特点：

独占一行
高度, 宽度, 内外边距, 行高都可以控制
宽度默认是父级元素宽度的 100% ( 和父元素一样宽 )
是一个容器 ( 盒子 ), 里面可以放行内和块级元素 .

注意：

文字类的元素内不能使用块级元素
p 标签主要用于存放文字 , 内部不能放块级元素 , 尤其是 div

常见的行内元素包括：

<span>：用于为文本或其他内联内容添加样式或标记。
<a>：创建超链接，使用户能够点击导航到其他页面或资源。
<strong>：表示文本的重要性，通常以加粗的形式显示。
<em>：表示文本的强调，通常以斜体的形式显示。
<abbr>：表示缩写或首字母缩略词。
<code>：用于显示计算机代码。
<cite>：表示引用的作品的标题。
<time>：表示日期和时间。

特点：

一行显示多个
宽度和高度默认由内容撑开
不可以设置宽度和高度

常见的行内块元素包括：

<span>：用于为文本或其他内联内容添加样式或标记。
<a>：创建超链接，使用户能够点击导航到其他页面或资源。
<strong>：表示文本的重要性，通常以加粗的形式显示。
<em>：表示文本的强调，通常以斜体的形式显示。
<abbr>：表示缩写或首字母缩略词。
<code>：用于显示计算机代码。
<cite>：表示引用的作品的标题。
<time>：表示日期和时间。

特点：

一行显示多个
可以设置宽度和高度

行内元素和块级元素区别：

块级元素独占一行 , 行内元素不独占一行
块级元素，高度、宽度、内外边距、行高，都是可以控制的，
行内元素，设置高度、宽度、行高，都是无效的，设置内边距有效，设置外边距，左右外边距有效，上下外边距无效。

改变显示模式(块级元素转换)：

display: block 改成块级元素 [常用]
display: inline-block 改成行内块元素 [常用]
display: inline 改成行内元素 [很少用]

七、CSS盒子模型

7.1、边框(border)

使用说明：

边框粗细 : border-width
边框样式: border-style, 默认没边框 . solid 实线边框 dashed 虚线边框 dotted 点线边框
边框颜色: border-color

举个栗子：

div {width: 500px;height: 250px;border-width: 10px;border-style: solid;border-color: green; 
}div {/* 支持简写 */border: 1px solid red;
}

7.2、设置边框不撑大盒子

可以通过设置 box-sizing: border-box，使边框不再撑大盒子，默认情况是 content-box.

7.3、内边距 (padding)

概念：

内边距会撑大盒子,可以通过设置 box-sizing: border-box，使边框不再撑大盒子

举例说明：

7.4、外边距 (margin)

使用说明：

控制盒子和盒子之间的距离 . 外边距和内边距类似，也是可以四个方向分别设置；也是可以写作，1个数字，2个数字，4个数字...规则和 padding 完全一致,外边距不会撑大盒子.

举个栗子：

div {height: 50px;width: 50px;margin-top: 5px;margin-left: 10px; /* 先设置上下，，再设置左右 */margin: 20px,40px;/* 顺时针设置，上、右、下、左 */margin: 20px,40px,20px,40px;
}

外边距要注意的细节：

7.5、块级元素水平居中

说明：

前提要指定宽度才能生效 ( 如果不指定宽度 , 默认和父元素一致 )
当我们说“让块级元素居中显示”并使用margin: 0 auto;时，我们实际上是在让整个块级元素在其父容器中水平居中。这并不会影响块级元素内部的内容如何对齐。

框架：

// 三种写法等价
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

注意：

这个水平居中的方式和 text-align 不一样.
margin: 0 auto;（需要明确的宽度）会使整个块级元素在其父容器中水平居中。
text-align: center;会使块级元素内部的行内元素和文本内容水平居中对齐。
对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式

7.6、清除默认样式

7.7、盒子模型-元素溢出

八、结束语

今天内容就到这里啦，时间过得很快，大家沉下心来好好学习，会有一定的收获的，大家多多坚持，嘻嘻，成功路上注定孤独，因为坚持的人不多。那请大家举起自己的小手给博主一键三连，有你们的支持是我最大的动力💞💞💞，回见。

【前端】CSS 基础

> 作者：დ旧言~ > 座右铭：松树千年终是朽，槿花一日自为荣。 > 目标：了解 CSS 基础语法。 > 毒鸡汤：有些事情，总是不明白，所以我不会坚持。早安! > 专栏选自：前端基础…...

编程日记 2025/10/11 14:32:47

【金仓数据库征文】——选择金仓，选择胜利

目录第一部分：金仓数据库——开创数据库技术的新时代 1.1 金仓数据库的技术底蕴 1.2 高可用架构与灾备能力 1.3 分布式架构与弹性扩展能力第二部分：金仓数据库助力行业数字化转型 2.1 电信行业：核心系统国产化替代 2.2 医疗行业&…...

编程日记 2025/9/19 18:14:54

跟着尚硅谷学vue-day5

计算属性和watch监视一.姓名案例 1.姓名案例-插值语法 <div id"root">姓：<input type"text" value"张" v-model"firstname"><br/><br/>名：<input type"text" value&q…...

编程日记 2025/10/8 21:13:48

【C到Java的深度跃迁：从指针到对象，从过程到生态】第四模块·Java特性专精 —— 第十三章异常处理：超越C错误码的文明时代

一、错误处理的范式革命 1.1 C错误处理的黑暗时代 C语言通过返回值传递错误状态，存在系统性缺陷： 典型错误处理模式： FILE* open_file(const char* path) { FILE* f fopen(path, "r"); if (!f) { return NULL; // 错误信息…...

编程日记 2025/6/9 1:15:35

运维打铁：Centos 7 使用yum安装 mysql5.7

文章目录一、安装前信息说明二、安装步骤1. 下载并安装官网 RPM 安装包2. 修改配置文件 /etc/my.cnf3. 创建 MySQL 数据相关目录并授权4. 启动 MySQL 服务三、修改数据库访问密码1. 修改配置文件 /etc/my.cnf2. 重启 MySQL 服务3. 登录数据库并修改密码4. 恢复配置文件并重启…...

编程日记 2025/9/18 19:46:54

网络原理初始

基础概念组建局域网方式：路由器或者交换机。 IP确定主机，端口号确定使用的应用程序。端口号：每个程序在进行网络通信中，都需要一个端口号。协议：通信过程中的约定。 TCP/IP五层网络协议从上到下 1、应用层&a…...

编程日记 2025/10/3 13:12:54

基于SpringBoot3实现MyBatis-Plus(SSMP)整合快速入门CURD(增删改查)

目录一、快速搭建SpringBoot-Web工程脚手架。 1.1 Spring Initializr 初始化工程。(官方提供) 1.2 工程脚手架初始化详细步骤。(IDEA2024.1.1) 二、MyBatis-Plus的特性与快速上手。 2.1 官网地址与基本特性。 2.2 快速上手技术栈基础。 2.3 Spring Boot2 的 MyBatis-Plus Star…...

编程日记 2025/10/16 15:26:50

主题模型三大基石：Unigram、LSA、PLSA详解与对比

🌟 主题模型演进图谱文本建模三阶段： 词袋模型 → 潜在语义 → 概率生成 Unigram → LSA → PLSA → LDA 📦 基础模型：Unigram模型核心假设文档中每个词独立生成（词袋假设） 忽略词语顺序和语义关联 …...

编程日记 2025/9/18 18:52:00

Redis 热 key 和大 key 问题

一、什么是 Redis 热 key？ 热 key（Hot Key）定义： 在单位时间内被**频繁访问（读/写）**的 key，导致其访问集中、压力过大。热 key 常见表现： QPS 极高（某 key 每秒被访问…...

编程日记 2025/7/5 4:32:59

基准指数选股策略思路

一种基于Python和聚宽平台的量化交易策略，主要包含以下内容： 1. 导入必要的库 - 导入jqdata和jqfactor库用于数据获取和因子计算。 - 导入numpy和pandas库用于数据处理。 2. 初始化函数 - 设置基准指数为沪深300指数。 - 配置交易参数，如使用…...

编程日记 2025/10/5 5:28:16

SAP接口超时：对 FOR ALL ENTRIES IN 的优化

SAP接口超时经分析要10多分钟以上才出结果，且是这个语句耗时较长： SELECTaufnrmatnrbdmnglgortmeinschargFROM resbINTO CORRESPONDING FIELDS OF TABLE lt_lylcddxhFOR ALL ENTRIES IN lt_lylcddWHERE aufnr IN r_aufnr发现RESB有420万条记录&#xf…...

编程日记 2025/10/7 2:43:23

如何成功防护T级超大流量的DDoS攻击

防护T级超大流量的DDoS攻击需要综合技术、架构与运营策略的多层次防御体系。以下是基于最新技术实践和行业案例总结的关键防护策略： 一、流量清洗与分布式处理部署流量清洗中心 T级攻击的核心防御依赖于专业的流量清洗技术。通过部署分布式流量清洗集群&#xff0c…...

编程日记 2025/10/9 8:25:44

【Easylive】为什么需要手动转换 feign.Response 到 HttpServletResponse

【Easylive】项目常见问题解答（自用&持续更新中…） 汇总版为什么需要手动转换 feign.Response 到 HttpServletResponse？ feign.Response 是 Feign 客户端调用远程服务后返回的原始 HTTP 响应对象，而 HttpServletResponse 是…...

编程日记 2025/6/3 13:32:48

深入理解机器学习：人工智能的核心驱动力

在当今数字化时代，机器学习作为人工智能领域的关键技术，正以前所未有的速度改变着我们的生活和工作方式。从智能语音助手到精准的医疗诊断，从个性化的推荐系统到自动驾驶汽车，机器学习的应用无处不在，其影响力深远而广…...

编程日记 2025/7/13 16:43:07

Shell 脚本入门：从零开始写自动化脚本

目录一、Shell 、Shell 命令、Shell 脚本二、常用 Shell 命令与注释写法三、echo 命令的使用四、Shell 变量类型五、变量与参数使用六、读取用户输入七、算术运算八、条件判断与流程控制九、循环结构十、函数定义与调用一、Shell 、Shell 命令、Shell 脚本…...

编程日记 2025/9/19 22:53:04

Vibracostic EDI 需求分析

Vibracostic 是德国Freudenberg集团旗下全球领先的减振与噪音控制技术公司，专注于为汽车及工业领域提供高效振动管理和隔音解决方案，客户涵盖宝马、奔驰、特斯拉等主流车企。 Vibracostic EDI 需求分析供应商接收Vibracostic发来的DELFOR交付预测报文…...

编程日记 2025/6/6 2:19:59

【网络安全】社会工程学策略

1. 社会工程学简介社会工程攻击是威胁行为者常用的攻击方式。这是因为，诱骗人们提供访问权限、信息或金钱通常比利用软件或网络漏洞更容易。您可能还记得，社会工程学是一种利用人为错误来获取私人信息、访问权限或贵重物品的操纵技术。它是一个涵盖性…...

编程日记 2025/5/15 1:56:10

项目笔记2：post请求是什么，还有什么请求

在 HTTP（超文本传输协议）中，请求方法用于向服务器表明客户端想要执行的操作。POST 请求是其中一种常见的请求方法，此外还有 GET、PUT、DELETE 等多种请求方法，下面为你详细介绍： POST 请求定义&#xff…...

编程日记 2025/7/16 6:00:52

【最新版】西陆健身系统源码全开源+uniapp前端

一.系统介绍一款基于UniappThinkPHP开发健身系统，支持多城市、多门店，包含用户端、教练端、门店端、平台端四个身份。有团课、私教、训练营三种课程类型，支持在线排课。私教可以通过上课获得收益，在线申请提现功能，无…...

编程日记 2025/10/6 23:39:49

常见移动机器人底盘模型对比（附图）

1. 概述底盘模型驱动场景优势劣势双轮差速两轮驱动室内AGV结构简单、成本低转弯半径大，易打滑四轮差速四轮独立驱动复杂地形无人车全方位转向，机动性强控制复杂，能耗高阿克曼模型前轮转向后驱户外无人驾驶车高速稳定性好转弯半径大&#xf…...

编程日记 2025/10/9 10:18:46

如何在 MinGW 和 Visual Studio (MSVC) 之间共享 DLL

如何在 MinGW 和 Visual Studio (MSVC) 之间共享 DLL ✅ .dll.a 和 .lib 是什么？ 1. .dll.a（MinGW 下的 import library） 作用：链接时告诉编译器如何调用 DLL 中的函数。谁用它：MinGW 编译器（如 g&#x…...

编程日记 2025/7/31 1:57:36

【MongoDB】windows安装、配置、启动

🪟 一、下载 MongoDB 安装包打开官方地址： 👉 https://www.mongodb.com/try/download/community 配置下载选项： 选项设置Version最新（默认就好）OSWindowsPackageMSI（推荐） 点击【D…...

编程日记 2025/9/18 7:21:31

java实现 PDF中的图片文字内容识别

通过Tesseract进行OCR识别前提:安装好Tesseract并下载好简体中文语言包,本文在Windows上验证过,需要安装包可以关注公号 easy4java获取 1.配置maven依赖 <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdf…...

编程日记 2025/7/30 13:42:27

GitLab_密钥生成（SSH-key）

目录 1.密钥命令 2.自定义路径 3.输2次密码 4.查看公钥：（打开文件） 5. 把公钥，放到GitLab上面 6.填写公钥标题 7.点击 Add key 按钮 8. 验证添加是否成功 9. 测试 SSH 连接 10.彩蛋（把ssh-key添加到python文…...

编程日记 2025/10/5 10:01:45

【视频时刻检索】Text-Video Retrieval via Multi-Modal Hypergraph Networks 论文阅读

Text-Video Retrieval via Multi-Modal Hypergraph Networks 论文阅读 ABSTRACT1 INTRODUCTION2 PRELIMINARIES3 OUR FRAMEWORK3.1 Multi-Modal Hypergraph Networks3.2 Variational Inference 4 EXPERIMENT6 CONCLUSION 文章信息： 发表于：WSDM 24 原文…...

编程日记 2025/10/8 5:19:50

BUUCTF-[GWCTF 2019]re3

[GWCTF 2019]re3 查壳，64位无壳然后进去发现主函数也比较简单，主要是一个长度校验，然后有一个mprotect函数，说明应该又是Smc，然后我们用脚本还原sub_402219函数处的代码 import idc addr0x00402219 size224 for …...

编程日记 2025/9/24 12:51:56

C++入侵检测与网络攻防之暴力破解

目录 1.nessus扫描任务 2.漏洞信息共享平台 3.nessus扫描结果 4.漏扫报告的查看 5.暴力破解以及hydra的使用 6.crunch命令生成字典 7.其他方式获取字典 8.复习 9.关于暴力破解的防御的讨论 10.pam配置的讲解 11.pam弱密码保护 12.pam锁定账户 13.shadow文件的解析 …...

编程日记 2025/10/2 15:28:11

管理100个小程序-很难吗

20公里的徒步-真难群里的伙伴发起了一场天目山20公里徒步的活动，想着14公里都轻松拿捏了，思考了30秒后，就借着春风带着老婆孩子就出发了。一开始溪流清澈见底，小桥流水没有人家；青山郁郁葱葱，枯藤老树没有…...

编程日记 2025/10/4 13:58:21

如何在Linux用libevent写一个聊天服务器

废话少说，先看看思路因为libevent的回调机制，我们可以借助这个机制来创建bufferevent来实现用户和用户进行通信如果成功连接后我们可以直接在listener回调函数里创建一个bufferevent缓冲区，并为每个缓冲区设置相应的读回调和事件回调&…...

编程日记 2025/10/3 9:13:43

系统设计(1)—前端—CDN—Nginx—服务集群

简介： 本指南旨涵盖前端、CDN、Nginx 负载均衡、服务集群、Redis 缓存、消息队列、数据库设计、熔断限流降级以及系统优化等模块的核心要点。我们将介绍各模块常见的设计方案与优化策略，并结合电商秒杀、SaaS CRM 系统、支付系统等高并发场景讨论实践技巧…...

编程日记 2025/10/2 17:44:17

一、CSS是什么

1.1、语法规则

1.2、引入方式

1.2.1、内部样式表

1.2.2、行内样式表

1.2.3、外部样式

二、CSS 基础选择器

2.1、基础选择器

2.1.1、元素选择器

2.1.2、类选择器

2.1.3、id选择器

2.1.4、通配符选择器

2.2、复合选择器

2.2.1、后代选择器

2.2.2、子选择器

2.2.3、并集选择器

2.2.4、伪类选择器

2.3.5、复合选择器总结

2.3.6、选择器优先级

三、常见元素属性

3.1、字体属性

3.2、文本属性

3.2.1、设置文本颜色

3.2.2、文本水平对齐

3.2.3、文本修饰

3.2.4、文本缩进

3.2.5、行高

3.3、列表样式

3.4、表格样式

四、背景属性

五、边框圆角矩形

六、元素的显示模式

七、CSS盒子模型

7.1、边框(border)

7.2、设置边框不撑大盒子

7.3、内边距 (padding)

7.4、外边距 (margin)

7.5、块级元素水平居中

7.6、清除默认样式

7.7、盒子模型-元素溢出

八、结束语

相关文章：