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

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

news 2026/2/9 15:26:59

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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2026/2/8 4:23:14

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2026/2/8 18:25:56

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2026/2/1 22:23:58

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/12/30 22:56:56

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2026/2/1 6:11:51

聊一聊接口测试的意义有哪些？

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

编程新知 2025/10/14 6:46:13

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2026/2/6 13:42:22

Linux 中如何提取压缩文件 ？

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

编程新知 2026/2/1 5:38:25

实战三：开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

编程新知 2026/2/5 5:03:25

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...

编程新知 2026/2/7 23:29:43