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

re:从0开始的CSS学习之路 11. 盒子垂直布局

news 文章来源：https://blog.csdn.net/qq_40394751/article/details/136100344 2024/9/22 17:35:32

1. 盒子的垂直布局的注意

  1. 若两个“相邻”垂直摆放的盒子，上面盒子的下外边距与下面盒子的上外边距会发生重叠，称为外边距合并
    若合并后，外边距会选择重叠外边距的较大值

  2. 若两个盒子具有父子关系，则两个盒子的上外边距会发生重叠，若改变盒子的上外边距，父子盒子都会随之移动位置
    三种解决办法：
    1. 可以为父元素添加边框
    2. 可以为父元素添加内边距
    3. 为父元素添加overflow: hidden;
    学习完浮清除动元素的最终解决方案：

    .clearfix::after,
.clearfix::before {content: "";display: table;clear: both;
}

示例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>div {width: 200px;height: 200px;}/* .box1 {background-color: #c7edcc;margin-bottom: 300px;}.box2 {background-color: #fde6e0;margin-top: 200px;} */.clearfix::after,.clearfix::before {content: "";display: table;clear: both;}.father {background-color: #c7edcc;/* border: 1px solid #000; *//* padding: 1px; *//* overflow: hidden; */}.son {width: 100px;height: 100px;background-color: #fde6e0;margin-top: 100px;}
</head><body><div class="father clearfix"><div class="son"></div></div><!-- <div class="box1"></div><div class="box2"></div> -->
</body></html>

相关文章：

re:从0开始的CSS学习之路 11. 盒子垂直布局

1. 盒子的垂直布局的注意 若两个“相邻”垂直摆放的盒子&#xff0c;上面盒子的下外边距与下面盒子的上外边距会发生重叠&#xff0c;称为外边距合并 若合并后&#xff0c;外边距会选择重叠外边距的较大值 若两个盒子具有父子关系&#xff0c;则两个盒子的上外边距会发生重叠&…...

编程日记 2024/2/17 1:04:13

Kindling-OriginX 如何集成 DeepFlow 的数据增强网络故障的解释力

DeepFlow 是基于 eBPF 的可观测性开源项目&#xff0c;旨在为复杂的云基础设施及云原生应用提供深度可观测性。DeepFlow 基于 eBPF 采集了精细的链路追踪数据和网络、应用性能指标&#xff0c;其在网络路径上的全链路覆盖能力和丰富的 TCP 性能指标能够为专业用户和网络领域专家…...

编程日记 2024/2/17 1:03:13

轻松掌握Jenkins执行远程window的Jmeter接口脚本

Windows环境&#xff1a;10.1.2.78 新建与配置节点 【系统管理】—【管理节点】—【新建节点】输入节点名称&#xff0c;勾选“dumb slave”&#xff0c;点击ok 按如上配置&#xff1a; 说明&#xff1a; Name&#xff1a;定义slave的唯一名称标识&#xff0c;可以是任意字…...

编程日记 2024/2/17 1:02:12

UI文件原理

使用UI文件创建界面很轻松很便捷&#xff0c;他的原理就是每次我们保存UI文件的时候&#xff0c;QtCreator就自动帮我们将UI文件翻译成C的图形界面创建代码。可以通过以下步骤查看代码 到工程编译目录&#xff0c;一般就是工程同级目录下会生成另一个编译目录&#xff0c;会找到…...

编程日记 2024/2/17 1:01:11

OS设备管理

设备管理 操作系统作为系统资源的管理者&#xff0c;其提供的功能有&#xff1a;处理机管理、存储器管理、文件管理、设备管理。其中前三个管理都是在计算机的主机内部管理其相对应的硬件。 I/O设备 I/O即输入/输出。I/O设备即可以将数据输入到计算机&#xff0c;或者可以接收…...

编程日记 2024/2/17 0:59:09

Matlab绘图经典代码大全：条形图、极坐标图、玫瑰图、填充图、饼状图、三维网格云图、等高线图、透视图、消隐图、投影图、三维曲线图、函数图、彗星图

学会 MATLAB 中的绘图命令对初学者来说具有重要意义，主要体现在以下几个方面： 1. 数据可视化。绘图命令是 MATLAB 中最基本也是最重要的功能之一，它可以帮助初学者将数据可视化，更直观地理解数据的分布、变化规律和趋势。通过绘制图表，可以快速了解数据的特征，从而为后续…...

编程日记 2024/2/17 0:57:07

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

MEMS技术 微机电系统&#xff08;MEMS, Micro-Electro-Mechanical System&#xff09;&#xff0c;也叫做微电子机械系统、微系统、微机械等&#xff0c;指尺寸在几毫米乃至更小的高科技装置。微机电系统其内部结构一般在微米甚至纳米量级&#xff0c;是一个独立的智能系统。 微…...

编程日记 2024/2/17 0:54:05

MySQL 基础知识（一）之数据库和 SQL 概述

目录 1 数据库相关概念 2 数据库的结构 ​3 SQL 概要 4 SQL 的基本书写规则 1 数据库相关概念 数据库是将大量的数据保存起来&#xff0c;通过计算机加工而成的可以进行高效访问的数据集合数据库管理系统&#xff08;DBMS&#xff09;是用来管理数据库的计算机系统&#xf…...

编程日记 2024/2/17 0:51:02

挑战杯 wifi指纹室内定位系统

简介 今天来介绍一下室内定位相关的原理以及实现方法; WIFI全称WirelessFidelity&#xff0c;在中文里又称作“行动热点”&#xff0c;是Wi-Fi联盟制造商的商标做为产品的品牌认证&#xff0c;是一个创建于IEEE 802.11标准的无线局域网技术。基于两套系统的密切相关&#xff…...

编程日记 2024/2/17 0:48:59

Midjourney提示词风格调试测评

在Midjourney中提示词及风格参数的变化无疑会对最终的作品产生影响&#xff0c;那影响具体有多大&#xff1f;今天我我们将通过一个示例进行探究。 示例提示词&#xff1a; 计算机代码海洋中的黄色折纸船&#xff08;图像下方&#xff09;风格参考:金色长发的女人&#xff0c…...

编程日记 2024/2/17 0:44:54

Codeforces Round 926 (Div. 2)(A~C)

A. Sasha and the Beautiful Array 分析&#xff1a;说实话&#xff0c;打比赛的时候看到这题没多想&#xff0c;过了一下样例发现将数组排序一下就行&#xff0c;交了就过了。刚刚写题解反应过来&#xff0c;a2-a1a3-a2.....an-a(n-1) an - a1&#xff0c;所以最后结果只取决…...

编程日记 2024/2/17 0:38:48

Godot 游戏引擎个人评价和2024年规划(无代码)

文章目录 前言Godot C# .net core 开发简单评价Godot相关网址可行性 Godot(GDScirpt) Vs CocosGodot VS UnityUnity 的裁员Unity的股票Unity的历史遗留问题&#xff1a;Mono和.net core.net core的开发者&#xff0c;微软 个人的独立游戏Steam平台分成说明独立游戏的选题美术风…...

编程日记 2024/2/17 0:35:45

Win11关闭Windows Defender实时保护，暂时关闭和永久关闭方法 | Win10怎么永久关闭Windows Defender实时保护

文章目录 1. 按2. 暂时关闭Windows Defender实时保护3. 永久关闭实时保护 1. 按 开启Windows Defender实时保护有时候会导致系统变得异常卡顿&#xff0c;严重影响系统的流畅度&#xff0c;并且由于会有几率错误拦截和查杀我们的正常操作&#xff0c;所以还会导致我们的程序无…...

编程日记 2024/2/17 0:34:45

C# CAD2016 宗地生成界址点，界址点编号及排序

1 、界址点起点位置C# CAD2016 多边形顶点按方向重新排序 2、 界址点顺时针逆时针走向 C# CAD2016 判断多边形的方向正时针或逆时针旋转 3、块文件插入 //已知块文件名称 GXGLQTC //块文件需要插入的坐标点 scaledPoint// 插入块到当前图纸中的指定位置ObjectId newBlockId;B…...

编程日记 2024/2/17 0:33:42

[ai笔记7] google浏览器ai学习提效定制优化+常用插件推荐

欢迎来到文思源想的ai空间&#xff0c;这是技术老兵重学ai以及成长思考的第7篇分享&#xff01; 工欲善其事必先利其器&#xff0c;为了ai学习的效能提升&#xff0c;放假期间对google浏览器做了一次系统整改&#xff0c;添加了一些配置和插件&#xff0c;这里既有一些显示、主…...

编程日记 2024/2/17 0:31:40

联想thinkpad-E450双系统升级记

早期笔记本联想thinkpad-E450双系统 大约16年花4000多大洋&#xff0c;买了一台thinkpad-E450屏幕是16寸本&#xff0c;有AMD独立显卡&#xff0c;i5cpu&#xff0c;4G内存。 . 后来加了一个同型号4G内存组成双通道&#xff0c; . 加了一个三星固态500G&#xff0c; . 换了一个…...

编程日记 2024/2/17 0:28:37

Mysql运维篇（四） Xtarbackup--备份与恢复练习

一路走来&#xff0c;所有遇到的人&#xff0c;帮助过我的、伤害过我的都是朋友&#xff0c;没有一个是敌人。如有侵权&#xff0c;请留言&#xff0c;我及时删除&#xff01; 前言 xtrabackup是Percona公司CTO Vadim参与开发的一款基于InnoDB的在线热备工具&#xff0c;具有…...

编程日记 2024/2/17 0:24:34

vue3 封装一个通用echarts组件

实现这个组件需要引入echarts和vue-echarts插件&#xff0c;使用vue-echarts是因为它帮我们封装了一些很常用的功能&#xff0c;比如监听页面resize后重新渲染功能&#xff0c;本次组件只使用到了autoresize配置&#xff0c;其它可以根据官方文档按需选配 https://github.com/…...

编程日记 2024/2/17 0:17:27

安装 Windows Server 2003

1.镜像安装 镜像安装:Windows Server 2003 2.安装过程(直接以图的形式呈现) 按Enter(继续),继续后F8继续 直接Enter安装 下一步 秘钥:GM34K-RCRKY-CRY4R-TMCMW-DMDHM 等待安装成功即可...

编程日记 2024/2/17 0:15:25

在STM32中使用DMA进行SD卡读写操作的实现方法

在STM32中&#xff0c;使用DMA进行SD卡的读写操作可以提高数据传输的速度和效率。下面是在STM32中使用DMA进行SD卡读写操作的实现方法&#xff1a; ✅作者简介&#xff1a;热爱科研的嵌入式开发者&#xff0c;修心和技术同步精进 ❤欢迎关注我的知乎&#xff1a;对error视而不见…...

编程日记 2024/2/17 0:10:19

StringBuilder/StringBuffer类（Java）

StringBuilder/StringBuffer类 当对字符串进行修改的时候&#xff0c;使用 StringBuffer / StringBuilder 类更方便。和 String 类不同的是&#xff0c;StringBuffer 和 StringBuilder 类的对象能够被多次的修改&#xff0c;并且不产生新的未使用对象。方法类似 public class…...

编程日记 2024/2/17 0:09:17

SQL的1999语法

目录 交叉连接 实现交叉连接 自然连接 实现自然连接&#xff08;实际上就是内连接&#xff09; ON和USING 使用自然连接时要求两张表的字段名称相同&#xff0c;但是如果不相同或者两张表中有两组字段是重名,这时就要利用 ON 子句指定关联条件&#xff0c;利用 USING 子句…...

编程日记 2024/2/17 0:05:14

【AIGC】Stable Diffusion安装包

Stable Diffusion 的安装教程通常分为以下几个步骤&#xff1a; 一、安装 Python&#xff1a; 确保您的系统中已经安装了 Python&#xff0c;并且版本符合 Stable Diffusion 的要求。通常情况下&#xff0c;Python 版本应为 3.6 或更高版本。您可以从 Python 官方网站下载并安…...

编程日记 2024/2/16 23:55:03

C++：迭代器的封装思想

C&#xff1a;迭代器的封装思想 list迭代器实现反向迭代器实现 本博客将通过实现list的迭代器&#xff0c;以及它的反向迭代器&#xff0c;来帮助大家理解迭代器的底层逻辑&#xff0c;以及封装思想。 list迭代器实现 迭代器是一个遍历容器的工具&#xff0c;其可以通过自增自…...

编程日记 2024/2/16 23:54:02

飞天使-k8s知识点17-kubernetes实操2-pod探针的使用

文章目录 探针的使用容器探针启动实验1-启动探针的使用-startupprobeLiveness Probes 和 Readiness Probes演示若存在started.html 则进行 探针的使用 kubectl edit deploy -n kube-system corednslivenessprobe 的使用 livenessProbe:failureThreshold: 5httpGet:path: /heal…...

编程日记 2024/2/16 23:53:01

tee漏洞学习-翻译-3：TrustZone exploit for MSM8974

原文&#xff1a;http://bits-please.blogspot.com/2015/08/full-trustzone-exploit-for-msm8974.html 在这篇博文中&#xff0c;我们将介绍利用上一篇文章中描述的 TrustZone 漏洞的完整过程。 在开发此漏洞时&#xff0c;我只使用了我值得信赖的&#xff08;个人&#xff0…...

编程日记 2024/2/16 23:50:58

rust递归遍历磁盘目录及文件

Std库实现 //遍历dir目录&#xff0c;找出修改日期距离当前超过age天的文件名称&#xff0c;存入file_list中 fn visit_dir(dir: &Path, file_list: &mut Vec<String>, age: u64) -> io::Result<()> {if dir.is_dir() {for entry in fs::read_dir(dir)…...

编程日记 2024/2/16 23:49:57

C语言每日一题（56）平衡二叉树

力扣网 110 平衡二叉树 题目描述 给定一个二叉树&#xff0c;判断它是否是高度平衡的二叉树。 本题中&#xff0c;一棵高度平衡二叉树定义为&#xff1a; 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1 。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,…...

编程日记 2024/2/16 23:47:55

Flutter Android开发 梳理Google Material Design颜色体系

前言 做安卓开发&#xff08;Kotlin语言&#xff09;&#xff0c;Flutter开发的人员应该都听说过谷歌一直推崇的Material Design&#xff0c;而Material Design Color是其推崇的颜色体系&#xff0c;具体来说&#xff0c;Material Design Color是一套旨在帮助设计师和开发者创…...

编程日记 2024/2/16 23:45:53

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

目录&#xff1a; 第一题&#xff1a;Java 创建对象有哪⼏种⽅式&#xff1f;第二题 .Integer a 127&#xff0c;Integer b 127&#xff1b;Integer c 128&#xff0c;Integer d 128&#xff1b;相等吗?第三题.Object 类的常⻅⽅法?第四题 List和Set的区别第五题 ArrayList和…...

编程日记 2024/2/16 23:40:49

c++ STL系列——（五）map

目录 引言 特点 包含头文件 基本特性 基本操作 插入元素 访问元素 移除元素 检查是否包含某个键 获取元素数量 高级特性 迭代器 自定义比较函数 实际应用 统计字符出现次数 缓存最近访问的元素 总结 引言 在C中&#xff0c;标准模板库&#xff08;STL&#xf…...

编程日记 2024/2/16 23:38:47

Huggingface 文档翻译完毕

Accelerate 0.27 中文文档音频课程文档AutoTrain 中文文档AWS 中文文档竞赛中文文档Diffusers 0.26 中文文档深度强化学习课程文档数据集服务器中文文档Datasets 2.17 中文文档 Evaluate 0.4 中文文档Huggingface.js 中文文档Hub 中文文档Hub 客户端库 JS 0.20 中文文档推理 AP…...

编程日记 2024/2/16 23:34:44

C++中类的6个默认成员函数 【拷贝构造函数】

文章目录 拷贝构造函数的使用拷贝构造对于自定义类型【浅拷贝】深拷贝拷贝构造函数典型调用场景 拷贝构造函数的使用 在前几章学习对象的时候&#xff0c;我们有的时候需要一个与已存在对象一某一样的新对象 那在创建对象时&#xff0c;可否创建一个与已存在对象一某一样的新对…...

编程日记 2024/2/16 23:33:42

【前端高频面试题--Vuex下篇】

&#x1f680; 作者 &#xff1a;“码上有前” &#x1f680; 文章简介 &#xff1a;前端高频面试题 &#x1f680; 欢迎小伙伴们 点赞&#x1f44d;、收藏⭐、留言&#x1f4ac;前端高频面试题--Vuex篇 往期精彩内容Vuex 的原理Vuex中action和mutation的区别Vuex 和 localStor…...

编程日记 2024/2/16 23:25:34

MySQL性能调优篇(4)-查询语句的优化与重构

MySQL数据库查询语句的优化与重构 MySQL是一种常用的关系型数据库管理系统&#xff0c;广泛应用于Web开发中。在实际应用中&#xff0c;对数据库查询语句的优化和重构是提高应用性能和响应速度的重要手段。本文将介绍一些常见的优化技巧和重构方法&#xff0c;帮助开发者提高数…...

编程日记 2024/2/16 23:22:30

LInux、源码编译安装

步骤&#xff1a; 步骤1&#xff1a;安装开发工具gcc与make&#xff0c;释放源代码至指定目录 yum -y install gcc make 步骤2&#xff1a;tar解包&#xff0c;释放源代码至指定目录 tar -xf /root/tools.tar.gz -C /usr/local 步骤3&#xff1a;./configure 配置&#xff0c;…...

编程日记 2024/2/16 23:14:20

wordpress好的网站主题

有什么好的网站主题&#xff0c;都分享在这里了。 蓝色风格的wordpress模板&#xff0c;好的wordpress网站主题&#xff0c;需要既好看&#xff0c;又好用。 https://www.zhanyes.com/qiye/6305.html 血红色的好看的wordpress主题&#xff0c;布局经典&#xff0c;设计好的&am…...

编程日记 2024/2/16 23:13:19

【Java多线程】对进程与线程的理解

目录 1、进程/任务&#xff08;Process/Task&#xff09; 2、进程控制块抽象(PCB Process Control Block) 2.1、PCB重要属性 2.2、PCB中支持进程调度的一些属性 3、 内存分配 —— 内存管理&#xff08;Memory Manage&#xff09; 4、线程&#xff08;Thread&#xff09;…...

编程日记 2024/2/16 23:10:15

C# CAD交互界面-自定义面板集-查找定位（六）

运行环境 vs2022 c# cad2016 调试成功 一、代码说明 1. 类成员变量声明&#xff1a; List<ObjectId> objectIds new List<ObjectId>(); // 用于存储AutoCAD实体对象的ObjectId列表 private static Autodesk.AutoCAD.Windows.PaletteSet _ps2; // 自定义浮动面板…...

编程日记 2024/2/16 23:06:10

5.7 BCC工具之disksnoop.py解读

一，disksnoop.py简介 disksnoop工具用于追踪块设备的I/O操作的延迟，它会在每次I/O执行完成后打印一行摘要信息。我们根据这些摘要日志，来分析当前的I/O操作是否存在延迟，以判断I/O是否达到了瓶颈。 二，代码示例 #!/usr/bin/python # # disksnoop.py Trace block device…...

编程日记 2024/2/16 23:05:09

QT：实现图片选择器

一、效果图 二、用到的类 qApp&#xff1a;可以快速获取到项目目录位置。 QSettings &#xff1a;编写config文件&#xff0c;记录上次打开图片的位置&#xff0c;下次打开图片会从上次的位置查找图片。 QPixmap&#xff1a;用于图片的缩放&#xff0c;防止图片过小&#xff0…...

编程日记 2024/2/16 23:03:07

LLM大模型相关问题汇总---包括问题与答案

一、基础篇 1. 目前主流的开源模型体系有哪些&#xff1f; - Transformer体系&#xff1a;由Google提出的Transformer模型及其变体&#xff0c;如BERT、GPT等。 - PyTorch Lightning&#xff1a;一个基于PyTorch的轻量级深度学习框架&#xff0c;用于快速原型设计和实验…...

编程日记 2024/2/16 23:01:06

自动化测试定位不到元素怎么办？

1.动态id定位不到元素 分析原因&#xff1a;每次打开页面&#xff0c;ID都会变化。用ID去找元素&#xff0c;每次刷新页面ID都会发生变化。 解决方案&#xff1a;推荐使用xpath的相对路径方法或者cssSelector查找到该元素。 2.iframe原因定位不到元素 分析原因&#xff1a;…...

编程日记 2024/2/16 23:00:04

1 scala集合-数组

1 定长数组 定长数组&#xff0c;是指数组长度不可变。定义定长数组的方法有如下两种&#xff1a; 方法1&#xff1a; var/val variable_name new Array[元素类型](数组长度) // 通过制定长度定义例如&#xff0c;定义一个长度为20的Int 类型数组。 scala> val a new …...

编程日记 2024/2/16 22:58:02

双场板功率GaN HEMT电容模型以精确模拟开关行为

标题&#xff1a;Capacitance Modeling in Dual Field-Plate Power GaN HEMT for Accurate Switching Behavior&#xff08;TED.16年&#xff09; 摘要 本文提出了一种基于表面电位的紧凑模型&#xff0c;用于模拟具有栅极和源极场板&#xff08;FP&#xff09;结构的AlGaN/G…...

编程日记 2024/2/16 22:52:57

OpenCV Mat实例详解 四

OpenCV Mat实例详解三中详细介绍来了OpenCV Mat类的公有静态成员函数&#xff0c;下面介绍OpenCV Mat类的其他常用成员函数。 OpenCV Mat类常用成员函数 Mat & adjustROI (int dtop, int dbottom, int dleft, int dright)&#xff1b; dtop ROI 上边界移动值&#xff0c;如…...

编程日记 2024/2/16 22:50:55

Fluke ADPT 连接器新增对福禄克万用 Fluke 106 的支持

所需设备&#xff1a; 1、Fluke ADPT连接器&#xff1b; 2、Fluke 106&#xff1b; Fluke 106 拆机图&#xff1a; 显示界面如下图&#xff1a; 并且可以将波形导出到EXCEL: 福禄克万用表需要自己动手改造&#xff01;&#xff01;&#xff01;...

编程日记 2024/2/16 22:41:46

算法-3-基本的数据结构

单双链表 1.单链表双链表如何反转 import java.util.ArrayList; import java.util.List;public class Code01_ReverseList {public static class Node {public int value;public Node next;public Node(int data) {value data;}}public static class DoubleNode {public int…...

编程日记 2024/2/16 22:38:43

探秘Java反射：灵活编程的利器

前言 大家好&#xff0c;我是chowley&#xff0c;不知道大家在学习Java的过程中有没有听过反射的概念&#xff0c;今天我来总结一下我心中的Java反射。 在Java编程中&#xff0c;反射是一种强大的工具&#xff0c;它允许程序在运行时检查和操作类、方法、属性等&#xff0c;而…...

编程日记 2024/2/16 22:35:41

记录 | ubuntu pyqt5 pycharm配置

Ubuntu16.04pycharmpyqt5安装与配置_ubuntu pycharm pyqt5-CSDN博客pycharm激活码 6ZUMD7WWWU-eyJsaWNlbnNlSWQiOiI2WlVNRDdXV1dVIiwibGljZW5zZWVOYW1lIjoiSmV0cyBHcm91cCIsImFzc2lnbmVlTmFtZSI6IiIsImFzc2lnbmVlRW1haWwiOiIiLCJsaWNlbnNlUmVzdHJpY3Rpb24iOiIiLCJjaGVja0NvbmN…...

编程日记 2024/2/16 22:34:40