Web开发 -前端部分-CSS-2
一 长度单位
代码实现：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 根元素 */html {font-size: 20px;}/* 第一种长度单位px */#ax1 {width: 200px;height: 200px;font-size: 20px;background-color: skyblue;}/* 第二种长度单位：em(相对于当前元素的font-size 的倍数) *//* 没有指定则会向上寻找 */#ax2 {width: 10em;height: 10em;font-size: 20px;background-color: orange;}/* 第三种长度单位：相当于根元素 */#ax3 {width: 10rem;height: 10rem;font-size: 20px;background-color: red;}/* 第四种长度单位：相对其父元素的百分比尺寸 */#ax4 {width: 200px;height: 200px;font-size: 20px;background-color: blue;}.inside {width: 50%;height: 25%;font-size: 20px;background-color: brown;}</style></head><body><div id="ax1">hello world1</div><div id="ax2">hello world2</div><div id="ax3">hello world3</div><div id="ax4"><div class="inside">hello world3</div></div>
</body></html>图形化展示：
二 元素显示模式
1 三种显示模式
总结：
2 修改元素的显示模式
代码实现：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;font-size: 20px;/* inline是行内元素 block是块元素 inline-block行内块元素 none是隐藏*/display: inline;}#ax1 {background-color: skyblue;}#ax2 {background-color: orange;}#ax3 {background-color: red;}#ax4 {background-color: blue;}</style>
</head><body><div id="ax1">hello1</div><div id="ax2">hello2</div><div id="ax3">hello3</div><div id="ax4">hello4</div>
</body></html>图形化展示：
三 盒子模型的组成部分
盒子模型组成：内容区域（content）,内边距区域（padding），边框区域（border）,外边距区域（margin）
代码实现：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* 内容区的宽 */width: 400px;/* 内容区的高 */height: 400px;/* 内边距 */padding: 20px;/* 边框 */border: 10px solid black;/* 外边距 */margin: 50px;font-size: 20px;background-color: gray;}</style>
</head><body><div>内容区</div>
</body></html>图形化展示：
1 内容（content）
2 默认宽度
3 盒子的内边距(padding)
4 盒子的边框(border)
5 盒子的外间距（margin）
1 margin塌陷问题
2 margin合并问题-公摊面积
四 问题解决
1 处理内容溢出问题
2 隐藏元素的两种方式
3 样式的继承
背景颜色的默认为透明--transparent
4 元素的默认样式
5 处理元素之间的空白问题
代码实现：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 回车这个空格被认定为opx 不占据空间 */div {font-size: 0px;}span {font-size: 30px;}.ax1 {background-color: red;}.ax2 {background-color: orange;}.ax3 {background-color: blue;}</style></head><body><div><span class="ax1">人之初</span><span class="ax2">性本善</span><span class="ax3">性相近</span></div>
</body></html>图形化展示：
6 行内块元素的幽灵空白问题
图形化展示
五 布局技巧
1 居中布局（块元素）
代码实现：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outer {width: 400px;height: 400px;background-color: skyblue;overflow: hidden;}.inner {width: 200px;height: 100px;margin: 0 auto;margin-top: 150px;background-color: red;text-align: center;line-height: 100px;}</style></head><body><div class="outer"><div class="inner">inner</div></div>
</body></html>图形化展示：
2 居中显示（行内元素）
代码实现：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 行内元素可以当成文字处理 */.ax1 {width: 400px;height: 400px;background-color: gray;text-align: center;line-height: 400px;}.ax2 {background-color: red;font-size: 20px;}</style>
</head><body><div class="ax1"><span class="ax2">hello world</span></div></body></html>图形化展示：
六 浮动
1 元素浮动
代码实现：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 800px;height: 600px;background-color: skyblue;}img {width: 300px;float: left;margin-right: 1em;}</style>
</head><body><div><img src="../../HTML/QQ图片20240919174729.jpg" alt="">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi earum repudiandae reprehenderit corporisarchitecto modi possimus quia aut! Est tempore quaerat, esse odio deleniti, debitis doloribus eos exercitationemipsam omnis temporibus dignissimos nostrum nobis iste, distinctio perferendis repudiandae! Exercitationem quimodi pariatur ipsam blanditiis, consectetur fugiat officia sapiente aperiam consequatur doloribus, corporisillo? Rem libero officia totam est, ad accusantium nihil commodi a nam alias qui earum doloremque corrupti sequilabore doloribus accusamus voluptatem aliquid odit repellat minus laudantium. Qui quis libero doloremque nam iddignissimos voluptatibus commodi, natus recusandae vero unde quas. Consequatur deserunt omnis dolorem minusveniam aperiam nisi officiis perferendis eligendi. Eaque exercitationem tempora reprehenderit? Quae earum facereautem, alias maxime, impedit voluptas officia doloremque voluptate nostrum, accusantium natus quis quidemaccusamus! Nesciunt autem, dolorem reprehenderit iusto accusamus maiores eius sed quaerat veniam! Molestiasbeatae quaerat voluptates, tenetur, ipsum saepe atque rerum dicta dolorem error at aperiam, eaque incidunt?Totam culpa dolorem eaque delectus aperiam sit repudiandae laudantium distinctio fugit in dolor voluptas quaeratlaborum fugiat deleniti architecto, optio, blanditiis doloribus laboriosam. Dolor, ex? Possimus, fugiatdelectus, fuga quaerat deleniti voluptate necessitatibus enim repellat temporibus iusto quibusdam excepturiratione culpa ea accusantium quae voluptas cum quod dicta.</div>
</body></html>图形化实现
2 元素浮动的特点
内容解释：
-
脱离文档流：
- 浮动元素会从正常的文档流中移除，并尽可能地向左或向右移动（取决于
float属性的值是left还是right）。这意味着浮动元素不会影响其后的非浮动元素的位置。
- 浮动元素会从正常的文档流中移除，并尽可能地向左或向右移动（取决于
-
不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高：
- 浮动元素的宽度和高度默认情况下是由其内容决定的，即内容多少就占用多大的空间。但是，你可以通过CSS手动设置浮动元素的宽度和高度。
-
不会独占一行，可以与其他元素共用一行：
- 浮动元素不会自动占据一整行的空间，而是尽可能地和其他浮动元素共享一行。如果空间不足，则浮动元素会换到下一行。
-
不会margin合并，也不会margin塌陷，能够完美的设置四个方向的margin和padding：
- 浮动元素的外边距（
margin）不会与其他元素的外边距发生合并现象，也不会出现所谓的“margin塌陷”问题。这意味着你可以精确地控制浮动元素四周的间距。
- 浮动元素的外边距（
-
不会像行内块一样被当做文本处理（没有行内块的空白问题）：
- 浮动元素不会像行内元素那样受到空白字符的影响。行内元素之间的空白会被浏览器解析为一个空格，而浮动元素则不会受此影响，因此不会出现因空白字符导致的额外间隙问题。
代码实现：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outer {background-color: skyblue;width: 800px;height: 400px;}.box {font-size: 20px;}.box1 {background-color: skyblue;}.box2 {background-color: yellow;float: left;}.box3 {background-color: green;}</style>
</head><body><div class="outer"><div class="box box1">盒子1</div><div class="box box2">盒子2</div><div class="box box3">盒子3</div></div>
</body></html>图形化展示：
3 元素浮动的影响
137集
相关文章：
Web开发 -前端部分-CSS-2
一 长度单位 代码实现： <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document<…...
【QT用户登录与界面跳转】
【QT用户登录与界面跳转】 1.前言2. 项目设置3.设计登录界面3.1 login.pro参数3.2 界面设置3.2.1 登录界面3.2.2 串口主界面 4. 实现登录逻辑5.串口界面6.测试功能7.总结 1.前言 在Qt应用程序开发中，实现用户登录及界面跳转功能是构建交互式应用的重要步骤之一。下…...
记录一次关于spring映射postgresql的jsonb类型的转化器事故，并使用hutool的JSONArray完成映射
事件的起因是这样的，那次事故发生的起因是因为WebFlux和postgreSQL去重新做鱼皮的鱼图图项目（鱼图图作业）。 在做到picture表的时候，发现postgreSQL中有个jsonb的类型可以更好的支持json数组。 出于锻炼新技术的目的，…...
基于 HTML5 Canvas 制作一个精美的 2048 小游戏--day2
为了使 2048 游戏的设计更加美观和用户友好，我们可以进行以下几项优化： 改善颜色方案：使用更温馨的颜色组合。添加动画效果：为方块的移动和合并添加渐变效果。优化分数显示：在分数增加时使用动画效果。 以下是改进后…...
Django框架：python web开发
1.环境搭建： （a）开发环境：pycharm （b）虚拟环境（可有可无，优点：使用虚拟环境可以把使用的包自动生成一个文件，其他人需要使用时可以直接选择导入包ÿ…...
MySQL、HBase、ES的特点和区别
MySQL：关系型数据库，主要面向OLTP，支持事务，支持二级索引，支持sql，支持主从、Group Replication架构模型（本文全部以Innodb为例，不涉及别的存储引擎）。 HBase࿱…...
联发科MTK6762/MT6762安卓核心板_4G智能模块应用
MT6762安卓核心板是一款工业级高性能、可运行 android9.0 操作系统的 4G智能模块。MT6762平台打造具备 AI 体验、先进双摄像头拍摄效果且具备丰富连接功能的智能手机主板。 MT6762安卓核心板 是一款髙性能低功耗的 4G 全网通安卓智能模块。此模块支持 2G/3G/4G 移动，…...
Windows7系统下载安装Source Code Pro字库
Source Code Pro字库介绍 Source Code Pro是由Adobe推出的一款专为代码展示和编写设计的开源等宽字体。它不仅在编程社区中广受好评，还被广泛应用于各种编辑器环境中，以提升代码的可读性和编程体验。 Source Code Pro的设计充分考虑了编程符号的呈…...
Navicat 17 功能简介 | 商业智能 BI
Navicat 17 功能简介 | 商业智能BI 随着 17 版本的发布，Navicat 也带来了众多的新特性，包括兼容更多数据库、全新的模型设计、可视化智能 BI、智能数据分析、可视化查询解释、高质量数据字典、增强用户体验、扩展 MongoDB 功能、轻松固定查询结果、便捷U…...
C# winodw TableLayoutPanel 料盒生产状态UI自动生成
料盒生产状态UI自动生成，效果如下 以前公司项目的这些都是手动拖控件做的。每个设备的料盒数量不一样，层数不一样时都要发好几个小时去改相关细节和代码。上次改了一次。这个又来了。上次就有想法做成根据参数自动生成。但项目时间有限有没有去深入思路和…...
提示词的艺术----AI Prompt撰写指南（个人用）
提示词的艺术 写在前面 制定提示词就像是和朋友聊天一样，要求我们能够清楚地表达问题。通过这个过程，一方面要不断练习提高自己地表达能力，另一方面还要锻炼自己使用更准确精炼的语言提出问题的能力。 什么样的提示词有用？ 有…...
哪些前端打印插件可以实现监听用户选择了打印还是取消
在前端实现监听用户是否选择了打印还是取消的功能，确实是一个挑战，因为浏览器的打印行为是通过原生对话框处理的，而这些对话框的行为无法直接被 JavaScript 控制或监听。不过，有一些插件和方法可以帮助你更接近这个目标࿱…...
【PyCharm】连接Jupyter Notebook
【PyCharm】相关链接 【PyCharm】连接 Git【PyCharm】连接Jupyter Notebook【PyCharm】快捷键使用【PyCharm】远程连接Linux服务器【PyCharm】设置为中文界面 【PyCharm】连接Jupyter Notebook PyCharm连接Jupyter Notebook的过程可以根据不同的需求分为 本地连接 和 远程连…...
【Linux系统编程】—— 深入理解Linux中的环境变量与程序地址空间
文章目录 环境变量常见的环境变量查看环境变量环境变量的修改与使用环境变量的组织⽅式环境变量的命令通过代码如何获取环境变量环境变量的继承 前言：在Linux系统中，环境变量和程序地址空间是系统管理和进程运行的重要组成部分。本文将详细探讨环境变量的…...
Spark常见面试题-部分待更新
1. 简述hadoop 和 spark 的不同点（为什么spark更快） Hadoop是一个分布式管理、存储、计算的生态系统，包括HDFS（分布式文件系统）、MapReduce（计算引擎）和YARN（资源调度器）…...
Android BitmapShader实现狙击瞄具十字交叉线准星，Kotlin
Android BitmapShader实现狙击瞄具十字交叉线准星，Kotlin <?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.…...
linux通过web向mac远程传输字符串，mac收到后在终端中直接打印。
要通过Web从Linux向Mac远程传输字符串，并在Mac的终端中直接打印，可以使用以下方法。这里假设Linux作为服务器，Mac作为客户端。 方法 1：使用Python的HTTP服务器 在Linux上启动一个简单的HTTP服务器，Mac通过curl获取字符…...
海云安开发者安全智能助手D10荣膺 “ AI标杆产品 ” 称号，首席科学家齐大伟博士入选2024年度 “ 十大杰出青年 ”
2024年12月27日，粤港澳大湾区AI领袖峰会在深圳成功举办，大会表彰了在人工智能技术创新、应用实践和产业发展等方面取得优异成绩的企业和个人，深圳海云安网络安全技术有限公司开发者安全智能助手D10荣膺“AI标杆产品”称号。同时，公…...
Spring Boot + Apache POI 实现 Excel 导出：BOM物料清单生成器（支持中文文件名、样式美化、数据合并）
目录 引言 Apache POI操作Excel的实用技巧 1.合并单元格操作 2.设置单元格样式 1. 创建样式对象 2. 设置边框 3. 设置底色 4. 设置对齐方式 5. 设置字体样式 6.设置自动换行 7. 应用样式到单元格 3. 定位和操作指定单元格 4.实现标签-值的形式 5.列宽设置 1. 设…...
ReactiveSwift 简单使用
记录 ReactiveSwift 简单使用 导入 ReactiveSwift 库创建 TestViewModel 文件 enum JKTypeType: Int {case cloudcase devicecase weater }// 通过监听属性变化 class TestViewModel: NSObject {lazy var recordType: Property<JKTypeType> {return Property(recordTy…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了 先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...
突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合
强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？ 在 Golang 的面试中，map 类型的使用是一个常见的考点，其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798， 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制： 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程，创建出来的进程就是子进程，原来的进程为父进程。…...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”（简单设计）是软件开发中的一个重要理念，倡导以最简单的方式实现软件功能，以确保代码清晰易懂、易维护，并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计，遵循“让事情保…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库，专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性，并提供了一个通用的框架&…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源 论文&a…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...
Java编程之桥接模式
定义 桥接模式（Bridge Pattern）属于结构型设计模式，它的核心意图是将抽象部分与实现部分分离，使它们可以独立地变化。这种模式通过组合关系来替代继承关系，从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...