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

HTML之CSS定位、浮动、盒子模型

news 2026/2/8 22:40:32

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

编程日记 2025/2/10 11:12:31

LQB（1）-python-各种基础排序

前言 除了内置的快速排序sort()&#xff0c;python也可以实现冒泡排序、选择排序、插入排序、快速排序、归并排序和桶排序。 一、冒泡排序 (Bubble Sort) 基础代码 def bubble_sort(arr):n len(arr)for i in range(n):swapped False # 优化&#xff1a;若本轮无交换则提前…...

编程日记 2025/2/10 11:10:28

解锁国内主流前端与后端框架

前端框架大揭秘 在当今的 Web 开发领域&#xff0c;前端框架的地位愈发举足轻重。随着用户对 Web 应用交互性和体验性要求的不断攀升&#xff0c;前端开发不再仅仅是简单的页面布局与样式设计&#xff0c;更需要构建复杂且高效的用户界面。前端框架就像是一位得力助手&#xf…...

编程日记 2025/2/10 11:09:27

使用OBS推流，srs服务器播放

说明&#xff1a; ffmpeg可以推流&#xff0c;但是是命令行方式不太友好&#xff0c;还可以使用主流的OBS开源推流软件&#xff0c;可从官网Open Broadcaster Software | OBS 下载最新版本&#xff0c;目前很多网络主播都是用它做直播。该软件支持本地视频文件以及摄像头推流。…...

编程日记 2025/2/10 11:06:22

【鸿蒙HarmonyOS Next实战开发】多媒体视频播放-ijkplayer

简介 ijkplayer是OpenHarmony和HarmonyOS环境下可用的一款基于FFmpeg的视频播放器。 演示 下载安装 ohpm install ohos/ijkplayer使用说明 import { IjkMediaPlayer } from "ohos/ijkplayer";import type { OnPreparedListener } from "ohos/ijkplayer";i…...

编程日记 2025/2/10 11:05:20

GRU 和 LSTM 公式推导与矩阵变换过程图解

GRU 和 LSTM 公式推导与矩阵变换过程图解 GRULSTM 本文的前置篇链接: 单向/双向&#xff0c;单层/多层RNN输入输出维度问题一次性解决 GRU GRU&#xff08;Gate Recurrent Unit&#xff09;是循环神经网络&#xff08;RNN&#xff09;的一种&#xff0c;可以解决RNN中不能长期…...

编程日记 2025/2/10 11:04:17

现在中国三大运营商各自使用的哪些band频段

现在中国三大运营商4G和5G频段分配情况&#xff1a; 中国移动 4G频段&#xff1a; TD-LTE&#xff1a; Band 39&#xff1a;1880-1920MHz&#xff0c;实际使用1885-1915MHz。 Band 40&#xff1a;2300-2400MHz&#xff0c;实际使用2320-2370MHz。 Band 41&#xff1a;2515-26…...

编程日记 2025/2/10 10:59:11

使用Jenkins实现鸿蒙HAR应用的自动化构建打包

使用Jenkins实现鸿蒙HAR应用的自动化构建打包 在软件开发领域&#xff0c;自动化构建是提高开发效率和确保代码质量的重要手段。特别是在鸿蒙&#xff08;OpenHarmony&#xff09;应用开发中&#xff0c;自动化构建更是不可或缺。本文将详细介绍如何使用Jenkins命令行工具实现…...

编程日记 2025/2/10 10:58:09

AI时代，职场人如何开启学习之旅

为什么要学习 AI 在当今数字化时代&#xff0c;AI 正以前所未有的速度改变着我们的工作和生活方式。从智能客服到自动化生产&#xff0c;从数据分析到个性化推荐&#xff0c;AI 已经广泛渗透到各个行业和领域。学习 AI&#xff0c;对于工作人员来说&#xff0c;不仅是提升工作…...

编程日记 2025/2/10 10:55:06

MIT6.824 Lecture 2-RPC and Threads Lecture 3-GFS

Lecture 2-RPC and Threads Go语言在多线程、同步&#xff0c;还有很好用的RPC包 《Effective Go》 线程是实现并发的重要工具 在分布式系统里关注多线程的原因&#xff1a; I/O concurrencyParallelismConvenience Thread challenges 用锁解决race问题 Coordination channel…...

