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

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

news 2026/3/31 20:28:29

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

OpenCV实战：图像亮度、对比度与锐化的智能调节与优化

1. 图像处理基础概念解析 在开始动手实践之前&#xff0c;我们需要先理解几个关键概念。亮度、对比度和锐化这三个参数就像调节电视画面的三个旋钮&#xff0c;每个旋钮都会对图像产生独特的影响。 亮度&#xff08;Brightness&#xff09;就像房间里的灯光开关。调高亮度&…...

编程新知 2026/3/31 19:43:26

从原型到实战：基于快马生成代码快速开发可用的worldmonitor疫情监控系统

从原型到实战&#xff1a;基于快马生成代码快速开发可用的worldmonitor疫情监控系统 最近在做一个全球疫情数据监控系统的项目&#xff0c;正好用到了InsCode(快马)平台来快速生成基础代码&#xff0c;然后在这个基础上进行二次开发。整个过程非常顺畅&#xff0c;特别是平台的…...

编程新知 2026/3/31 19:43:23

保姆级教程：手把手教你用Python+Control库仿真PLL噪声传递函数

保姆级教程&#xff1a;手把手教你用PythonControl库仿真PLL噪声传递函数 锁相环&#xff08;PLL&#xff09;作为现代电子系统中的核心组件&#xff0c;其噪声特性直接影响通信质量、时钟精度等关键指标。但教科书上复杂的传递函数公式总让人望而生畏——直到你发现用几行Pyth…...

编程新知 2026/3/31 19:16:53

浏览器插件：让Markdown预览效率提升300%的秘密武器

浏览器插件&#xff1a;让Markdown预览效率提升300%的秘密武器 【免费下载链接】markdown-viewer Markdown Viewer / Browser Extension 项目地址: https://gitcode.com/gh_mirrors/ma/markdown-viewer 作为开发者、学生或技术写作者&#xff0c;你是否经常遇到这些困扰…...

编程新知 2026/3/31 19:14:53

告别重复编码：用快马AI一键生成团队协作网盘高效开发框架

最近在开发一个团队协作网盘系统时&#xff0c;发现很多基础功能其实都是重复性工作。比如权限管理、文件版本控制这些模块&#xff0c;每个项目都要从头写一遍。后来尝试用InsCode(快马)平台的AI生成功能&#xff0c;效率提升特别明显。这里分享下我的实践心得&#xff1a; 权…...

编程新知 2026/3/31 18:50:18

从实验室到生活场景：近红外脑成像(fNIRS)如何重塑认知研究边界

1. 从实验室到客厅&#xff1a;fNIRS如何打破认知研究的围墙 十年前我第一次接触近红外脑成像设备时&#xff0c;它还是个需要固定在三脚架上的"庞然大物"&#xff0c;被试必须像雕塑般保持静止。如今看着学生戴着LUMO设备在操场自由活动时采集数据&#xff0c;这种技…...

编程新知 2026/3/31 18:40:11

Linux dmesg实战指南：从内核消息解析到故障排查（附实用技巧与常见问题）

1. 初识dmesg&#xff1a;你的Linux系统健康检查仪 刚接触Linux系统管理时&#xff0c;我总把dmesg当成"高级版系统日志"。直到有次服务器突然宕机&#xff0c;才发现这个命令简直就是系统故障的"黑匣子"。想象一下&#xff0c;当你的电脑突然蓝屏&#xf…...

编程新知 2026/3/31 17:13:04

Zotero中文文献管理终极指南：茉莉花插件一键解决三大痛点

Zotero中文文献管理终极指南&#xff1a;茉莉花插件一键解决三大痛点 【免费下载链接】jasminum A Zotero add-on to retrive CNKI meta data. 一个简单的Zotero 插件&#xff0c;用于识别中文元数据 项目地址: https://gitcode.com/gh_mirrors/ja/jasminum 如果你正在使…...

编程新知 2026/3/31 16:46:23

SpringBoot+Tess4j：轻松实现OCR功能

一、引言二、功能演示三、功能实现1. 描述2. 编码实现四、源码五、结束语一、引言你是否曾遇到过这样的情况&#xff1a;看到一段有用的文本&#xff0c;想要快速复制下来&#xff0c;却只能眼巴巴地盯着屏幕&#xff0c;手动输入&#xff1f;其实&#xff0c;Java 也可以轻松实…...

编程新知 2026/3/31 15:57:36

用STM32F103C8T6和F9P模组DIY一台RTK无人车：从蓝牙遥控到自主导航的保姆级教程

用STM32F103C8T6和F9P模组打造高精度RTK无人车&#xff1a;从零构建到自主导航全流程解析 在创客圈子里&#xff0c;能够自主导航的智能小车一直是热门项目。但传统基于普通GPS的方案定位精度往往在米级徘徊&#xff0c;难以实现真正的精准控制。而将RTK&#xff08;实时动态定…...

编程新知 2026/3/31 15:55:35