外边距的折叠之移盒子

最新推荐文章于 2025-12-14 22:21:56 发布
原创 最新推荐文章于 2025-12-14 22:21:56 发布 · 238 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #html5

父子元素/相邻垂直方向折叠的处理

移盒子：
第一步
(1)body里面直接：
.div3>.div4
(2) style里设置好两个盒子的宽度和高度和颜色；
在这里插入图片描述
第二步
把box3（大盒子）的上内边距设100px[padding-top:100px]在这里插入图片描述
而不是设box4（小盒子）的上内边距，像这样
在这里插入图片描述
第三步
然后把box3（大盒子）的height缩小为100px.小盒子被移到了下面
在这里插入图片描述

CSS3学习笔记总结，你值得拥有（呕心沥血之作，涵盖CSS3所有知识点）
孙叫兽的博客
08-21 4189
注意：本文演示的运行结果使用的是在线编译器，只显示body里面的内容，大家可以用浏览器进行查看完整效果包含head。 简介 CSS3已完全向后兼容，所以你就不必改变现有的设计。浏览器将永远支持CSS2。 CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。 一些最重要CSS3模块如下： 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面 边框 用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。
Html5 + Css3笔记详细汇总大全
weixin_50637054的博客
04-10 8207
Html5 + Css3笔记详细汇总大全
两个盒子外边距取较大值
weixin_30892987的博客
04-03 585
情景：两个盒子，第一个盒子设置100px的下外边距，第二个盒子设置200px的上外边距，试问两个盒子相差多少px？ <body> <div class="box1">第一个盒子设置100px的下外边距</div> <div class="box2">第二个盒子设置200px的上外边距</div> </bo...
P5-垂直方向布局-高度溢出-overflow-外边距-外边距折叠原理-父子元素外边距折叠-内联元素的盒模型-默认样式
LXMXHJ的博客
03-22 427
文章目录垂直方向布局高度产生溢出现象关于溢出采用overflow处理溢出内容外边距外边距折叠现象外边距折叠原理父子元素外边距的折叠文档流内联元素的盒模型displayvisibility默认样式块和内联元素练习练习1：下拉菜单练习2练习3练习4 垂直方向布局 宽度width是auto时，子元素会占满父元素； 高度height是auto时，父元素的高度由其内容的高度决定； 垂直方向的等式： margin-top + border-top + padding-top + height + padding-bot
html外边距如何归零,CSS教程：CSS（下）
weixin_39646831的博客
06-05 419
CSS(下)历史CSS 最早被提议是在1994年；最早被浏览器支持是1996年；1996年 W3C 正式推出了CSS1；在这个版本中，已经包含了font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性1998年 W3C 正式推出了CSS2；开始使用样式表结构CSS2.1 是 W3C 现在正在推荐使用的(2004年2月)；在CSS2的基础上略微做了改动，删除了许多诸如text-sh...
BFC清除浮动及外边距重叠
itaffy的博客
10-13 420
记录BFC **定义BFC：**一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 1、float的值不是none。 2、position的值不是static或者relative。 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex 4、overflow的值不是visible BFC是一个独立的布局...
WEB静态页面知识点串整01_盒模型_外边距折叠_选择器
mango660的博客
11-10 1091
人总会被某一瞬间的情感和生活瞬间点醒一些纠结了好久没有答案的事情。 WEB静态页面 文章目录WEB静态页面1. HTML（超文本标记语言）1.1 标记的属性和规范1.2 PS测量2. 盒模型3. 元素的种类 前端： 狭义：前端工程师使用HTML\CSS\JS等专业技能和工具将产品UI设计稿是现成网站产品 广义：所有用户终端产品与视觉和交互有关的部分 网站和网页： 网站指整站（即项目） 网页指单个页面 主页和内页： 主页 index.html 通过主页可以跳转至内页 前端页面根据功能可以分为三层
子元素设置margin-top和margin-bottom无效，外边距折叠导致父元素移动
阿花的博客
03-28 4142
1.为外层元素或者内层元素设置边框（border:1px solid transparent） 2.为外层元素设置overflow:hidden属性 3.为外层元素设置padding值代替内层元素的margin值 4.内层元素或者外层元素浮动：float：left或者设置绝对定位display：absolute，或者改为行内块元素：display:inline-block 5.内层元素加一点点padding值（padding:1px）
【前端学习笔记】10-高度塌陷和外边距重叠原理及解决方案
SevgiliD的博客
06-27 382
1.设置元素的浮动（不推荐） 2.将元素设置为行内块元素（不推荐） 3.将元素的overflow值设置成一个非visible的值（ 常用方式：为元素设置overfolow：hidden使其可以包含浮动元素 ）
day04 CSS选择器 盒模型外边距和塌陷问题，元素分类和转换，溢出处理属性。
m0_54022091的博客
09-20 298
1、css选择器进阶(6个) 2、css盒模型--外边距 3、css盒模型外边距塌陷问题 4、元素的分类和转换 5、溢出处理的属性 盒模型：布局思路 盒模型组成 = 外边距margin+边框border+ 内边距padding + 有效内容width,height width,height min-width max-width min-height max-height width:auto ;（不会溢出） width:100%;(会溢出) padding: 撑大盒子 外扩型 W
多个盒子定义不同css,分享6个关于CSS盒模型的面试题，你能答对几个？
weixin_29790771的博客
08-04 693
本篇文章给大家分享6个关于CSS盒模型的面试题，查漏补缺，看看这六个面试题你能答对几个？是否可以全部答对？对于前端面试来说，css盒模型肯定是必考必问的前端知识点，因为这是CSS基石中非常重要的内容，而且它关联的知识也非常多，那面试中一般都是如何层层递进的提问呢？下面一起来看看吧！1、谈谈你对CSS盒模型的认识？问题简答所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用...
CSS外边距（Margins）与元素显示属性详解
### CSS 外边距（Margins）与元素显示属性详解 #### 1. 外边距（Margins）概述 外边距是元素的一个可选组成部分，它位于元素边框的外部，用于在元素之间或元素与浏览器窗口边缘之间创建空间。合理使用外边距是基于 ...
Web前端 — CSS之盒模型 以及margin负值、塌陷重叠问题
upgrade_bro的博客
08-03 210
CSS前端面试题——盒模型以及margin负值、塌陷重叠问题。在网页中，可以把每个可视的HTML元素看作是一个矩形盒子，也就是一个盛装内容的容器。
div布局关键步骤截图解析
每个div元素在页面中都表现为一个矩形盒子，由内容区（content）、内边距（padding）、边框（border）和外边距（margin）四部分组成。CSS中的`box-sizing`属性决定了元素宽度和高度的计算方式，例如`box-sizing: ...
css3如何引入外部字体
2301_81968528的博客
12-13 142
摘要：CSS3的@font-face属性允许使用外部字体，通过定义字体名称和路径实现。语法为@font-face{font-family:自定义名;src:url(路径);}。示例代码引入"字体家AI北京长城体.ttf"并命名为myfont，使用时在div中设置font-family:myfont即可应用该字体。这种方法解决了电脑缺少特定字体的问题，使网页能显示自定义字体效果。（150字）
999+套计算机毕业设计——基于HTML5+CSS的图书馆借阅管理系统的设计与实现（含源码+部署教程+数据库）
2501_94164441的博客
12-07 1123
随着互联网大趋势的到来，社会的方方面面，各行各业都在考虑利用互联网作为媒介将自己的信息及时有效地推广出去，而其中最好的方式就是建立网络管理系统，并对其进行信息管理。本文旨在设计和实现基于SSM框架和HTML技术的图书馆借阅管理系统。
深入了解Canvas：HTML5时代的绘图利器（二）
最新发布
qq_41422946的博客
12-14 462
本文介绍了Canvas 2D的基础使用方法和绘图技巧。主要内容包括：1）创建画布的基本HTML结构和JavaScript初始化；2）Canvas坐标系说明，以左上角为原点；3）路径绘制方法，如直线、折线、多边形、矩形和圆形；4）文本绘制及相关样式设置，包括字体、对齐方式等。文章通过代码示例展示了如何使用beginPath、moveTo、lineTo、arc等API进行图形绘制，并演示了fillText和strokeText的文本渲染效果。适合初学者快速掌握Canvas 2D的基本绘图功能。
HTML5笔记3 (表格、表单、H5新标签)
rigir的博客
12-10 347
一个有纸、笔、橡皮擦并且能坚持严格行为准则的人，实质上就是一台。
HTML5 History 模式 5分钟讲清楚
jongden的专栏
12-13 760
（相当于“修改当前URL”），不会新增记录。
深度解析CSS margin属性：外边距折叠与应用策略
当子元素没有边框或内边距时，其外边距可能会折叠到父元素的外边距。 3.2.3 元素自身的margin-bottom和margin-top相邻时也会折叠 在某些情况下，如浮动元素或绝对定位元素，元素自身的`margin-bottom`和`margin-top...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值