当前位置: 首页 > news >正文

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: pxrem 有啥区别?

A: rem 是相对根元素(html)的单位,更适合响应式布局。

Q: CSS 怎么引入?

A:

  • 内联样式:<div style="color:red">
  • 内部样式:放在 <style> 标签中
  • 外部样式:通过 <link rel="stylesheet" href="style.css"> 引入

到这里,这篇文章就和大家说再见啦!我的主页里还藏着很多 篇 前端 实战干货,感兴趣的话可以点击头像看看,说不定能找到你需要的解决方案~
创作这篇内容花了很多的功夫。如果它帮你解决了问题,或者带来了启发,欢迎:
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒:
转载请注明原文链接,商业合作请私信联系
感谢你的阅读!我们下篇文章再见~ 💕

在这里插入图片描述

相关文章:

CSS 入门全解析

CSS 入门全解析&#xff1a;从选择器到布局的全面教学 一、CSS 是什么&#xff1f;二、CSS 的基本语法结构三、常见选择器讲解四、盒模型讲解&#xff08;重点&#xff09;五、字体与颜色样式六、布局方式6.1 浮动布局&#xff08;了解&#xff09;6.2 Flex 弹性布局&#xff0…...

用户案例--慧眼科技

作者&#xff1a;算力魔方创始人/英特尔创新大使刘力 每个行业都有其独特的需求&#xff0c;算力魔方推出了全面的定制化服务&#xff0c;从概念到产品化&#xff0c;满足各行各业&#xff0c;用户可以根据具体应用需求定制更多接口或更强图形处理的需求&#xff0c;且算力魔方…...

面试中被问到mybatis与jdbc有什么区别怎么办

1. 核心区别 维度JDBCMyBatis抽象层级底层API&#xff0c;直接操作数据库高层持久层框架&#xff0c;封装JDBC细节代码量需要手动编写大量样板代码&#xff08;连接、异常处理等&#xff09;通过配置和映射减少冗余代码SQL管理SQL嵌入Java代码&#xff0c;维护困难SQL与Java代…...

科技与商业动态简报

睿创咨询 聚焦与深耕IPD领域长达20年&#xff0c;联合多名企业经营实战专家和前高管&#xff0c;睿创咨询借力IPD&#xff0c;为企业全方面提高产品竞争力&#xff0c;让增长从偶然变为必然&#xff01;...

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. 主要特点&#xff1a; 1、5~12V供电 2、工作环境为-35℃-75℃&#xff1b; 3、 支持1路TTL 串口&#xff0c;兼容3.3V电平和5V电平&#x…...

Spring Boot 读取配置文件的几种方式

Spring Boot 提供了灵活多样的方式来读取配置文件&#xff08;如 application.yml 或 application.properties&#xff09;&#xff0c;本文介绍几种常见的读取方式。 1. 配置文件位置与加载顺序 Spring Boot 默认从以下位置加载配置文件&#xff08;优先级从高到低&#xff0…...

Winform(1.Winform控件学习)

使用的控件有&#xff1a;Button,Label,TextBox button:表示一个按钮,用户点击按钮触发事件 click事件最常用 label:标签,用于显示文本 Name属性&#xff1a;变量名称 textBox:输入框 Form1代码&#xff1a; using System; using System.Collections.Generic; using Sy…...

解读《数据资产质量评估实施规则》:企业数据资产认证落地的关键指南

随着“数据要素市场”建设加速&#xff0c;数据资产逐步成为企业核心资产之一。2024年4月&#xff0c;由中国质量认证中心&#xff08;CQC&#xff09;发布的《数据资产质量评估实施规则》&#xff08;编号&#xff1a;CQC96-831160-2024&#xff09;正式实施&#xff0c;为企业…...

Python Transformers 库介绍

Hugging Face 的 Transformers 库是一个用于自然语言处理(NLP)的强大 Python 库,它提供了对各种预训练模型的访问和使用接口。该库具有以下特点和功能: 主要特点 丰富的预训练模型:Transformers 库包含了大量的预训练模型,如 BERT、GPT - 2、RoBERTa、XLNet 等。这些模型…...

防火墙技术深度解析:从包过滤到云原生防火墙的部署与实战

防火墙技术深度解析&#xff1a;从包过滤到云原生防火墙的部署与实战 在网络安全防御体系中&#xff0c;防火墙是第一道物理屏障&#xff0c;承担着“网络流量守门人”的核心角色。从早期基于IP地址的包过滤设备到如今集成AI威胁检测的云原生防火墙&#xff0c;其技术演进始终…...

58、微服务保姆教程(一)

