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…...
KubeSphere 容器平台高可用：环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界，看笔记好好学多敲多打，每个人都是大神！ 题目：KubeSphere 容器平台高可用：环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
基于算法竞赛的c++编程（28）结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言：多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时，基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套：跨云网络构建数据…...
手游刚开服就被攻击怎么办？如何防御DDoS？
开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中，有几种方法可以执行Shell指令： 1. 使用system()函数 这是最简单的方法，包含在stdlib.h头文件中： #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
【解密LSTM、GRU如何解决传统RNN梯度消失问题】
解密LSTM与GRU：如何让RNN变得更聪明？ 在深度学习的世界里，循环神经网络（RNN）以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而，传统RNN存在的一个严重问题——梯度消失&#…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注：文档 https://developers.weixin.qq…...