html从零开始7：文档流、浮动、清除浮动，定位【搬代码】

文档流

1
2
3

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>img{width: 300px;height: 300px;}</style>
</head>
<body><span>我们一起看美女</span><img src="3.jpg" alt=""><p>大家好，我是    p标签</p><img src="3.jpg" alt=""><img src="3.jpg" alt="">
</body>
</html>

4

浮动

4
5

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>img{width: 300px;height: 300px;float: left;}.box1{width: 200px;height: 200px;background-color: aqua;float: right;}.container{width: 400px;height: 400px;background-color: blueviolet;}</style>
</head>
<body><div class="box1"></div><div class="container"></div><img src="3.jpg" alt=""><img src="3.jpg" alt="">
</body>
</html>

6

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>div{width: 300px;height: 300px;float: left;}.box1{background-color: antiquewhite;}.box2{background-color: red;}.box3{background-color: blue;}ul li{float: left;margin: 0 40px;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div><ul><li><a href="#">导航1</a></li><li><a href="#">导航2</a></li><li><a href="#">导航3</a></li></ul>
</body>
</html>

7
8

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.container{width: 700px;height: 700px;background-color: forestgreen;}div{width: 300px;height: 300px;float: left;}.box1{background-color: antiquewhite;}.box2{background-color: red;}.box3{background-color: blue;}ul li{float: left;margin: 0 40px;}</style>
</head>
<body><div class="container"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div><ul><li><a href="#">导航1</a></li><li><a href="#">导航2</a></li><li><a href="#">导航3</a></li></ul>
</body>
</html>

10

清除浮动

9
11
12
13

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.container{width: 500px;/* height: 500px; */background-color: forestgreen;overflow: hidden;clear: both;}.box{width: 100px;height: 100px;background-color: aqua;margin: 5px;float: left;}.test{width: 100px;height: 100px;background-color: blue;clear: both;/*清除浮动影响*/}</style>
</head>
<body><div class="container"><div class="box"></div><div class="box"></div><div class="box"></div><div class="test"></div></div>
</body>
</html>

伪对象

/*伪对象方式*/.container::after{content: "";display: block;clear: both;}

14

定位

15

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>div{width: 200px;height: 200px;background-color: aqua;position: relative;left: 200px;top: 100px;}</style>
</head>
<body><div></div>
</body>
</html>

16
17

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.box1{width: 200px;height: 200px;background-color: aqua;position: absolute;/*absolute 绝对定位*/left: 100px;top: 200px;}.box2{width: 300px;height: 300px;background-color: bisque;}.box3{width: 200px;height: 200px;background-color: darkcyan;position: absolute;/*absolute 绝对定位*/left: 50px;top: 100px;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</body>
</html>

18
19

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.box1{width: 200px;height: 200px;background-color: red;position: fixed;/*固定定位*/right: 100px;bottom: 100px;}.box2{width: 300px;height: 300px;background-color: green;}.box3{width: 200px;height: 200px;background-color: blue;position: absolute;/*绝对定位*/left: 0;top: 0;}h3{height: 200px;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div><h3>好好</h3><h3>好好</h3><h3>好好</h3><h3>好好</h3><h3>好好</h3><h3>好好</h3>
</body>
</html>

20
21
有父级定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.container{width: 200px;height: 200px;background-color: #888;position: relative;/*有父级定位*/margin-left: 100px;}.box1{width: 100px;height: 100px;background-color: rgb(120, 5, 228);position: absolute;left: 50px;top: 50px;}</style>
</head>
<body><div class="container"><div class="box1"></div></div>
</body>
</html>

22
无父级定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.container{width: 200px;height: 200px;background-color: #888;/* position: relative;有父级定位 */margin-left: 100px;}.box1{width: 100px;height: 100px;background-color: rgb(120, 5, 228);position: absolute;left: 50px;top: 50px;}</style>
</head>
<body><div class="container"><div class="box1"></div></div>
</body>
</html>

23
24

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.box1{width: 100px;height: 100px;background-color: rgb(120, 5, 228);position: absolute;z-index: 2;}.box2{width: 200px;height: 200px;background-color: green;position: absolute;z-index: 1;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div></body>
</html>

26

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/683809.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

树莓派4B（Raspberry Pi 4B）使用docker搭建阿里巴巴sentinel服务

树莓派4B（Raspberry Pi 4B）使用docker搭建阿里巴巴sentinel服务

树莓派4B&#xff08;Raspberry Pi 4B&#xff09;使用docker搭建阿里巴巴sentinel服务 由于国内访问不了docker hub&#xff0c;而国内镜像仓库又没有适配树莓派ARM架构的sentinel镜像&#xff0c;所以我们只能退而求其次——自己动手构建镜像。本文基于Ubuntu&#xff0c;Jav…
阅读更多...
猫头虎分享已解决Bug || TypeError: Cannot read property ‘match‘ of undefined

猫头虎分享已解决Bug || TypeError: Cannot read property ‘match‘ of undefined

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …
阅读更多...
c语言操作符（下）

c语言操作符（下）

目录 ​编辑 逗号表达式 下标访问[] 函数调⽤() sizeof 结构成员访问操作符 结构体 结构体声明 直接访问 .成员名 间接访问 结构体指针->成员名 逗号表达式 exp1, exp2, exp3, …expN 运算规则&#xff1a;从左向右依次执⾏。整个表达式的结果是最后⼀个表达…
阅读更多...
第一篇【传奇开心果系列】Python的pyttsx3库技术点案例示例：文本转换语言

第一篇【传奇开心果系列】Python的pyttsx3库技术点案例示例：文本转换语言

传奇开心果短博文系列 系列短博文目录Python的pyttsx3库技术点案例示例系列 短博文目录前言一、pyttsx3主要特点和功能介绍二、pyttsx3文字转语音操作步骤介绍三、多平台支持介绍和示例代码四、多语言支持介绍和示例代码五、自定义语言引擎介绍和示例代码六、调整语速和音量介绍…
阅读更多...
姿态传感器MPU6050模块之陀螺仪、加速度计、磁力计

姿态传感器MPU6050模块之陀螺仪、加速度计、磁力计

MEMS技术 微机电系统&#xff08;MEMS, Micro-Electro-Mechanical System&#xff09;&#xff0c;也叫做微电子机械系统、微系统、微机械等&#xff0c;指尺寸在几毫米乃至更小的高科技装置。微机电系统其内部结构一般在微米甚至纳米量级&#xff0c;是一个独立的智能系统。 微…
阅读更多...
[Vue warn]: Duplicate keys detected: ‘1‘. This may cause an update error.

[Vue warn]: Duplicate keys detected: ‘1‘. This may cause an update error.

[Vue warn]: Duplicate keys detected: ‘1‘. This may cause an update error.——> Vue报错&#xff0c;key关键字不唯一&#xff1a; 解决办法&#xff1a;修改一下重复的id值&#xff01;&#xff01;&#xff01;
阅读更多...
IMX6ULL移植U-Boot 2022.04

IMX6ULL移植U-Boot 2022.04

目录 目录 1.编译环境以及uboot版本 2.默认编译测试 3.uboot中新增自己的开发板 3.编译测试 4.烧录测试 5.patch文件 1.编译环境以及uboot版本 宿主机Debian12u-boot版本lf_v2022.04 ; git 连接GitHub - nxp-imx/uboot-imx: i.MX U-Boot交叉编译工具gcc-arm-10.3-2021.0…
阅读更多...
Excel导入预览与下载

Excel导入预览与下载

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; Excel导入预览与下载 preview Controller PostMapping("preview")ApiOperation("上传拒付预警预览")public Result<List<ResChargebackWa…
阅读更多...
CFS三层靶机

CFS三层靶机

参考博客&#xff1a; CFS三层内网靶场渗透记录【详细指南】 - FreeBuf网络安全行业门户 CFS三层靶机搭建及其内网渗透【附靶场环境】 | TeamsSix CFS三层网络环境靶场实战 - PANDA墨森 - 博客园 (cnblogs.com) CFS三层靶机实战--内网横向渗透 - 知乎 (zhihu.com) CFS靶机…
阅读更多...
使用正点原子i.mx6ull加载字符驱动模块chrdevbase

使用正点原子i.mx6ull加载字符驱动模块chrdevbase

搞了整整两天才整好&#xff01;踩了不少坑&#xff0c;记录一下 0. 操作基础 操作前需要设置好如下配置 1.开发板和ubuntu能够互相ping通 2.开发板的SD卡中安装好uboot&#xff0c;我用的V2.4版本的&#xff0c;其他版本应该也行 3.准备材料 01_chrdevbase文件 linux-im…
阅读更多...
HCIA-HarmonyOS设备开发认证V2.0-轻量系统内核内存管理-静态内存

HCIA-HarmonyOS设备开发认证V2.0-轻量系统内核内存管理-静态内存

目录 一、内存管理二、静态内存2.1、静态内存运行机制2.2、静态内存开发流程2.3、静态内存接口2.4、实例2.5、代码分析&#xff08;待续...&#xff09;坚持就有收货 一、内存管理 内存管理模块管理系统的内存资源&#xff0c;它是操作系统的核心模块之一&#xff0c;主要包括…
阅读更多...
蓝桥杯每日一题------背包问题（三）

蓝桥杯每日一题------背包问题（三）

前言 之前求的是在特点情况下选择一些物品让其价值最大&#xff0c;这里求的是方案数以及具体的方案。 背包问题求方案数 既然要求方案数&#xff0c;那么就需要一个新的数组来记录方案数。动态规划步骤如下&#xff0c; 定义dp数组 第一步&#xff1a;缩小规模。考虑n个物品…
阅读更多...
Spring Boot 笔记 017 创建接口_新增文章

Spring Boot 笔记 017 创建接口_新增文章

1.1实体类增加校验注释 1.1.1 自定义校验 1.1.1.1 自定义注解 package com.geji.anno;import com.geji.validation.StateValidation; import jakarta.validation.Constraint; import jakarta.validation.Payload; import jakarta.validation.constraints.NotEmpty;import jav…
阅读更多...
Qt：自定义信号，信号emit，传参问题，信号槽与moc

Qt：自定义信号，信号emit，传参问题，信号槽与moc

一、自定义信号&#xff0c;信号emit 1、自定义信号 在头文件中 加入signals&#xff1a; 就可以编写信号 2、emit emit的作用是通知信号发生 二、跨UI控件传参 每次按Dialog添加按钮主控件数字会增长 // .h private slots:void on_btnAdd_clicked(); signals:void sign…
阅读更多...
《区块链公链数据分析简易速速上手小册》第8章：实战案例研究（2024 最新版）

《区块链公链数据分析简易速速上手小册》第8章：实战案例研究（2024 最新版）

文章目录 8.1 案例分析&#xff1a;投资决策支持8.1.1 基础知识8.1.2 重点案例&#xff1a;股票市场趋势预测准备工作实现步骤步骤1: 加载和准备数据步骤2: 特征工程步骤3: 训练模型步骤4: 评估模型 结论 8.1.3 拓展案例 1&#xff1a;基于情感分析的投资策略准备工作实现步骤步…
阅读更多...
C# winfrom中NPOI操作EXCEL

C# winfrom中NPOI操作EXCEL

前言 1.整个Excel表格叫做工作表&#xff1a;WorkBook&#xff08;工作薄&#xff09;&#xff0c;包含的叫页&#xff08;工作表&#xff09;&#xff1a;Sheet&#xff1b;行&#xff1a;Row&#xff1b;单元格Cell。 2.忘了告诉大家npoi是做什么的了&#xff0c;npoi 能够读…
阅读更多...
每日五道java面试题之java基础篇（八）

每日五道java面试题之java基础篇（八）

目录&#xff1a; 第一题.CopyOnWriteArrayList的底层原理是怎样的第二题.Java中有哪些类加载器第三题. 说说类加载器双亲委派模型第四题. GC如何判断对象可以被回收第五题.JVM中哪些是线程共享区 第一题.CopyOnWriteArrayList的底层原理是怎样的 ⾸先CopyOnWriteArrayList内部…
阅读更多...
游戏开发的编程算不算是IT行业中难度最大的？

游戏开发的编程算不算是IT行业中难度最大的？

游戏开发的编程算不算是IT行业中难度最大的&#xff1f; 游戏作为当今数字娱乐领域中最引人入胜的产品之一&#xff0c;其背后所依托的程序开发能力也备受关注。作为游戏开发过程中的“幕后英雄”&#xff0c;编程工作的难易程度直接影响到游戏的质量体验和开发效率。 关于游…
阅读更多...
Python dict函数

Python dict函数

Python中的字典&#xff08;dict&#xff09;是一种非常重要且灵活的数据结构&#xff0c;它提供了键值对的存储和访问机制。字典函数&#xff08;dict()&#xff09;作为创建字典的工具之一&#xff0c;可以从多种数据结构中创建字典对象。在本文中&#xff0c;将深入探讨dict…
阅读更多...
算法刷题:有效三角形个数

算法刷题:有效三角形个数

有效三角形个数 .题目链接题目详情算法原理补充知识点双指针:对撞指针 我的答案 . 题目链接 有效三角形个数 题目详情 算法原理 补充知识点 有效三角形需要满足的条件: ab>cac>bbc>a 其实在满足1的时候,c是最大的,那么2和3是显然成立的,因此我们可以这样解题: 对…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023