CSS 入门全解析
CSS 入门全解析:从选择器到布局的全面教学
- 一、CSS 是什么?
- 二、CSS 的基本语法结构
- 三、常见选择器讲解
- 四、盒模型讲解(重点)
- 五、字体与颜色样式
- 六、布局方式
- 6.1 浮动布局(了解)
- 6.2 Flex 弹性布局(推荐)
- 6.3 Grid 网格布局(进阶)
- 七、过渡与动画
- 7.1 过渡 transition
- 7.2 动画 animation
- 八、实战示例:卡片组件样式
- 九、常见问题 Q&A
- Q: 为什么设置宽度了还不生效?
- Q: `px` 和 `rem` 有啥区别?
- Q: CSS 怎么引入?
一、CSS 是什么?
CSS(Cascading Style Sheets,层叠样式表)用于控制网页的样式与布局。如果说 HTML 构建网页的“骨架”,那 CSS 就是给这具骨架“穿衣服”。
它能定义:
- 字体颜色 / 背景颜色
- 宽高 / 边距 / 内边距
- 布局方式(flex/grid)
- 动画 / 过渡 等动态效果
二、CSS 的基本语法结构
选择器 {属性名: 属性值;
}
✅ 例如:
p {color: red;font-size: 16px;
}
含义是:把所有 <p>
段落标签的字体颜色设置为红色,字体大小为 16px。
三、常见选择器讲解
选择器 | 含义 | 示例 |
---|---|---|
元素选择器 | 选择某个标签 | div |
类选择器 | 选择 class | .box |
id选择器 | 选择 id | #header |
组合选择器 | 多个元素 | div, p |
后代选择器 | 某元素内的子级 | .menu li |
属性选择器 | 根据属性值选择 | input[type="text"] |
✅ 示例:
/* 所有 class 为 box 的元素 */
.box {border: 1px solid #333;}
四、盒模型讲解(重点)
CSS 中的每个元素都像一个盒子,由以下部分构成:
content
:内容区域padding
:内边距border
:边框margin
:外边距
📦 可视图示结构:
区域 | 说明 |
---|---|
margin | 元素与外部之间的距离 |
border | 元素的边框 |
padding | 内容与边框之间的内边距 |
content | 元素的实际内容区域 |
✅ 示例:
.box {width: 200px;padding: 10px;border: 1px solid #ccc;margin: 20px;
}
五、字体与颜色样式
h1 {font-size: 24px;font-weight: bold;color: #3498db;font-family: "Arial", sans-serif;
}
常用单位:
px
:像素(绝对单位)em
/rem
:相对单位%
:相对于父元素的百分比
六、布局方式
6.1 浮动布局(了解)
.left {float: left;
}
.right {float: right;
}
.clearfix::after {content: "";display: block;clear: both;
}
6.2 Flex 弹性布局(推荐)
.container {display: flex;justify-content: space-between;align-items: center;
}
常用属性说明:
justify-content
: 主轴对齐(如 space-between)align-items
: 交叉轴对齐flex-direction
: 主轴方向(row/column)
6.3 Grid 网格布局(进阶)
.grid {display: grid;grid-template-columns: 1fr 2fr;gap: 10px;
}
七、过渡与动画
7.1 过渡 transition
.button {background-color: blue;transition: background-color 0.3s ease;
}
.button:hover {background-color: red;
}
7.2 动画 animation
@keyframes fade-in {from { opacity: 0; }to { opacity: 1; }
}.box {animation: fade-in 1s ease-in-out;
}
八、实战示例:卡片组件样式
<div class="card"><h2>标题</h2><p>这里是内容区域</p>
</div>
.card {padding: 20px;border-radius: 8px;box-shadow: 0 4px 12px rgba(0,0,0,0.1);transition: transform 0.2s;
}
.card:hover {transform: scale(1.05);
}
九、常见问题 Q&A
Q: 为什么设置宽度了还不生效?
A: 可能是 padding 或 border 撑大了盒子,需设置 box-sizing: border-box;
Q: px
和 rem
有啥区别?
A: rem
是相对根元素(html)的单位,更适合响应式布局。
Q: CSS 怎么引入?
A:
- 内联样式:
<div style="color:red">
- 内部样式:放在
<style>
标签中 - 外部样式:通过
<link rel="stylesheet" href="style.css">
引入
到这里,这篇文章就和大家说再见啦!我的主页里还藏着很多 篇 前端 实战干货,感兴趣的话可以点击头像看看,说不定能找到你需要的解决方案~
创作这篇内容花了很多的功夫。如果它帮你解决了问题,或者带来了启发,欢迎:
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒:
转载请注明原文链接,商业合作请私信联系
感谢你的阅读!我们下篇文章再见~ 💕
相关文章:
CSS 入门全解析
CSS 入门全解析:从选择器到布局的全面教学 一、CSS 是什么?二、CSS 的基本语法结构三、常见选择器讲解四、盒模型讲解(重点)五、字体与颜色样式六、布局方式6.1 浮动布局(了解)6.2 Flex 弹性布局࿰…...
用户案例--慧眼科技
作者:算力魔方创始人/英特尔创新大使刘力 每个行业都有其独特的需求,算力魔方推出了全面的定制化服务,从概念到产品化,满足各行各业,用户可以根据具体应用需求定制更多接口或更强图形处理的需求,且算力魔方…...
面试中被问到mybatis与jdbc有什么区别怎么办
1. 核心区别 维度JDBCMyBatis抽象层级底层API,直接操作数据库高层持久层框架,封装JDBC细节代码量需要手动编写大量样板代码(连接、异常处理等)通过配置和映射减少冗余代码SQL管理SQL嵌入Java代码,维护困难SQL与Java代…...
科技与商业动态简报
睿创咨询 聚焦与深耕IPD领域长达20年,联合多名企业经营实战专家和前高管,睿创咨询借力IPD,为企业全方面提高产品竞争力,让增长从偶然变为必然!...
Flutter Dart中的类 对象
Dart 基本特征 私有属性/私有方法 import test88.dart;main() {var home new MainHome();home.execRun(); //间接的调用私有方法 }class MainHome {String _name "张三";//私有属性int age 10;main() {_run();print(_name);}void _run() {print("私有方法&qu…...
4G卡的DTU固件TCP通讯
4G卡DTU固件的TCP通讯 概述TCP通讯测试软硬件准备上网步骤 总结 概述 银尔达的DTU固件的4G卡可以应用到很多领域。我用的是YED-M780-B. 主要特点: 1、5~12V供电 2、工作环境为-35℃-75℃; 3、 支持1路TTL 串口,兼容3.3V电平和5V电平&#x…...
Spring Boot 读取配置文件的几种方式
Spring Boot 提供了灵活多样的方式来读取配置文件(如 application.yml 或 application.properties),本文介绍几种常见的读取方式。 1. 配置文件位置与加载顺序 Spring Boot 默认从以下位置加载配置文件(优先级从高到低࿰…...
Winform(1.Winform控件学习)
使用的控件有:Button,Label,TextBox button:表示一个按钮,用户点击按钮触发事件 click事件最常用 label:标签,用于显示文本 Name属性:变量名称 textBox:输入框 Form1代码: using System; using System.Collections.Generic; using Sy…...
解读《数据资产质量评估实施规则》:企业数据资产认证落地的关键指南
随着“数据要素市场”建设加速,数据资产逐步成为企业核心资产之一。2024年4月,由中国质量认证中心(CQC)发布的《数据资产质量评估实施规则》(编号:CQC96-831160-2024)正式实施,为企业…...
Python Transformers 库介绍
Hugging Face 的 Transformers 库是一个用于自然语言处理(NLP)的强大 Python 库,它提供了对各种预训练模型的访问和使用接口。该库具有以下特点和功能: 主要特点 丰富的预训练模型:Transformers 库包含了大量的预训练模型,如 BERT、GPT - 2、RoBERTa、XLNet 等。这些模型…...
防火墙技术深度解析:从包过滤到云原生防火墙的部署与实战
防火墙技术深度解析:从包过滤到云原生防火墙的部署与实战 在网络安全防御体系中,防火墙是第一道物理屏障,承担着“网络流量守门人”的核心角色。从早期基于IP地址的包过滤设备到如今集成AI威胁检测的云原生防火墙,其技术演进始终…...
58、微服务保姆教程(一)
一、 微服务架构概述 1、微服务架构的核心概念 微服务架构是一种软件开发架构风格,它将一个应用程序划分为多个小型、独立的服务。每个服务负责一个特定的业务功能,并能够通过轻量级的通信方式(如HTTP RESTful API、消息队列等)相互通信。在设计上,每个服务都是独立的、…...
C 语言内存分配方法及优缺点
在 C 语言开发中,内存分配的方式主要有三种:静态内存分配、栈内存分配和堆内存分配。每种分配方式都有其独特的特点、适用场景以及优缺点。 静态内存分配 静态内存分配是在编译时就确定好内存的分配,它主要用于定义全局变量和静态局部变量。…...
通过模仿学习实现机器人灵巧操作:综述(下)
25年4月来自天津大学、山东大学、瑞士ETH、南方科技大学、通用 AI 国家重点实验室、爱丁堡大学和中科院自动化所的论文“Dexterous Manipulation through Imitation Learning: A Survey”。 灵巧操作是指机械手或多指末端执行器通过精确、协调的手指运动和自适应力调制&#x…...
uni-app 引入高德地图
一、准备工作:申请密钥与环境配置 1. 申请高德地图 API 密钥 注册并登录高德开放平台 创建「Web 端 (JS API)」类型应用,获取API 密钥(Key)✅ 注意:需在「安全设置」中添加域名(如https://*.yourd…...
开源项目实战学习之YOLO11:ultralytics-cfg-datasets-Objects365、open-images-v7.yaml文件(六)
👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路 medical - pills.yaml 通常用于配置与医学药丸检测任务相关的参数和信息 Objects365.yaml 用于配置与 Objects365 数据集相关信息的文件。Objects365 数据集包含 365 个不同的物体类别…...
Windows环境下常用网络命令使用
ipconfig命令使用: ipconfig可用于显示当前的TCP/IP配置的设置值,通常是用来检验人工配置的TCP/IP设置是否正确。在网络连接出现问题时,可以使用ipconfig /release和ipconfig /renew命令来刷新IP地址,这通常能解决因IP地址冲突或…...
RS232“变形记”,Profinet如何让电力通信设备“改头换面”
在现代电力系统中,随着自动化和智能化技术的不断发展,通信协议的转换成为实现设备互联互通的关键环节。VING微硬创新RS232转Profinet技术为电力设备的升级和优化提供了有效的解决方案,本文将详细介绍这一技术的背景、原理、应用及意义。 一、…...
WordPress AI 原创文章自动生成插件 24小时全自动生成SEO原创文章 | 多语言支持 | 智能配图与排版
为什么选择Linkreate AI内容生成插件? ✓ 全自动化工作流程 - 从关键词挖掘到文章发布一站式完成 ✓ 多语言支持 - 轻松覆盖全球市场(中/英等多语种) ✓ 智能SEO优化 - 自动生成搜索引擎友好的内容结构 ✓ AI智能配图 - 每篇文章自动匹配高质…...
弹性布局--Flexbox
CSS3 的弹性盒子布局(Flexbox)是一种强大的布局模型,用于更轻松地创建复杂的布局,尤其适合响应式设计。以下是其详细介绍: 基本概念 Flex 容器(Flex Container): 通过将display属性…...
更新GNS3
更新GNS3 有时,我们需要更新GNS3(Graphical Network Simulator-3,图形化网络模拟器3)——一款用于模拟网络的学习软件,类似于Cisco Packet Tracer。然而,GNS3主要由两部分组成——GNS3客户端和GNS3虚拟机&…...
c#接口_抽象类_多态学习
c#接口_抽象类_多态学习 学习日志 关于:c#接口_抽象类_多态的学习记录。 一、概念 1. 多态(Polymorphism) 定义:同一操作作用于不同对象时,表现出不同的行为。实现方式: 继承 方法重写(ov…...
BGE-M3模型深度技术分析
以下是针对 BGE-M3 模型的深度技术分析,综合其架构设计、核心能力、性能表现及实际应用场景: 一、模型概览 BGE-M3(Beijing General Embedding M3)是北京智源研究院(BAAI)推出的多语言通用向量模型&#x…...
光谱相机如何提升目标检测与识别精度
光谱相机(多光谱/高光谱)通过捕捉目标在多个波段的光谱特征,能够揭示传统RGB相机无法感知的材质、化学成分及物理特性差异。以下是提升其目标检测与识别精度的核心方法: 1. 硬件优化:提升数据质量 (1) 光谱分辨…...
漏洞管理体系:从扫描评估到修复验证的全生命周期实践
漏洞管理体系:从扫描评估到修复验证的全生命周期实践 在网络安全防御体系中,漏洞管理是“攻防博弈”的核心战场。据NVD(国家漏洞数据库)统计,2023年新增漏洞超21万个,平均每天披露575个,其中32…...
资深程序员进阶设备分享,专业编程显示器RD280U
前言 在软件开发行业多年,长时间在电脑前工作常让我眼花、眼困、脊椎不舒服。曾尝试很多方法、买过不少产品,像显示器护眼挂灯、机械臂等,效果不佳还麻烦。直到我用上明基 RD280U 专业编程显示器,它上下可调高度,适配…...
云+AI双轮驱动,亚马逊云科技加速中国企业出海新浪潮
导读:全球化就是本地化 作者 | 小葳 图片来源 | 摄图 近年来,中国企业出海步伐不断加快,“不出海,就出局”成为很多企业的共识。 据沙利文统计,2024年上半年,超过2000家中国上市企业布局海外市场ÿ…...
不同ECU(MCU/ZCU/CCU)其部署(实现)的功能存在差异
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 周末洗了一个澡,换了一身衣服,出了门却不知道去哪儿,不知道去找谁&am…...
施工安全巡检二维码制作
进入新时代以来,人们对安全的重视程度越来越高。特别在建筑施工行业,安全不仅是关乎着工人的性命,更是承载着工人背后家庭的幸福生活。此时就诞生了安全巡检的工作,而巡检过程中内容庞杂,安全生产检查、隐患排查、施工…...
Linux 权限修改详解:chmod 命令与权限数字的秘密
在 Linux 系统的使用过程中,权限控制就像是一把神奇的钥匙,它决定了谁能在系统中对文件和文件夹进行何种操作。今天我们来深入了解一下如何使用 chmod 命令来修改文件和文件夹的权限,让你在系统管理时更加得心应手。 一、chmod 命令…...
git 的基本使用
文章目录 一、创建仓库并初始化1、操作步骤2、注意事项 二、工作区与版本库1、Git 管理文件类型2、Git 保存文件方式3、工作区与版本库概念及操作 三、命令小结四、版本回退与前进1、相关概念2、版本回退3、版本前进4、总结 五、撤销修改1、场景 12、场景 23、场景 34、注意事项…...
Android 编译问题 prebuilts/clang/host/linux-x86
Android 编译问题 prebuilts/clang/host/linux-x86工具被破环了,用打包的方式替换调工具,不能拷贝,会破坏工具的链接。 FAILED: out\_odm/soong/build.ninja cd "$(dirname "out\_odm/host/linux-x86/bin/soong\_build")&quo…...
SIEMENS PLC程序解读 -BLKMOV (指定长度数据批量传输)
1、程序代码 2、程序解读 这段西门子 PLC 程序(程序段 10)实现了基于条件的数据块移动功能,具体解释如下: 条件触点: %M0.1 Always<>(TRUE)(注释为 AT<>1):当 M0.1 的值…...
Git 核心命令学习总结
一、Git 基础概念 工作目录:本地实际操作的文件夹,包含项目文件。 暂存区:临时存放待提交的变更(通过 git add 添加)。 本地仓库:存储项目历史版本(通过 git commit 提交)。 二、…...
vscode 打开csv乱码
在 Visual Studio Code (VS Code) 中打开 CSV 文件出现乱码可能是由于以下几个原因导致的: 编码设置不正确:CSV 文件可能使用了不同的字符编码方式保存,而 VS Code 默认使用的字符编码可能与文件实际的编码方式不一致。你可以在 VS Code 的右…...
WebUI可视化:第3章:Gradio入门实战
学习目标 ✅ 掌握Gradio的安装与基础配置 ✅ 能创建包含多种交互组件的界面 ✅ 实现前后端数据交互逻辑 ✅ 独立开发简单AI应用界面 3.1 Gradio快速安装 3.1.1 通过pip安装 打开终端(Windows:CMD/PowerShell,Mac/Linux:Terminal),执行: bash # 基础安装 pip insta…...
Flink checkpoint问题排查指南
之前只因为checkpoint过大碰到过checkpoint失败的情况,没想到数据倾斜也会导致 我们知道 task 仅在接受到所有的 barrier 之后才会进行 snapshot,如果作业存在反压,或者有数据倾斜,则会导致全部的 channel 或者某些 channel 的 …...
mysql知识总结 索引篇
mysql知识总结 索引篇 1. 索引问题常见分类1. 什么是索引2. 索引的分类3. 从数据结构分类4. 通过二级索引查询商品数据的过程5. 为什么选择B树作为索引呢? 本文是阅读 小林coding 后的读书笔记 原文可以点击上面超链接到达 也可以直接百度搜索 小林coding 1. 索引…...
Flink 数据清洗与字段标准化最佳实践
—— 构建可配置、可扩展的实时标准化清洗链路 本文是「Flink Kafka 构建实时数仓实战」专栏的第 4 篇,将围绕字段标准化这一核心问题,从业务痛点、技术架构、配置设计到完整代码工程,系统讲透标准化实践。 📌 一、为什么实时字段…...
.NET写的开源工业物联网网关(IoTGateway)
Ver V0.0 250425 主要针对《物联网智能网关开发与设计》课程,根据官方的文档重新组织了一下,并演示了一下在Windows的VS2022下快速地搭建出了学习基于.NET8的Linux IoTGateway的开发,提供给学生作为学习的扩展和外延。 Index IoTGateway …...
蓝桥杯 5. 交换瓶子
交换瓶子 原题目链接 题目描述 有 N 个瓶子,编号为 1 ~ N,放在架子上。 例如有 5 个瓶子,当前排列为: 2 1 3 5 4每次可以拿起 2 个瓶子,交换它们的位置。 要求通过若干次交换,使得瓶子的编号从小到大…...
freeswitch配置视频对接
概述 freeswitch是一款简单好用的VOIP开源软交换平台。 随着4G/5G网络的完善,视频呼叫的需求慢慢变多,本文介绍使用fs对接视频线路的配置方案。 环境 CentOS 7.9 freeswitch 1.10.7 视频模块 目前主流视频编解码使用H264,需要编译安装…...
使用Tortoise-ORM和FastAPI构建评论系统
title: 使用Tortoise-ORM和FastAPI构建评论系统 date: 2025/04/25 21:37:36 updated: 2025/04/25 21:37:36 author: cmdragon excerpt: 在models.py中定义了Comment模型,包含id、content、created_at、updated_at字段,并与User和Article模型建立外键关系。schemas.py中定义了…...
【信息安全工程师备考笔记】第三章 密码学基本理论
笔记内容整理自 https://www.bilibili.com/video/BV1X8411175t (B站 崔老夫子老师),老师讲解的非常好,推荐大家看原视频。 第三章 密码学基本理论 3.1 密码学概况 密码编码学:明文 —— > 密文 密码分析学&#x…...
精益数据分析(22/126):解锁创业增长密码与长漏斗分析
精益数据分析(22/126):解锁创业增长密码与长漏斗分析 在创业与数据分析的探索旅程中,我们都在不断寻求新的知识和方法,以提升创业的成功率。我一直期望能和大家共同学习、共同进步,今天就让我们继续深入研…...
【深度强化学习 DRL 快速实践】近端策略优化 (PPO)
PPO(2017,OpenAI)核心改进点 Proximal Policy Optimization (PPO):一种基于信赖域优化的强化学习算法,旨在克服传统策略梯度方法在更新时不稳定的问题,采用简单易实现的目标函数来保证学习过程的稳定性 解决…...
14-DevOps-快速部署Kubernetes
在学习阶段,为了能快速部署Kubernetes,这里用一个快速安装工具:Kubeode,来完成Kubernetes的部署。 接下来部署一个单机,一主一从的Kubernetes。一主一从都部署在同一台服务器上。 在虚拟机新开一个服务器,…...
Java 安全:如何防止 DDoS 攻击?
一、DDoS 攻击简介 DDoS(分布式拒绝服务)攻击是一种常见的网络攻击手段,攻击者通过控制大量的僵尸主机向目标服务器发送海量请求,致使服务器资源耗尽,无法正常响应合法用户请求。在 Java 应用开发中,了解 …...
html+servlet项目中的echart图表
介绍 ECharts 是一款由百度开源的,基于 JavaScript 的可视化图表库,它提供了丰富的图表类型和强大的交互功能,能将数据以直观、美观的图表形式展示出来,广泛应用于数据可视化、商业智能、数据分析等领域。 官网: Ap…...
抖音小程序开发常见问题与代码解决方案
抖音小程序开发常见问题与代码解决方案 一、API调用与组件使用问题 1. 分享卡片样式不生效 问题:通过onShareAppMessage分享的小程序卡片样式显示旧版模板。 代码示例: javascript Page({ onShareAppMessage() { return …...