当前位置： 首页 > news >正文

html 常用css样式及排布问题

news 2026/5/19 8:17:50

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> ①宽度&#xff08;长&#xff09; ②高度&#xff08;宽&a…...

编程日记 2024/7/24 10:39:19

【SpingCloud】客户端与服务端负载均衡机制，微服务负载均衡NacosLoadBalancer， 拓展：OSI七层网络模型

客户端与服务端负载均衡机制 可能有第一次听说集群和负载均衡&#xff0c;所以呢&#xff0c;我们先来做一个介绍&#xff0c;然后再聊服务端与客户端的负载均衡区别。 集群与负载均衡 负载均衡是基于集群的&#xff0c;如果没有集群&#xff0c;则没有负载均衡这一个说法。 …...

编程日记 2024/7/24 10:37:17

【Elasticsearch】Elasticsearch 中的节点角色

Elasticsearch 中的节点角色 1.主节点&#xff08;master&#xff09;1.1 专用候选主节点&#xff08;dedicated master-eligible node&#xff09;1.2 仅投票主节点&#xff08;voting-only master-eligible node&#xff09; 2.数据节点&#xff08;data&#xff09;2.1 内容…...

编程日记 2024/7/24 10:35:14

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...

编程日记 2024/7/24 10:30:09

分表分库是一种数据库架构的优化策略，用于处理大规模数据和高并发请求，提高数据库的性能和可扩展性。

分表分库是一种数据库架构的优化策略&#xff0c;用于处理大规模数据和高并发请求&#xff0c;提高数据库的性能和可扩展性。以下是一些常见的分表分库技术方案&#xff1a; 1. **水平分表&#xff08;Horizontal Sharding&#xff09;**&#xff1a; - 将单表数据根据某个…...

编程日记 2024/7/24 10:26:04

【ffmpeg命令入门】获取音视频信息

文章目录 前言使用ffmpeg获取简单的音视频信息输入文件信息文件元数据视频流信息音频流信息 使用ffprobe获取更详细的音视频信息输入文件信息文件元数据视频流信息音频流信息 总结 前言 在处理多媒体文件时&#xff0c;了解文件的详细信息对于调试和优化处理过程至关重要。FFm…...

编程日记 2024/7/24 10:25:03

【IoTDB 线上小课 05】时序数据文件 TsFile 三问“解密”！

【IoTDB 视频小课】持续更新&#xff01;第五期来啦~ 关于 IoTDB&#xff0c;关于物联网&#xff0c;关于时序数据库&#xff0c;关于开源... 一个问题重点&#xff0c;3-5 分钟详细展开&#xff0c;为大家清晰解惑&#xff1a; IoTDB 的 TsFile 科普&#xff01; 了解了时序数…...

编程日记 2024/7/24 10:23:01

python-爬虫实例（4）：获取b站的章若楠的视频

目录 前言 道路千万条&#xff0c;安全第一条 爬虫不谨慎&#xff0c;亲人两行泪 获取b站的章若楠的视频 一、话不多说&#xff0c;先上代码 二、爬虫四步走 1.UA伪装 2.获取url 3.发送请求 4.获取响应数据进行解析并保存 总结 前言 道路千万条&#xff0c;安全第一条 爬…...

编程日记 2024/7/24 10:21:59

C# yaml 配置文件的用法（一）

目录 一、简介 二、yaml 的符号 1.冒号 2.短横杆 3.文档分隔符 4.保留换行符 5.注释 6.锚点 7.NULL值 8.合并 一、简介 YAML&#xff08;YAML Aint Markup Language&#xff09;是一种数据序列化标准&#xff0c;广泛用于配置文件、数据交换和存储。YAML的设计目标是…...

编程日记 2024/7/24 10:19:57

人工智能与机器学习原理精解【4】

文章目录 马尔科夫过程论要点理论基础σ代数定义性质应用例子总结 马尔可夫过程概述一、马尔可夫过程的原理二、马尔可夫过程的算法过程三、具体例子 马尔可夫链的状态转移概率矩阵一、确定马尔可夫链的状态空间二、收集状态转移数据三、计算转移频率四、构建状态转移概率矩阵示…...

编程日记 2024/7/24 10:17:55

Go channel实现原理详解（源码解读）

文章目录 Go channel详解Channel 的发展Channel 的应用场景Channel 基本用法Channel 的实现原理chan 数据结构初始化sendrecvclose使用 Channel 容易犯的错误总结Go channel详解 Channel 是 Go 语言内建的 first-class 类型，也是 Go 语言与众不同的特性之一。Channel 让并发消…...