一、 微服务架构概述 1、微服务架构的核心概念 微服务架构是一种软件开发架构风格,它将一个应用程序划分为多个小型、独立的服务。每个服务负责一个特定的业务功能,并能够通过轻量级的通信方式(如HTTP RESTful API、消息队列等)相互通信。在设计上,每个服务都是独立的、…...

C 语言内存分配方法及优缺点

在 C 语言开发中&#xff0c;内存分配的方式主要有三种&#xff1a;静态内存分配、栈内存分配和堆内存分配。每种分配方式都有其独特的特点、适用场景以及优缺点。 静态内存分配 静态内存分配是在编译时就确定好内存的分配&#xff0c;它主要用于定义全局变量和静态局部变量。…...

通过模仿学习实现机器人灵巧操作:综述(下)

25年4月来自天津大学、山东大学、瑞士ETH、南方科技大学、通用 AI 国家重点实验室、爱丁堡大学和中科院自动化所的论文“Dexterous Manipulation through Imitation Learning: A Survey”。 灵巧操作是指机械手或多指末端执行器通过精确、协调的手指运动和自适应力调制&#x…...

uni-app 引入高德地图

一、准备工作&#xff1a;申请密钥与环境配置​ 1. 申请高德地图 API 密钥​ 注册并登录高德开放平台​ 创建「Web 端 (JS API)」类型应用&#xff0c;获取API 密钥&#xff08;Key&#xff09;✅ 注意&#xff1a;需在「安全设置」中添加域名&#xff08;如https://*.yourd…...

开源项目实战学习之YOLO11:ultralytics-cfg-datasets-Objects365、open-images-v7.yaml文件(六)

&#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 medical - pills.yaml 通常用于配置与医学药丸检测任务相关的参数和信息 Objects365.yaml 用于配置与 Objects365 数据集相关信息的文件。Objects365 数据集包含 365 个不同的物体类别…...

Windows环境下常用网络命令使用

ipconfig命令使用&#xff1a; ipconfig可用于显示当前的TCP/IP配置的设置值&#xff0c;通常是用来检验人工配置的TCP/IP设置是否正确。在网络连接出现问题时&#xff0c;可以使用ipconfig /release和ipconfig /renew命令来刷新IP地址&#xff0c;这通常能解决因IP地址冲突或…...

RS232“变形记”,Profinet如何让电力通信设备“改头换面”

在现代电力系统中&#xff0c;随着自动化和智能化技术的不断发展&#xff0c;通信协议的转换成为实现设备互联互通的关键环节。VING微硬创新RS232转Profinet技术为电力设备的升级和优化提供了有效的解决方案&#xff0c;本文将详细介绍这一技术的背景、原理、应用及意义。 一、…...

WordPress AI 原创文章自动生成插件 24小时全自动生成SEO原创文章 | 多语言支持 | 智能配图与排版

为什么选择Linkreate AI内容生成插件&#xff1f; ✓ 全自动化工作流程 - 从关键词挖掘到文章发布一站式完成 ✓ 多语言支持 - 轻松覆盖全球市场&#xff08;中/英等多语种&#xff09; ✓ 智能SEO优化 - 自动生成搜索引擎友好的内容结构 ✓ AI智能配图 - 每篇文章自动匹配高质…...

弹性布局--Flexbox

CSS3 的弹性盒子布局&#xff08;Flexbox&#xff09;是一种强大的布局模型&#xff0c;用于更轻松地创建复杂的布局&#xff0c;尤其适合响应式设计。以下是其详细介绍&#xff1a; 基本概念 Flex 容器&#xff08;Flex Container&#xff09;&#xff1a; 通过将display属性…...

更新GNS3

更新GNS3 有时&#xff0c;我们需要更新GNS3&#xff08;Graphical Network Simulator-3&#xff0c;图形化网络模拟器3&#xff09;——一款用于模拟网络的学习软件&#xff0c;类似于Cisco Packet Tracer。然而&#xff0c;GNS3主要由两部分组成——GNS3客户端和GNS3虚拟机&…...

c#接口_抽象类_多态学习

c#接口_抽象类_多态学习 学习日志 关于&#xff1a;c#接口_抽象类_多态的学习记录。 一、概念 1. 多态&#xff08;Polymorphism&#xff09; 定义&#xff1a;同一操作作用于不同对象时&#xff0c;表现出不同的行为。实现方式&#xff1a; 继承 方法重写&#xff08;ov…...

BGE-M3模型深度技术分析

以下是针对 BGE-M3 模型的深度技术分析&#xff0c;综合其架构设计、核心能力、性能表现及实际应用场景&#xff1a; 一、模型概览 BGE-M3&#xff08;Beijing General Embedding M3&#xff09;是北京智源研究院&#xff08;BAAI&#xff09;推出的多语言通用向量模型&#x…...

