HTML之CSS定位、浮动、盒子模型
HTML之CSS定位、浮动、盒子模型
定位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outDiv{width: 500px;height: 300px;background-color: lightblue;border: 1px solid green;margin: 0 auto;}.innerDiv{width: 100px;height: 100px;background-color: lightcoral;border: 1px solid red;margin: 10px;/* display: inline; block 默认 表示块元素 ; inline 行内元素 */}/* position: static 默认值fixed 相对定位 相对于浏览器窗口 relative 相对定位 相对于自己原来的位置，元素原本位置不会被其他元素占用absolute 绝对定位left跟right是一对，top跟bottom是一对，用时只用一对中的某一个left right top bottom*/.d1{position: relative;top: 100px;right: 100px;}</style>
</head>
<body><div class="outDiv"><div class="innerDiv d1">div1</div><div class="innerDiv d2">div2</div><div class="innerDiv d3">div3</div></div>
</body>
</html>
浮动
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outDiv{width: 500px;height: 300px;background-color: lightblue;border: 1px solid green;margin: 0 auto;}.innerDiv{width: 100px;height: 100px;background-color: lightcoral;border: 1px solid red;margin: 10px;/* display: inline; block 默认 表示块元素 ; inline 行内元素 *//* float: left; */}/* 浮动设置的初衷 就是为了不隐藏文字 *//* 当d1设置左浮动，而其他两个没设置浮动时，d1会盖住下面飘上来的div模块，但是不会盖住其中的文字，文字会被挤到div模块下面 */.d1{float: right;}</style>
</head>
<body><div class="outDiv"><div class="innerDiv d1">div1</div><div class="innerDiv d2">div2</div><div class="innerDiv d3">div3</div></div>
</body>
</html>
盒子模型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outDiv{width: 500px;height: 300px;background-color: lightblue;border: 1px solid green;margin: 0px auto;}.innerDiv{width: 100px;height: 100px;background-color: lightcoral;border: 1px solid red;margin: 10px; /* 外边距 四方位 *//* display: inline; block 默认 表示块元素 ; inline 行内元素 */float: left;}/* width:100px; height:100px; div中设置width和height 表示元素div的容量是100*100border:1px; 表示边线，边线不侵占容量； 设置边线之后 div元素的实际占用高度为：容量 100 + 边线（上下） 1*2 = 102边距：即元素留白margin:10px; 表示外边距，外边距不侵占容量； 设置外边距之后 div元素的实际占用高度为：容量 100 + 边线（上下） 1*2 + 外边距（上下） 10*2 = 122写法：margin: 10px; margin:10px 20px;（上下 左右） margin:10px 20px 30px 40px;(从上边距开始顺时针转) margin-top:10px; margin-right:20px; margin-bottom:30px; margin-left:40px;padding:10px; 表示内边距，内边距不侵占容量;也是会是原本的元素变大，可以通过设置box-sizing:border-box使元素本身不变；写法：padding: 10px; padding:10px 20px;（上下 左右） padding:10px 20px 30px 40px;(从上边距开始顺时针转) padding-top:10px; padding-right:20px; padding-bottom:30px; padding-left:40px;*/.d1{/* float: right; */padding: 20px; /* 内边距 四方位 或者padding-top 等... ...*/box-sizing: border-box; /* 设置盒子模型为border-box，设置之后，padding不会增加元素的实际占用高度 */margin-right: 20px;}</style>
</head>
<body><div class="outDiv"><div class="innerDiv d1">div1</div><div class="innerDiv d2">div2</div><div class="innerDiv d3">div3</div></div>
</body>
</html>
相关文章：
HTML之CSS定位、浮动、盒子模型
HTML之CSS定位、浮动、盒子模型 定位 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document<…...
LQB（1）-python-各种基础排序
前言 除了内置的快速排序sort()，python也可以实现冒泡排序、选择排序、插入排序、快速排序、归并排序和桶排序。 一、冒泡排序 (Bubble Sort) 基础代码 def bubble_sort(arr):n len(arr)for i in range(n):swapped False # 优化：若本轮无交换则提前…...
解锁国内主流前端与后端框架
前端框架大揭秘 在当今的 Web 开发领域，前端框架的地位愈发举足轻重。随着用户对 Web 应用交互性和体验性要求的不断攀升，前端开发不再仅仅是简单的页面布局与样式设计，更需要构建复杂且高效的用户界面。前端框架就像是一位得力助手…...
使用OBS推流，srs服务器播放
说明： ffmpeg可以推流，但是是命令行方式不太友好，还可以使用主流的OBS开源推流软件，可从官网Open Broadcaster Software | OBS 下载最新版本，目前很多网络主播都是用它做直播。该软件支持本地视频文件以及摄像头推流。…...
【鸿蒙HarmonyOS Next实战开发】多媒体视频播放-ijkplayer
简介 ijkplayer是OpenHarmony和HarmonyOS环境下可用的一款基于FFmpeg的视频播放器。 演示 下载安装 ohpm install ohos/ijkplayer使用说明 import { IjkMediaPlayer } from "ohos/ijkplayer";import type { OnPreparedListener } from "ohos/ijkplayer";i…...
GRU 和 LSTM 公式推导与矩阵变换过程图解
GRU 和 LSTM 公式推导与矩阵变换过程图解 GRULSTM 本文的前置篇链接: 单向/双向，单层/多层RNN输入输出维度问题一次性解决 GRU GRU（Gate Recurrent Unit）是循环神经网络（RNN）的一种，可以解决RNN中不能长期…...
现在中国三大运营商各自使用的哪些band频段
现在中国三大运营商4G和5G频段分配情况： 中国移动 4G频段： TD-LTE： Band 39：1880-1920MHz，实际使用1885-1915MHz。 Band 40：2300-2400MHz，实际使用2320-2370MHz。 Band 41：2515-26…...
使用Jenkins实现鸿蒙HAR应用的自动化构建打包
使用Jenkins实现鸿蒙HAR应用的自动化构建打包 在软件开发领域，自动化构建是提高开发效率和确保代码质量的重要手段。特别是在鸿蒙（OpenHarmony）应用开发中，自动化构建更是不可或缺。本文将详细介绍如何使用Jenkins命令行工具实现…...
AI时代，职场人如何开启学习之旅
为什么要学习 AI 在当今数字化时代，AI 正以前所未有的速度改变着我们的工作和生活方式。从智能客服到自动化生产，从数据分析到个性化推荐，AI 已经广泛渗透到各个行业和领域。学习 AI，对于工作人员来说，不仅是提升工作…...
MIT6.824 Lecture 2-RPC and Threads Lecture 3-GFS
Lecture 2-RPC and Threads Go语言在多线程、同步，还有很好用的RPC包 《Effective Go》 线程是实现并发的重要工具 在分布式系统里关注多线程的原因： I/O concurrencyParallelismConvenience Thread challenges 用锁解决race问题 Coordination channel…...
MySQL第五次作业
根据图片内容完成作业 1.建表 （1）建立两个表:goods(商品表)、orders(订单表) mysql> create table goods( -> gid char(8) primary key, -> name varchar(10), -> price decimal(8,2), -> num int); mysql> create t…...
【PDF提取内容】如何批量提取PDF里面的文字内容，把内容到处表格或者批量给PDF文件改名，基于C++的实现方案和步骤
以下分别介绍基于 C 批量提取 PDF 里文字内容并导出到表格，以及批量给 PDF 文件改名的实现方案、步骤和应用场景。 批量提取 PDF 文字内容并导出到表格 应用场景 文档数据整理：在处理大量学术论文、报告等 PDF 文档时，需要提取其中的关键信…...
智慧机房解决方案（文末联系，领取整套资料，可做论文）
智慧机房解决方案-软件部分 一、方案概述 本智慧机房解决方案旨在通过硬件设备与软件系统的深度整合，实现机房的智能化管理与服务，提升机房管理人员的工作效率，优化机房运营效率，确保机房设备的安全稳定运行。软件部分包括机房管…...
【C编程问题集中营】使用数组指针时容易踩得坑
【C编程问题集中营】使用数组指针时容易踩得坑 文章目录 【C编程问题集中营】使用数组指针时容易踩得坑一、获取数组首地址二、应用场景举例2.1 正常场景2.2 异常场景 三、总结 一、获取数组首地址 一维数组的首地址即数组第一个元素的指针，常用的获取一维数组首地…...
【Redis】Linux、Windows、Docker 环境下部署 Redis
一、Linux环境部署Redis 1、卸载 # 查看 Redis 是否还在运行 [appuserlocalhost redis]$ ps -ef|grep redis appuser 135694 125912 0 14:24 pts/1 00:00:00 ./bin/redis-server *:6379 appuser 135731 125912 0 14:24 pts/1 00:00:00 grep --colorauto redis# 停止…...
反函数定义及其推导
文章目录 定义存在条件举例说明总结 反函数是数学中一种特殊的函数，用于“逆转”另一个函数的映射关系。 定义 设有一个函数 f : X → Y f: X \to Y f:X→Y。如果存在一个函数 g : Y → X g: Y \to X g:Y→X，使得对于所有 x ∈ X x \in X x∈X 和 y…...
2025.2.9机器学习笔记：PINN文献阅读
2025.2.9周报 文献阅读题目信息摘要Abstract创新点网络架构实验结论缺点以及后续展望 文献阅读 题目信息 题目： GPT-PINN:Generative Pre-Trained Physics-Informed Neural Networks toward non-intrusive Meta-learning of parametric PDEs期刊： Fini…...
Oracle数据连接 Dblink
拓展： oracle远程登陆数据库 1.oracle客户端或者服务端 2.修改你的电脑如下路径文件（服务器IP,服务器的数据库名，服务器的数据库端口号） c:\oracle\product\10.2.0\db_1\NETWORK\ADMIN\tnsnames.ora orcl_109 (DESCRIPTION …...
fetch请求总结,fastadmin中后台接口强制返回json数据
fetch请求 提交图片,只支持formData方式,这样会自动变为multiform方式,而且一般的post大多都可以用这样的方式来完成请求 const formData new FormData(); formData.append(file, fileInput.files[0]); formData.append(pid, id); formData.append(dc, 1);fetch(/api/common…...
基于STM32的智能鱼缸水质净化系统设计
🤞🤞大家好，这里是5132单片机毕设设计项目分享，今天给大家分享的是智能鱼缸水质净化系统。 目录 1、设计要求 2、系统功能 3、演示视频和实物 4、系统设计框图 5、软件设计流程图 6、原理图 7、主程序 8、总结 1、设计要求…...
ARM指令追踪技术及TRCVICTLR寄存器详解
1. ARM指令追踪技术概述在嵌入式系统开发和调试过程中，指令追踪（Instruction Trace）是一项至关重要的技术。它通过硬件机制记录处理器的执行流程，为开发者提供程序运行的完整轨迹。ARM架构从v7开始引入嵌入式跟踪宏单元࿰…...
从入门到上岗，Java+AI 复合型人才养成攻略
当下编程行业格局正在悄然改变，纯 Java 后端岗位内卷日趋严重，薪资增长逐步放缓；纯粹的 AI 算法岗门槛居高不下，对学历、数理功底要求严苛，普通开发者很难入局。 而Java+AI 复合型开发顺势成为行业刚需岗位，既依托成熟的 Java 体系承接业务开发，又能融入人工智能技术实…...
Redis分布式锁进阶第二十篇
一、本篇前置衔接 第二十篇我们完成了全系列终局复盘，整理了故障排查SOP与企业级落地铁律。常规单资源锁、热点分片锁、隔离锁全部讲透，但真实复杂业务永远不是单一资源：下单要扣库存、扣优惠券、扣积分、冻结余额，多资源并行争抢…...
使用TaotokenCLI工具一键配置开发环境中的API密钥
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 使用Taotoken CLI工具一键配置开发环境中的API密钥 在团队协作或个人开发中，为每个项目或成员手动配置大模型API密钥和…...
Owl-Alpha 新手快速上手指南
在处理大规模数据或构建高性能应用时，我们常常会遇到一个棘手的问题：如何在不阻塞主线程的情况下，高效地执行耗时任务？无论是处理图像、解析大型文件，还是进行复杂的数学运算，传统的单线程模式往往会让界面…...
关于psthon问题
我想问问各位 我python可以查到 但是我的bit文件查不到python怎么回事...
如何快速掌握Avidemux：新手完整入门指南与5个核心技巧
如何快速掌握Avidemux：新手完整入门指南与5个核心技巧 【免费下载链接】avidemux2 Avidemux2, simple video editor 项目地址: https://gitcode.com/gh_mirrors/avi/avidemux2 Avidemux是一款功能强大且完全开源的专业视频编辑工具，专为快速剪辑、…...
在线文档协作工具选型必看：14款产品对比（2026版）
一、在线文档协作工具的概念解析及其核心功能 在线文档协作工具是基于云端的文档创建、编辑、共享与协同沟通平台，核心目标是让团队在同一份资料上“实时共同工作”，减少反复传文件、版本混乱与沟通成本。 企业常见的核心能力包括： 多人实…...
接口测试用例设计：超详细防御体系与分层校验实践
1. 为什么“超详细”三个字在接口测试用例里不是修饰词，而是生死线我带过三支不同行业的测试团队——金融支付、SaaS中台、IoT设备管理平台。每次新人入职第一周，我都会收走他们写的前5条接口测试用例，逐行标红批注。不是因为格式不对&#x…...
Style-Bert-VITS2未来发展方向：从语音克隆到实时语音转换的技术演进路线
Style-Bert-VITS2未来发展方向：从语音克隆到实时语音转换的技术演进路线 【免费下载链接】Style-Bert-VITS2 Style-Bert-VITS2: Bert-VITS2 with more controllable voice styles. 项目地址: https://gitcode.com/gh_mirrors/st/Style-Bert-VITS2 Style-Bert…...