编程日记 2024/7/24 10:15:53

数据结构-C语言-排序（4）

代码位置&#xff1a; test-c-2024: 对C语言习题代码的练习 (gitee.com) 一、前言&#xff1a; 1.1-排序定义&#xff1a; 排序就是将一组杂乱无章的数据按照一定的规律&#xff08;升序或降序&#xff09;组织起来。(注&#xff1a;我们这里的排序采用的都为升序) 1.2-排…...

编程日记 2024/7/24 10:11:49

灰色关联分析【系统分析+综合评价】

系统分析&#xff1a; 判断哪个因素影响最大 基本思想&#xff1a;根据序列曲线几何形状的相似程度来判断其练习是否紧密 绘制统计图并进行分析 确定子序列和母序列 对变量进行预处理&#xff08;去量纲、缩小变量范围&#xff09; 熟练使用excel与其公式和固定&#xff08…...

编程日记 2024/7/24 10:10:48

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.测试启…...

编程日记 2024/7/24 10:09:47

ES6 数值的扩展（十八）

1. 二进制和八进制字面量 特性&#xff1a;可以直接在代码中使用二进制&#xff08;0b 或 0B&#xff09;和八进制&#xff08;0o 或 0O&#xff09;字面量。 用法&#xff1a;简化二进制和八进制数值的表示。 const binaryNumber 0b1010; // 二进制表示 10 const octalNumb…...

编程日记 2024/7/24 10:08:46

面试知识储备-redis和redission

1.redis的使用 引入依赖&#xff0c;自动注解redistemplate即可使用&#xff0c; 默认的redistemplate存入到redis中是字符流的形式&#xff0c;需要配置redistemplate&#xff0c; 如果不想配置&#xff0c;可以使用stringRedistemplate 可以使用string类型&#xff0c;但是…...

编程日记 2024/7/24 10:07:45

【5本可选】保证知网检索，现在投稿可在8月见刊，对文科领域友好

AEPH出版社旗下有5本学术期刊&#xff0c;专门出版自然科学、社会科学研究与教育领域论文的高影响力期刊&#xff0c;拥有正规ISSN号&#xff0c;出版类型涉及应用和理论方面的原创和未曾公开发表的研究论文&#xff0c;分配独立DOI号。 期刊1 Philosophy and Social Science…...

编程日记 2024/7/24 10:05:42

SpringBoot入门：如何新建SpringBoot项目（保姆级教程）

在本文中&#xff0c;我们将演示如何新建一个基本的 Spring Boot 项目。写这篇文章的时候我还是很惊讶的&#xff0c;因为我发现有些java的初学者&#xff0c;甚至工作10年的老员工居然并不会新建一个SpringBoot项目&#xff0c;所以特别出了一篇文章来教大家新建一个SpringBoo…...

编程日记 2024/7/24 10:02:37

数据恢复篇：适用于 Android 视频恢复的 6 个工具

在智能手机这个动态的世界里&#xff0c;每一刻都被捕捉并以数字方式存储&#xff0c;丢失珍贵的视频可能是一种令人心碎的经历。不必担心&#xff0c;因为 Android 生态系统提供了大量旨在挽救这些珍贵回忆的视频恢复应用程序。 这些应用程序是强大的工具&#xff0c;旨在挽救…...

编程日记 2024/7/24 10:00:35

Android笔试面试题AI答之控件Views（6）

答案来着文心一言&#xff0c;仅供参考 目录 1.简述什么是RemoteViews?使用场景有哪些?RemoteViews的特性使用场景总结 2.获取View宽高的几种方法?1. 在onWindowFocusChanged方法中获取2. 使用ViewTreeObserver.OnGlobalLayoutListener3. 使用ViewTreeObserver.OnPreDrawLi…...

编程日记 2024/7/24 9:59:34

Kali Linux 保姆级教程｜从入门到渗透测试，一篇封神！

前言 Kali Linux 作为网络安全领域的「瑞士军刀」&#xff0c;集成 600 专业渗透工具&#xff0c;覆盖信息收集、漏洞利用、权限维持等全流程。本文结合最新实战场景&#xff0c;整理系统学习路径、核心工具解析及资源获取方式&#xff0c;助你快速掌握这门渗透测试必备技能。…...

编程新知 2026/5/19 7:46:38

