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、设计要求…...
网络编程（Modbus进阶）
思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
微信小程序之bind和catch
这两个呢，都是绑定事件用的，具体使用有些小区别。 官方文档： 事件冒泡处理不同 bind：绑定的事件会向上冒泡，即触发当前组件的事件后，还会继续触发父组件的相同事件。例如，有一个子视图绑定了b…...
反向工程与模型迁移：打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文？ 多租户隔离：自动为接入设备追加租户前缀，后端按 ClientID 拆分队列。零代码鉴权：将入站用户名替换为 OAuth Access-Token，后端 Broker 统一校验。灰度发布：根据 IP/地理位写…...
江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下，江苏艾立泰以一场跨国资源接力的创新实践，重新定义了绿色供应链的边界。 跨国回收网络：废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点，将海外废弃包装箱通过标准…...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机（Finite Automaton, FA）到正规文法（Regular Grammar）转换器，它配备了一个直观且完整的图形用户界面，使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型（LLM）参数规模的增长，推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长，而KV缓存的内存消耗可能高达数十GB（例如Llama2-7B处理100K token时需50GB内存&a…...
HashMap中的put方法执行流程（流程图）
1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中，其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下： 初始判断与哈希计算： 首先，putVal 方法会检查当前的 table（也就…...
sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求，并检查收到的响应。它以以下模式之一…...