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…...
centos 7 部署awstats 网站访问检测
一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
ip子接口配置及删除
配置永久生效的子接口，2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI，使用客户端或是内部自己搭建集成大模型的终端，加速与大型语言模型（LLM）的结合，同时使用检索增强生成（Retrieval Augmented Generation &#…...
使用Spring AI和MCP协议构建图片搜索服务
目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式（本地调用） SSE模式（远程调用） 4. 注册工具提…...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中，如工厂高危作业区、医院手术室、公共场景等，人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式，存在效率低、覆盖面不足、判断主观性强等问题，难以满足对人员打手机行为精…...
通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器
拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件： 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...
数据结构：递归的种类（Types of Recursion）
目录 尾递归（Tail Recursion） 什么是 Loop（循环）？ 复杂度分析 头递归（Head Recursion） 树形递归（Tree Recursion） 线性递归（Linear Recursion）…...
热烈祝贺埃文科技正式加入可信数据空间发展联盟
2025年4月29日，在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上，可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞，强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...