html 常用css样式及排布问题
1.常用样式
<style>.cy{width: 20%;height: 50px;font-size: 30px;border: #20c997 solid 3px;float: left;color: #00cc00;font-family: 黑体;font-weight: bold;padding: 10px;margin: 10px;}</style>①宽度（长）
②高度（宽）
③字体大小
④边框（顺序随意，可以指定颜色，样式，边框宽度）
样式包含：
dotted：点线边框
dashed：虚线边框
solid ：实线边框
double：双边框inset：3D凹边框
outset：3D凸边框
groove
ridge
⑤浮动（即强制横向排版，会强制改变某一区域的大小）
⑥颜色
⑦字体样式
⑧字体粗细
⑨边框内间距
⑩边框外间距
2.浮动属性float（浮动元素独立于非浮动元素之外，但会影响非浮动元素排列）
<style>.i{float: left;width: 300px;height: 200px;border: #1e7e34 1px solid;}.i2{width: 300px;height: 200px;border: #1e7e34 1px solid;}</style><body>
<img src="../../../1.gif" style="width: 30%">
<div class="i">不许动</div>
<div class="i">动</div></body>即使先写的是img，但i样式中有浮动属性，后面两个块级标签应用了这个属性，因此会向左浮动
当我们再添加一个非浮动元素时发现，非浮动元素只对齐与非浮动元素，与浮动元素有重合部分。 （图片和“好耶”是非浮动元素）
<body>
<img src="../../../1.gif" style="width: 30%">
<div class="i">不许动</div>
<div class="i">动</div>
<div class="i2">好耶</div></body>
当我们需要对齐时，需要清除浮动属性，即利用clear属性。
<body>
<img src="../../../1.gif" style="width: 30%">
<div class="i">不许动</div>
<div class="i">动</div>
<div class="i2" style="clear: both">好耶</div></body>结果：
相关文章：
html 常用css样式及排布问题
1.常用样式 <style>.cy{width: 20%;height: 50px;font-size: 30px;border: #20c997 solid 3px;float: left;color: #00cc00;font-family: 黑体;font-weight: bold;padding: 10px;margin: 10px;}</style> ①宽度（长） ②高度（宽&a…...
【SpingCloud】客户端与服务端负载均衡机制，微服务负载均衡NacosLoadBalancer， 拓展：OSI七层网络模型
客户端与服务端负载均衡机制 可能有第一次听说集群和负载均衡，所以呢，我们先来做一个介绍，然后再聊服务端与客户端的负载均衡区别。 集群与负载均衡 负载均衡是基于集群的，如果没有集群，则没有负载均衡这一个说法。 …...
【Elasticsearch】Elasticsearch 中的节点角色
Elasticsearch 中的节点角色 1.主节点（master）1.1 专用候选主节点（dedicated master-eligible node）1.2 仅投票主节点（voting-only master-eligible node） 2.数据节点（data）2.1 内容…...
pip install与apt install区别
pipapt/apt-get安装源PyPI 的 python所有依赖的包软件、更新源、ubuntu的依赖包 1 查看pip install 安装的数据包 命令 pip list 2 查看安装包位置 pip show package_name参考 https://blog.csdn.net/nebula1008/article/details/120042766...
分表分库是一种数据库架构的优化策略，用于处理大规模数据和高并发请求，提高数据库的性能和可扩展性。
分表分库是一种数据库架构的优化策略，用于处理大规模数据和高并发请求，提高数据库的性能和可扩展性。以下是一些常见的分表分库技术方案： 1. **水平分表（Horizontal Sharding）**： - 将单表数据根据某个…...
【ffmpeg命令入门】获取音视频信息
文章目录 前言使用ffmpeg获取简单的音视频信息输入文件信息文件元数据视频流信息音频流信息 使用ffprobe获取更详细的音视频信息输入文件信息文件元数据视频流信息音频流信息 总结 前言 在处理多媒体文件时，了解文件的详细信息对于调试和优化处理过程至关重要。FFm…...
【IoTDB 线上小课 05】时序数据文件 TsFile 三问“解密”！
【IoTDB 视频小课】持续更新！第五期来啦~ 关于 IoTDB，关于物联网，关于时序数据库，关于开源... 一个问题重点，3-5 分钟详细展开，为大家清晰解惑： IoTDB 的 TsFile 科普！ 了解了时序数…...
python-爬虫实例（4）：获取b站的章若楠的视频
目录 前言 道路千万条，安全第一条 爬虫不谨慎，亲人两行泪 获取b站的章若楠的视频 一、话不多说，先上代码 二、爬虫四步走 1.UA伪装 2.获取url 3.发送请求 4.获取响应数据进行解析并保存 总结 前言 道路千万条，安全第一条 爬…...
C# yaml 配置文件的用法（一）
目录 一、简介 二、yaml 的符号 1.冒号 2.短横杆 3.文档分隔符 4.保留换行符 5.注释 6.锚点 7.NULL值 8.合并 一、简介 YAML（YAML Aint Markup Language）是一种数据序列化标准，广泛用于配置文件、数据交换和存储。YAML的设计目标是…...
人工智能与机器学习原理精解【4】
文章目录 马尔科夫过程论要点理论基础σ代数定义性质应用例子总结 马尔可夫过程概述一、马尔可夫过程的原理二、马尔可夫过程的算法过程三、具体例子 马尔可夫链的状态转移概率矩阵一、确定马尔可夫链的状态空间二、收集状态转移数据三、计算转移频率四、构建状态转移概率矩阵示…...
Go channel实现原理详解（源码解读）
文章目录 Go channel详解Channel 的发展Channel 的应用场景Channel 基本用法Channel 的实现原理chan 数据结构初始化sendrecvclose使用 Channel 容易犯的错误总结Go channel详解 Channel 是 Go 语言内建的 first-class 类型，也是 Go 语言与众不同的特性之一。Channel 让并发消…...
数据结构-C语言-排序（4）
代码位置： test-c-2024: 对C语言习题代码的练习 (gitee.com) 一、前言： 1.1-排序定义： 排序就是将一组杂乱无章的数据按照一定的规律（升序或降序）组织起来。(注：我们这里的排序采用的都为升序) 1.2-排…...
灰色关联分析【系统分析+综合评价】
系统分析： 判断哪个因素影响最大 基本思想：根据序列曲线几何形状的相似程度来判断其练习是否紧密 绘制统计图并进行分析 确定子序列和母序列 对变量进行预处理（去量纲、缩小变量范围） 熟练使用excel与其公式和固定（…...
linux 部署flask项目
linux python环境安装: https://blog.csdn.net/weixin_41934979/article/details/140528410 1.创建虚拟环境 python3.12 -m venv .venv 2.激活环境 . .venv/bin/activate 3.安装依赖包(pip3.12 install -r requirements.txt) pip3.12 install -r requirements.txt 4.测试启…...
ES6 数值的扩展（十八）
1. 二进制和八进制字面量 特性：可以直接在代码中使用二进制（0b 或 0B）和八进制（0o 或 0O）字面量。 用法：简化二进制和八进制数值的表示。 const binaryNumber 0b1010; // 二进制表示 10 const octalNumb…...
面试知识储备-redis和redission
1.redis的使用 引入依赖，自动注解redistemplate即可使用， 默认的redistemplate存入到redis中是字符流的形式，需要配置redistemplate， 如果不想配置，可以使用stringRedistemplate 可以使用string类型，但是…...
【5本可选】保证知网检索，现在投稿可在8月见刊，对文科领域友好
AEPH出版社旗下有5本学术期刊，专门出版自然科学、社会科学研究与教育领域论文的高影响力期刊，拥有正规ISSN号，出版类型涉及应用和理论方面的原创和未曾公开发表的研究论文，分配独立DOI号。 期刊1 Philosophy and Social Science…...
SpringBoot入门：如何新建SpringBoot项目（保姆级教程）
在本文中，我们将演示如何新建一个基本的 Spring Boot 项目。写这篇文章的时候我还是很惊讶的，因为我发现有些java的初学者，甚至工作10年的老员工居然并不会新建一个SpringBoot项目，所以特别出了一篇文章来教大家新建一个SpringBoo…...
数据恢复篇：适用于 Android 视频恢复的 6 个工具
在智能手机这个动态的世界里，每一刻都被捕捉并以数字方式存储，丢失珍贵的视频可能是一种令人心碎的经历。不必担心，因为 Android 生态系统提供了大量旨在挽救这些珍贵回忆的视频恢复应用程序。 这些应用程序是强大的工具，旨在挽救…...
Android笔试面试题AI答之控件Views（6）
答案来着文心一言，仅供参考 目录 1.简述什么是RemoteViews?使用场景有哪些?RemoteViews的特性使用场景总结 2.获取View宽高的几种方法?1. 在onWindowFocusChanged方法中获取2. 使用ViewTreeObserver.OnGlobalLayoutListener3. 使用ViewTreeObserver.OnPreDrawLi…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
＜6＞-MySQL表的增删查改
目录 一，create（创建表） 二，retrieve（查询表） 1，select列 2，where条件 三，update（更新表） 四，delete（删除表…...
黑马Mybatis
Mybatis 表现层：页面展示 业务层：逻辑处理 持久层：持久数据化保存 在这里插入图片描述 Mybatis快速入门 
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文？ 多租户隔离：自动为接入设备追加租户前缀，后端按 ClientID 拆分队列。零代码鉴权：将入站用户名替换为 OAuth Access-Token，后端 Broker 统一校验。灰度发布：根据 IP/地理位写…...
C++.OpenGL （10/64）基础光照（Basic Lighting）
基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...