STM32H7网络延迟问题分析与解决方案

1. 问题现象与背景分析最近在将STM32H7系列设备的DFP&#xff08;Device Family Pack&#xff09;从v2.2.0升级到v2.3.0版本后&#xff0c;不少开发者反馈网络数据传输出现了明显的延迟问题。通过简单的ping测试可以直观观察到&#xff0c;使用v2.3.0版本的往返时间(RTT)相比v2…...

编程新知 2026/5/19 5:19:37

手把手教你用GDB/LLDB调试器观察寄存器状态（附实战案例）

深入掌握GDB/LLDB寄存器调试&#xff1a;从原理到实战 在软件开发的世界里&#xff0c;调试器就像外科医生的手术刀&#xff0c;而寄存器则是CPU的脉搏。当你面对一个段错误&#xff08;Segmentation Fault&#xff09;或者难以捉摸的内存越界问题时&#xff0c;能够直接观察CP…...

编程新知 2026/5/19 3:04:48

Token工厂：无锡部署昇腾384超节点算力集群，制造Token

AI智能体正在成为人工智能发展新范式&#xff0c;Token调用量暴增&#xff0c;拉动算力产业链资本开支迅猛加速。据央视新闻&#xff0c;今年3月&#xff0c;我国日均Token调用量超140万亿&#xff0c;相比2024年初增长1000多倍。AI模型使用成本水涨船高&#xff0c;不少从业者…...

编程新知 2026/5/19 3:02:35

ECB02蓝牙模块与手机通信避坑指南：从AT指令调试到数据收发实战

ECB02蓝牙模块与手机通信实战&#xff1a;从AT指令调试到数据收发的全流程解析 当你第一次拿到ECB02蓝牙模块时&#xff0c;可能会被这个小巧的硬件和复杂的AT指令集弄得手足无措。作为一名嵌入式开发者&#xff0c;我清楚地记得自己初次尝试让手机与模块通信时的挫败感——明明…...

编程新知 2026/5/19 2:56:02

MATLAB仿真GPS调制和捕获

一，中频数据捕获： 当捕获通道状态空闲时，启动中频数据存储，此时根据当前要捕获的卫星的来选择射频通道，并将相应的载波频率和码频率写入寄存器中，使能存储操作；当一次捕获运算完成之后，需要重新存储中频数据。 卫星选择：初始化时，将所有卫星设置为待捕获状态，用一…...

编程新知 2026/5/19 2:25:50

Seraphine英雄联盟战绩查询工具终极指南：智能排位助手完全教程

Seraphine英雄联盟战绩查询工具终极指南&#xff1a;智能排位助手完全教程 【免费下载链接】Seraphine 英雄联盟战绩查询工具 项目地址: https://gitcode.com/gh_mirrors/se/Seraphine 你是否在英雄联盟排位赛中经常因为BP阶段手忙脚乱而错失先机&#xff1f;是否希望快…...

编程新知 2026/5/19 2:04:40

半导体测试数据分析难题？STDF Viewer提供一站式专业解决方案

半导体测试数据分析难题&#xff1f;STDF Viewer提供一站式专业解决方案 【免费下载链接】STDF-Viewer A free GUI tool to visualize STDF (semiconductor Standard Test Data Format) data files. 项目地址: https://gitcode.com/gh_mirrors/st/STDF-Viewer 半导体测试…...

编程新知 2026/5/19 1:07:01

全境透视·智域重构系统 技术发布会完整版宣讲稿

全境透视智域重构系统 技术发布会完整版宣讲稿 镜像视界浙江科技有限公司 尊敬的各位领导、行业专家、合作伙伴、各界来宾&#xff1a; 大家上午好&#xff01; 当下数字智慧建设迈入全新进阶阶段&#xff0c;传统二维监控视野受限、物理遮挡形成大量管理盲区&#xff0c;静态…...

编程新知 2026/5/19 0:05:29

你的Type-C设备为什么容易坏？可能是静电防护没做对！从手机到笔记本的防护方案拆解

Type-C设备静电防护全指南&#xff1a;从原理到实战的完整解决方案 每次插拔Type-C数据线时&#xff0c;那个微小的火花可能正在悄悄摧毁你的设备。我拆解过上百台因静电损坏的电子产品&#xff0c;发现90%的Type-C接口故障都始于那个看似无害的瞬间放电现象。这种现象在干燥季…...

编程新知 2026/5/18 23:20:28