光谱相机如何提升目标检测与识别精度

光谱相机&#xff08;多光谱/高光谱&#xff09;通过捕捉目标在多个波段的光谱特征&#xff0c;能够揭示传统RGB相机无法感知的材质、化学成分及物理特性差异。以下是提升其目标检测与识别精度的核心方法&#xff1a; ‌1. 硬件优化&#xff1a;提升数据质量‌ ‌(1) 光谱分辨…...

漏洞管理体系:从扫描评估到修复验证的全生命周期实践

漏洞管理体系&#xff1a;从扫描评估到修复验证的全生命周期实践 在网络安全防御体系中&#xff0c;漏洞管理是“攻防博弈”的核心战场。据NVD&#xff08;国家漏洞数据库&#xff09;统计&#xff0c;2023年新增漏洞超21万个&#xff0c;平均每天披露575个&#xff0c;其中32…...

资深程序员进阶设备分享,专业编程显示器RD280U

前言 在软件开发行业多年&#xff0c;长时间在电脑前工作常让我眼花、眼困、脊椎不舒服。曾尝试很多方法、买过不少产品&#xff0c;像显示器护眼挂灯、机械臂等&#xff0c;效果不佳还麻烦。直到我用上明基 RD280U 专业编程显示器&#xff0c;它上下可调高度&#xff0c;适配…...

云+AI双轮驱动,亚马逊云科技加速中国企业出海新浪潮

导读&#xff1a;全球化就是本地化 作者 | 小葳 图片来源 | 摄图 近年来&#xff0c;中国企业出海步伐不断加快&#xff0c;“不出海&#xff0c;就出局”成为很多企业的共识。 据沙利文统计&#xff0c;2024年上半年&#xff0c;超过2000家中国上市企业布局海外市场&#xff…...

不同ECU(MCU/ZCU/CCU)其部署(实现)的功能存在差异

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 周末洗了一个澡&#xff0c;换了一身衣服&#xff0c;出了门却不知道去哪儿&#xff0c;不知道去找谁&am…...

施工安全巡检二维码制作

进入新时代以来&#xff0c;人们对安全的重视程度越来越高。特别在建筑施工行业&#xff0c;安全不仅是关乎着工人的性命&#xff0c;更是承载着工人背后家庭的幸福生活。此时就诞生了安全巡检的工作&#xff0c;而巡检过程中内容庞杂&#xff0c;安全生产检查、隐患排查、施工…...

Linux 权限修改详解:chmod 命令与权限数字的秘密

在 Linux 系统的使用过程中&#xff0c;权限控制就像是一把神奇的钥匙&#xff0c;它决定了谁能在系统中对文件和文件夹进行何种操作。今天我们来深入了解一下如何使用 chmod 命令来修改文件和文件夹的权限&#xff0c;让你在系统管理时更加得心应手。 一、chmod 命令&#xf…...

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工具被破环了&#xff0c;用打包的方式替换调工具&#xff0c;不能拷贝&#xff0c;会破坏工具的链接。 FAILED: out\_odm/soong/build.ninja cd "$(dirname "out\_odm/host/linux-x86/bin/soong\_build")&quo…...

SIEMENS PLC程序解读 -BLKMOV (指定长度数据批量传输)

1、程序代码 2、程序解读 这段西门子 PLC 程序&#xff08;程序段 10&#xff09;实现了基于条件的数据块移动功能&#xff0c;具体解释如下&#xff1a; 条件触点&#xff1a; %M0.1 Always<>(TRUE)&#xff08;注释为 AT<>1&#xff09;&#xff1a;当 M0.1 的值…...

Git 核心命令学习总结

一、Git 基础概念 工作目录&#xff1a;本地实际操作的文件夹&#xff0c;包含项目文件。 暂存区&#xff1a;临时存放待提交的变更&#xff08;通过 git add 添加&#xff09;。 本地仓库&#xff1a;存储项目历史版本&#xff08;通过 git commit 提交&#xff09;。 二、…...

vscode 打开csv乱码

在 Visual Studio Code (VS Code) 中打开 CSV 文件出现乱码可能是由于以下几个原因导致的&#xff1a; 编码设置不正确&#xff1a;CSV 文件可能使用了不同的字符编码方式保存&#xff0c;而 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失败的情况&#xff0c;没想到数据倾斜也会导致 我们知道 task 仅在接受到所有的 barrier 之后才会进行 snapshot&#xff0c;如果作业存在反压&#xff0c;或者有数据倾斜&#xff0c;则会导致全部的 channel 或者某些 channel 的 …...

mysql知识总结 索引篇

