CSS布局基础(字体,文本,背景)
字体
常见字体设置
body {font-family: font-family: "Microsoft YaHei", Tahoma, Arial, Hiragino Sans GB,sans-serif;
}
浏览器从前到后匹配,找到可用字体结束,都没匹配上,使用浏览器默认字体
常用字号
不同浏览器默认字号可能不一样,建议手动设置通用基础字体大小,需要调整的地方再进行单独设置
font-size: 16px;
字体粗细
字体粗细可以用属性值和数字表示
属性值:
bolder, bold, normal. lighter
数字:
400 = normal ;700 = bold (数字越大,字体越粗)
样式
font-style: normal / italic
文本
颜色
color: 颜色名词 / 16进制 / rgb
对齐方式
设置盒子内,内容对齐方式,设置在父元素,作用在子元素
text-align: left/center/right
文本装饰(给文本画标线)
text-decoration: underline/overline/line-through/none(默认)
最常用于去掉 a 标签默认的下划线
文本缩进
text-indent: 2em;
常用于段落首行缩进,em 为相对单位,其大小相对于当前字体的倍数
行间距
行间距 = 上边距 + 文本高度 + 下边距
单行文本,在盒子垂直居中,可设置 行间距(行高)等于盒子高度即可
line-height: 16px;
背景
背景颜色
background-color: #555555/transparent(默认:透明);
设置透明度使用 rgba(r, g, b, [0, 1]); 最后一位 0-1 表示透明度
背景图片
background-image: none | url(http://xxxx....)
同时设置,背景颜色和背景图片时,图片覆盖颜色,但是超出图片的位置,依然以背景色为准
常用于 小的装饰图片,便于调整其位置 和 大的底层背景图
图片平铺
背景图片默认 x y轴都平铺,占满盒子
background-repeat: repeat | no-repeat | repeat-x | repeat-y
背景图片位置
background-position: position(top|bottom|left|right|center) | length(百分比|具体数值)
可以用方位名词和数值表示
top/bottom 为垂直方向,left/right 为水平方向,center 都可以表示
- 一个值
- 方位名词:根据名词语义表示一个方向的对齐方式,另一个方向上居中
- 数值:数值表示 X 轴,Y轴居中
- 两个值
- 方位名词:按实际名词语义对齐
- 数字:按 X Y 的顺序对齐
- 名词和数字混合:第一个表示 X轴方向,第二个表示 Y轴方向
背景图片固定
background-attachment: scroll(默认) | fixed
默认,背景图片会随着页面一起滚动
相关文章:
CSS布局基础(字体,文本,背景)
字体 常见字体设置 body {font-family: font-family: "Microsoft YaHei", Tahoma, Arial, Hiragino Sans GB,sans-serif; }浏览器从前到后匹配,找到可用字体结束,都没匹配上,使用浏览器默认字体 常用字号 不同浏览器默认字号可…...
Redis入门指南:深入了解这款高性能缓存数据库
本文将带您了解Redis的基本概念、数据类型、特性以及如何在实际项目中应用Redis。通过阅读本文,您将更好地理解如何利用Redis优化您的应用程序性能。 1. 什么是Redis?2. Redis的数据类型3. Redis的特性4. 如何使用Redis4.1 安装与启动4.2 基本命令4.3 应…...
# 数据结构和算法面试题系列-随机算法总结
0 概述 随机算法涉及大量概率论知识,有时候难得去仔细看推导过程,当然能够完全了解推导的过程自然是有好处的,如果不了解推导过程,至少记住结论也是必要的。本文总结最常见的一些随机算法的题目,是几年前找工作的时候…...
windows中vscode配置C/C++环境
首先要把MinGW的环境安装完,我一般是下载带有MinGW的codeblocks,这样省去自己安装MinGW。因为安装MinGW还挺麻烦的。 安装完codeblocks,找到其安装目录,把bin文件配置到环境变量去: 将bin添加到环境变量 然后打开vsco…...
shell编程之条件语句
shell编程之条件语句 一、条件测试操作1.test命令2.文件测试3.利用条件判断,创建文件4.整数值比较4.1 常用的测试操作符 5.字符串比较5.1 常用的测试操作符 6.逻辑测试6.1 常用的测试操作符 二、if语句的结构1.单分支结构2.双分支结构3.多分支结构4.if嵌套 三、case…...
【Python每日十题菜鸟版--第二天】
菜鸟实例 🍉前言1.判断奇偶性2.判断闰年3. 获取最大值最小值4. 质数(素数)的判断5.阶乘方法一方法二 6.九九乘法表7.斐波那契数列方法一 :循环计算法(一般方法)方法二: 递归 8.阿姆斯特朗数9. 十…...
拓扑排序模板及例题
概念 一个有向无环图必然存在一个拓扑序列与之对应。 流程: 先将所有入度为0的节点入队将队列中的节点出队,出队序列就是对应拓扑序。对于弹出的节点x,遍历x所有出度y,对y进行入读减一操作检查入度减一之后的节点y,…...
linux查看nginx安装路径
linux查看nginx安装路径 有几种方法可以查看nginx的安装路径: 使用which命令: which nginx这个命令会返回nginx的二进制文件路径,一般也是安装路径。 查看nginx的进程,得到安装路径: ps aux | grep nginx输出结果中有nginx的进程路径,这个也是安装路径。 在nginx的配置文…...
【生态环境保护】绿水青山就是金山银山——生态环保篇
环保是一个持续性的话题,不仅仅是在国内,整个世界都是一个命运共同体从城市垃圾分类,到农村/村镇污水治理,城乡一体化和因地制宜的实施方式,是我们一直在探索的。 从余村到全国,从中国到世界,“…...
配置Docker镜像加速器-Docker命令-Docker 容器的数据卷
Docker架构 docker进程(daemon) 镜像(Image):Docker 镜像(Image),就相当于是一个 root 文件系统。比如官方镜像 ubuntu:16.04 就包含了完整的一套 Ubuntu16.04 最小系统的 root 文件…...
ARM开发调试方法
用户选用ARM处理器开发嵌入式系统时,选择合适的开发工具可以加快开发进度,节省开发成本。因此一套含有编辑软件、编译软件、汇编软件、链接软件、调试软件、工程管理及函数库的集成开发环境(IDE)一般来说是必不可少的,…...
【Spring篇】IOC/DI注解开发
🍓系列专栏:Spring系列专栏 🍉个人主页:个人主页 目录 一、IOC/DI注解开发 1.注解开发定义bean 2.纯注解开发模式 1.思路分析 2.实现步骤 3.注解开发bean作用范围与生命周期管理 1.环境准备 2.Bean的作用范围 3.Bean的生命周期 4.注解开发依赖…...
1 Unix基础知识
1.1 登录 1.1 登录名 登录Unix系统时,要先输入登录名,然后再输入口令。系统再其口令文件(/etc/password文件)查看登录名。口令文件中的登录项由7个以冒号分隔的字段组成:登录名,加密口令,数字用…...
【翻译一下官方文档】认识uniCloud云数据库(基础篇)
我将用图文的形式,把市面上优质的课程加以自己的理解,详细的把:创建一个uniCloud的应用,其中的每一步记录出来,方便大家写项目中,做到哪一步不会了,可以轻松翻看文章进行查阅。(此文…...
全局解释器锁 GIL
问题 你已经听说过全局解释器锁 GIL,担心它会影响到多线程程序的执行性能。 解决方案 尽管 Python 完全支持多线程编程,但是解释器的 C 语言实现部分在完全并行执行时并不是线程安全的。 实际上,解释器被一个全局解释器锁保护着ÿ…...
github 下载文件加速 https://moeyy.cn/gh-proxy/
GitHub文件链接带不带协议头都可以,支持release、archive以及文件,右键复制出来的链接都是符合标准的。 注意,不支持项目文件夹,请使用Git。 分支源码:https://github.moeyy.xyz/https://github.com/moeyy/project/arc…...
第五章 资源包使用
游戏开发中会大量使用模型文件,图片文件,这些资源都需要事先导入到项目中去。导入的方式非常简单,将这些文件直接复制到项目中的Assets目录下即可。Unity 会在文件添加到 Assets 文件夹时自动检测到这些文件并同步显示在Project视图中。 Uni…...
Linux od命令
Linux od命令用于输出文件内容。 od指令会读取所给予的文件的内容,并将其内容以八进制字码呈现出来。 语法 od [-abcdfhilovx][-A <字码基数>][-j <字符数目>][-N <字符数目>][-s <字符串字符数>][-t <输出格式>][-w <每列字符…...
【15】SCI易中期刊推荐——电子电气 | 仪器仪表(中科院4区)
💖💖>>>加勒比海带<<<💖💖 🍀🍀>>>【YOLO魔法搭配&论文投稿咨询】<<<🍀🍀 ✨✨>>>学习交流 | 温澜潮生 | 合作共赢 | 共同进步<<<✨✨ 📚📚>>>人工智能 | 计算机视觉 | 深度学习Tr…...
基于PaddleServing的串联部署 ocr 识别模型
要点: 使用paddleserving服务 1 首先需要安装PaddleServing部署相关的环境 PaddleServing是PaddlePaddle推出的一种高性能、易扩展、高可用的机器学习服务框架。PaddleOCR中使用PaddleServing主要是为了将训练好的OCR模型部署到线上环境,提供API服务&a…...
龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)
更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
适应性Java用于现代 API:REST、GraphQL 和事件驱动
在快速发展的软件开发领域,REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名,不断适应这些现代范式的需求。随着不断发展的生态系统,Java 在现代 API 方…...
【安全篇】金刚不坏之身:整合 Spring Security + JWT 实现无状态认证与授权
摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题:安全。文章将详细阐述认证(Authentication) 与授权(Authorization的核心概念,对比传统 Session-Cookie 与现代 JWT(JS…...
归并排序:分治思想的高效排序
目录 基本原理 流程图解 实现方法 递归实现 非递归实现 演示过程 时间复杂度 基本原理 归并排序(Merge Sort)是一种基于分治思想的排序算法,由约翰冯诺伊曼在1945年提出。其核心思想包括: 分割(Divide):将待排序数组递归地分成两个子…...
P10909 [蓝桥杯 2024 国 B] 立定跳远
# P10909 [蓝桥杯 2024 国 B] 立定跳远 ## 题目描述 在运动会上,小明从数轴的原点开始向正方向立定跳远。项目设置了 $n$ 个检查点 $a_1, a_2, \cdots , a_n$ 且 $a_i \ge a_{i−1} > 0$。小明必须先后跳跃到每个检查点上且只能跳跃到检查点上。同时࿰…...
零基础在实践中学习网络安全-皮卡丘靶场(第十一期-目录遍历模块)
经过前面几期的内容我们学习了很多网络安全的知识,而这期内容就涉及到了前面的第六期-RCE模块,第七期-File inclusion模块,第八期-Unsafe Filedownload模块。 什么是"遍历"呢:对学过一些开发语言的朋友来说应该知道&…...