编程日记 2025/2/10 10:52:02

MySQL第五次作业

根据图片内容完成作业 1.建表 &#xff08;1&#xff09;建立两个表:goods(商品表)、orders(订单表) mysql> create table goods( -> gid char(8) primary key, -> name varchar(10), -> price decimal(8,2), -> num int); mysql> create t…...

编程日记 2025/2/10 10:51:01

【PDF提取内容】如何批量提取PDF里面的文字内容，把内容到处表格或者批量给PDF文件改名，基于C++的实现方案和步骤

以下分别介绍基于 C 批量提取 PDF 里文字内容并导出到表格&#xff0c;以及批量给 PDF 文件改名的实现方案、步骤和应用场景。 批量提取 PDF 文字内容并导出到表格 应用场景 文档数据整理&#xff1a;在处理大量学术论文、报告等 PDF 文档时&#xff0c;需要提取其中的关键信…...

编程日记 2025/2/10 10:45:54

智慧机房解决方案（文末联系，领取整套资料，可做论文）

智慧机房解决方案-软件部分 一、方案概述 本智慧机房解决方案旨在通过硬件设备与软件系统的深度整合&#xff0c;实现机房的智能化管理与服务&#xff0c;提升机房管理人员的工作效率&#xff0c;优化机房运营效率&#xff0c;确保机房设备的安全稳定运行。软件部分包括机房管…...

编程日记 2025/2/10 10:40:49

【C编程问题集中营】使用数组指针时容易踩得坑

【C编程问题集中营】使用数组指针时容易踩得坑 文章目录 【C编程问题集中营】使用数组指针时容易踩得坑一、获取数组首地址二、应用场景举例2.1 正常场景2.2 异常场景 三、总结 一、获取数组首地址 一维数组的首地址即数组第一个元素的指针&#xff0c;常用的获取一维数组首地…...

编程日记 2025/2/10 10:36:42

【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# 停止…...

编程日记 2025/2/10 10:33:35

反函数定义及其推导

文章目录 定义存在条件举例说明总结 反函数是数学中一种特殊的函数&#xff0c;用于“逆转”另一个函数的映射关系。 定义 设有一个函数 f : X → Y f: X \to Y f:X→Y。如果存在一个函数 g : Y → X g: Y \to X g:Y→X&#xff0c;使得对于所有 x ∈ X x \in X x∈X 和 y…...

编程日记 2025/2/10 10:31:33

2025.2.9机器学习笔记：PINN文献阅读

2025.2.9周报 文献阅读题目信息摘要Abstract创新点网络架构实验结论缺点以及后续展望 文献阅读 题目信息 题目&#xff1a; GPT-PINN:Generative Pre-Trained Physics-Informed Neural Networks toward non-intrusive Meta-learning of parametric PDEs期刊&#xff1a; Fini…...

编程日记 2025/2/10 10:29:30

Oracle数据连接 Dblink

拓展&#xff1a; oracle远程登陆数据库 1.oracle客户端或者服务端 2.修改你的电脑如下路径文件&#xff08;服务器IP,服务器的数据库名&#xff0c;服务器的数据库端口号&#xff09; c:\oracle\product\10.2.0\db_1\NETWORK\ADMIN\tnsnames.ora orcl_109 (DESCRIPTION …...

编程日记 2025/2/10 10:27:28

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

编程日记 2025/2/10 10:26:25

基于STM32的智能鱼缸水质净化系统设计

&#x1f91e;&#x1f91e;大家好&#xff0c;这里是5132单片机毕设设计项目分享&#xff0c;今天给大家分享的是智能鱼缸水质净化系统。 目录 1、设计要求 2、系统功能 3、演示视频和实物 4、系统设计框图 5、软件设计流程图 6、原理图 7、主程序 8、总结 1、设计要求…...

编程日记 2025/2/10 10:20:17

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2026/2/7 5:16:28

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/12/31 8:38:23

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2026/1/31 6:04:01

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2026/1/30 16:09:53

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...

编程新知 2026/2/1 7:05:28

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...

编程新知 2026/1/29 12:12:12

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

编程新知 2025/12/18 6:00:45

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

编程新知 2025/8/13 15:12:54

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

编程新知 2026/2/6 4:24:06