mysql知识总结 索引篇 1. 索引问题常见分类1. 什么是索引2. 索引的分类3. 从数据结构分类4. 通过二级索引查询商品数据的过程5. 为什么选择B树作为索引呢&#xff1f; 本文是阅读 小林coding 后的读书笔记 原文可以点击上面超链接到达 也可以直接百度搜索 小林coding 1. 索引…...

Flink 数据清洗与字段标准化最佳实践

—— 构建可配置、可扩展的实时标准化清洗链路 本文是「Flink Kafka 构建实时数仓实战」专栏的第 4 篇&#xff0c;将围绕字段标准化这一核心问题&#xff0c;从业务痛点、技术架构、配置设计到完整代码工程&#xff0c;系统讲透标准化实践。 &#x1f4cc; 一、为什么实时字段…...

.NET写的开源工业物联网网关(IoTGateway)

Ver V0.0 250425 主要针对《物联网智能网关开发与设计》课程&#xff0c;根据官方的文档重新组织了一下&#xff0c;并演示了一下在Windows的VS2022下快速地搭建出了学习基于.NET8的Linux IoTGateway的开发&#xff0c;提供给学生作为学习的扩展和外延。 Index IoTGateway …...

蓝桥杯 5. 交换瓶子

交换瓶子 原题目链接 题目描述 有 N 个瓶子&#xff0c;编号为 1 ~ N&#xff0c;放在架子上。 例如有 5 个瓶子&#xff0c;当前排列为&#xff1a; 2 1 3 5 4每次可以拿起 2 个瓶子&#xff0c;交换它们的位置。 要求通过若干次交换&#xff0c;使得瓶子的编号从小到大…...

freeswitch配置视频对接

概述 freeswitch是一款简单好用的VOIP开源软交换平台。 随着4G/5G网络的完善&#xff0c;视频呼叫的需求慢慢变多&#xff0c;本文介绍使用fs对接视频线路的配置方案。 环境 CentOS 7.9 freeswitch 1.10.7 视频模块 目前主流视频编解码使用H264&#xff0c;需要编译安装…...

使用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 &#xff08;B站 崔老夫子老师&#xff09;&#xff0c;老师讲解的非常好&#xff0c;推荐大家看原视频。 第三章 密码学基本理论 3.1 密码学概况 密码编码学&#xff1a;明文 —— > 密文 密码分析学&#x…...

精益数据分析(22/126):解锁创业增长密码与长漏斗分析

精益数据分析&#xff08;22/126&#xff09;&#xff1a;解锁创业增长密码与长漏斗分析 在创业与数据分析的探索旅程中&#xff0c;我们都在不断寻求新的知识和方法&#xff0c;以提升创业的成功率。我一直期望能和大家共同学习、共同进步&#xff0c;今天就让我们继续深入研…...

【深度强化学习 DRL 快速实践】近端策略优化 (PPO)

PPO&#xff08;2017&#xff0c;OpenAI&#xff09;核心改进点 Proximal Policy Optimization (PPO)&#xff1a;一种基于信赖域优化的强化学习算法&#xff0c;旨在克服传统策略梯度方法在更新时不稳定的问题&#xff0c;采用简单易实现的目标函数来保证学习过程的稳定性 解决…...

14-DevOps-快速部署Kubernetes

在学习阶段&#xff0c;为了能快速部署Kubernetes&#xff0c;这里用一个快速安装工具&#xff1a;Kubeode&#xff0c;来完成Kubernetes的部署。 接下来部署一个单机&#xff0c;一主一从的Kubernetes。一主一从都部署在同一台服务器上。 在虚拟机新开一个服务器&#xff0c…...

Java 安全:如何防止 DDoS 攻击?

一、DDoS 攻击简介 DDoS&#xff08;分布式拒绝服务&#xff09;攻击是一种常见的网络攻击手段&#xff0c;攻击者通过控制大量的僵尸主机向目标服务器发送海量请求&#xff0c;致使服务器资源耗尽&#xff0c;无法正常响应合法用户请求。在 Java 应用开发中&#xff0c;了解 …...

html+servlet项目中的echart图表

介绍 ECharts 是一款由百度开源的&#xff0c;基于 JavaScript 的可视化图表库&#xff0c;它提供了丰富的图表类型和强大的交互功能&#xff0c;能将数据以直观、美观的图表形式展示出来&#xff0c;广泛应用于数据可视化、商业智能、数据分析等领域。 官网&#xff1a; Ap…...

抖音小程序开发常见问题与代码解决方案

抖音小程序开发常见问题与代码解决方案 一、API调用与组件使用问题 1. 分享卡片样式不生效 问题&#xff1a;通过onShareAppMessage分享的小程序卡片样式显示旧版模板。 代码示例&#xff1a; javascript Page({ onShareAppMessage() { return …...