菜鸟对margin的疑惑

最新推荐文章于 2022-09-20 11:12:40 发布
最新推荐文章于 2022-09-20 11:12:40 发布
阅读量566 收藏
点赞数
分类专栏： 前端自学经历 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1943206465/article/details/52249391
版权

作为一名跨专业的前端来说，这个真是一种无以言表的滋味，从搞建筑的到搞电脑的。。。。你懂得。。

这是我自学前端大概半年的基础，如今姑且算是入门了。为了丰富瓶颈就去报了个就业班。而其中有一个题目是研究正常盒子与怪异盒子的比对。于是。。。。



第一个是正常盒子模型，对其用flex都是使其居中了，html代码如下

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8"/>
	<title>盒模型</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<style type="text/css">
		
	</style>
</head>
<body>
	<!--正常盒模型-->
	<div class="context_box">
			<table>
				<thead>
					<tr>
						<th>正常盒模型</th>
						<th>设定的宽高size</th>
						<th>margin</th>
						<th>border</th>
						<th>padding</th>
						<th>content</th>
						<th>box</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>红色盒子</td>
						<td>200*200</td>
						<td>25</td>
						<td>25</td>
						<td>25</td>
						<td>200*200</td>
						<td>300*300</td>
					</tr>
					<tr>
						<td>黄色盒子</td>
						<td>150*150</td>
						<td>0</td>
						<td>25</td>
						<td>25</td>
						<td>150*150</td>
						<td>250*250</td>
					</tr>
					<tr>
						<td>绿色盒子</td>
						<td>150*150</td>
						<td>0</td>
						<td>0</td>
						<td>25</td>
						<td>150*150</td>
						<td>200*200</td>
					</tr>
					<tr>
						<td>蓝色盒子</td>
						<td>150*150</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>150*150</td>
						<td>150*150</td>
					</tr>
					<tr>
						<td>图2蓝色盒子</td>
						<td>150*150</td>
						<td>25</td>
						<td>0</td>
						<td>0</td>
						<td>100*150</td>
						<td>100*150</td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="7"><h3>box盒模型大小=content+padding+border</h3></td>
					</tr>
				</tfoot>
			</table>
		<div class="content_box1 flexcenter">
			<div class="con_margin flexcenter">
				<span>200*200 </span>
				
				<div class="con_border flexcenter">
					<span>150*150 </span>
				
					<div class="con_padding flexcenter">
						<span>150*150 </span>
					
						<div class="con_content flexcenter">
							<span>150*150</span>
					
						</div>
					</div>
				</div>
			</div>
		</div>	
		<div class="content_box2 flexcenter">
			<div class="con_margin flexcenter">
				<span>200*200 </span>

				<div class="con_border flexcenter">
					<span>150*150 </span>
	
					<div class="con_padding flexcenter">
						<span>150*150 </span>
				
						<div class="con_content flexcenter">
							<span>150*150 </span>
				
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<!--怪异盒模型-->
	<div class="border_box">
		<table>
				<thead>
					<tr>
						<th>怪异盒模型</th>
						<th>设定的宽高size</th>
						<th>margin</th>
						<th>border</th>
						<th>padding</th>
						<th>content</th>
						<th>box</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>红色盒子</td>
						<td>150*150</td>
						<td>25</td>
						<td>25</td>
						<td>25</td>
						<td>0*50</td>
						<td>100*150</td>
					</tr>
					<tr>
						<td>黄色盒子</td>
						<td>250*250</td>
						<td>0</td>
						<td>25</td>
						<td>25</td>
						<td>150*150</td>
						<td>250*250</td>
					</tr>
					<tr>
						<td>绿色盒子</td>
						<td>300*300</td>
						<td>0</td>
						<td>0</td>
						<td>25</td>
						<td>250*250</td>
						<td>300*300</td>
					</tr>
					<tr>
						<td>蓝色盒子</td>
						<td>350*350</td>
						<td>0</td>
						<td>0</td>
						<td>0</td>
						<td>350*350</td>
						<td>350*350</td>
					</tr>
					<tr>
						<td>图2蓝色盒子</td>
						<td>350*350</td>
						<td>25</td>
						<td>0</td>
						<td>0</td>
						<td>350*350</td>
						<td>350*350</td>
					</tr>
					<tr>
						<td>图2红色盒子</td>
						<td>150*150</td>
						<td>0</td>
						<td>25</td>
						<td>25</td>
						<td>50*50</td>
						<td>150*150</td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="7"><h3>box盒模型大小=content+padding+border</h3></td>
					</tr>
				</tfoot>
			</table>
		<div class="border_box1 flexcenter">
			<div class="bor_content flexcenter">
				<span>350*350</span>
				<div class="bor_padding flexcenter">
					<span>300*300</span>
					<div class="bor_border flexcenter">
						<span>250*250</span>
						<div class="bor_margin flexcenter">
							<span>150*150</span>
						</div>
					</div>
				</div>
			</div>
		</div>	
		<div class="border_box2 flexcenter">
			<div class="bor_content flexcenter">
				<span>350*350</span>
				<div class="bor_padding flexcenter">
					<span>300*300</span>
					<div class="bor_border flexcenter">
						<span>250*250</span>
						<div class="bor_margin flexcenter">
							<span>150*150</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
对正常盒子的理解我是认为其content不包含border与padding，所以设定的width是content的内容，加上的border与padding都会撑大盒子模型。box=content+padding+border。然后margin就是套在盒子外面的嘛。。。我这样认为着。。但是不知道是脑抽还是咋地。我在想如果有一个100*100的div里，我再套个100*100的div并对其加上margin是一种怎样的体验。。。后来我知道了。。。是一种混乱懵逼的感觉。。。。。

请看上图右上角的图片。蓝色区域是宽高150*150，绿色区域是150*150外加25的padding的区域。。。。。如果只是这样。。它会显示如图中左上角的样子，但是当我手残的给蓝色区域加了margin:25px;之后。。。它竟然瘦了，对，就是瘦了。。。它竖直方向不变，水平方向变窄了。这是个什么理。。。。我不知道。我问了人，找了度娘。。听说了一种垂直方向上margin合并的故事，也听说了父元素中第一个子元素的margin-top设置对没有设置border与padding的父元素的影响。。。这里点击打开链接，这个我电脑上搜不到，你们将就看一下。总之。。我以为是垂直方向上 的margin问题。。我就回去研究了一下。。然而，我发现。这样


我又这样


无论为怎么加减垂直方向的margin。。蓝色区块都是顶天立地。。岿然不动。。。所以我总结垂直方向的margin对盒子大小不影响。但是水平方向呢。。。


content随着margin增大越来越小。。直到消失。。。。。


反着减呢。。。结果意外的，它变成150之后，竟然使得其父元素也变瘦了。。。我以为他会随着margin的不断减小，外面所有父元素都会减小的时候，外面不变了。。。这是什么原因呢。。。。。。一开始我以为是因为黄色的父元素设置了border的原因，我果断给绿色的也加了。。。但是



跟没加border之前一个效果。。。卒。。此问题我研究了太久，先暂时记录，待我后来牛逼时我再回来解决尔等。。。。。当然。。我真心希望能有伟大的前端大神指教一下。。这些诡异事件背后的种种。。。


水月夜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
day08
Besides076930的博客
12-24 366
1 盒子模型 1 组成： margin border padding content（width、height） 2 padding 内填充、内边距、 内补白 padding 会撑大盒子，padding区域可以出现背景颜色，（不能出现负值）在边框线里边 一个值代表上下左右，两个值代表上下、左右，三个值代表上、左右、下，四个值代表上、右、下、左（顺时针） 可以单独设置某一个方向：padding-left、right、top、bottom 3 margin 外填充、外边距、外补白 margin会撑
CSS盒模型
Z_TTING的博客
02-22 420
CSS盒模型 盒模型是css的基石。 在css中定义所有的元素都有着像盒子一样的外形和平面空间。 盒模型包含四部分：内容（content）、内边距也称之为补白和填充区（padding）边框（border）外边距（margin） Padding Padding是盒子边框和内容之间的填充区。 作用 它的作用是用来控制父元素于子元素之间的间距，或者用来控制容器与内容之间的间距。 特点 1.元素在使用...
关于padding和margin带来的问题总结
weixin_70199091的博客
09-20 1812
关于padding和margin带来的问题总结，小白总结！
CSS中margin不会撑开盒子
HarryWg的博客
03-27 3441
  之前在上网查margin对盒子大小影响的时候发现全部都是关于“父子盒子同时定义margin-top|bottom，那么父盒子上边会塌陷至与子盒子上边重合”这样的问题，对于其他情况margin对盒子的影响没有涉猎，在此进行测试。   那么在一个盒子内放置两个盒子 <div id="father"> <div id="son1"> </div> <div id="son2"> </div&g
第三章：CSS基础---盒模型、margin补充、溢出属性、单行文本溢出显示省略号、隐藏属性、宽度自适应(自己变化)、高度自适应(自己变化)、高度塌陷
soulcow的博客
07-15 207
img引入的图片会自带底部大约3px的留白block}
菜鸟入门Docker
01-09
菜鸟入门Docker说明一、什么是Docker（1）虚拟机和Linux容器二、Docker用途三、Docker安装（1）设置仓库（2）安装 Docker Engine-Community（3）验证安装成功四、Docker启动与停止（1）启动docker（2）停止docker（3...
Scrapy-菜鸟教程.rar
最新发布
07-05
博文《【Python】自学笔记：Scrapy菜鸟教程》对应的项目包，跟着菜鸟教程一步一步操作得到的成果，有需要的朋友可以下载。
qt菜鸟入门到精通
07-23
资源名称：qt菜鸟入门到精通内容简介： qt菜鸟入门到精通，是一套针对qt爱好者而总结积累的学习经验和学习知识，它的主要作用是将现今用到的各种qt编写的程序进行集合，然后把知识点融汇在实战练习中，来达到速成...
静态页面 常见问题 margin-top塌陷、padding把盒子撑大
weixin_44038506的博客
03-30 1963
一、静态页面 margin-top塌陷解决方法   １.当我们页面布局时，经常会遇见margin-top塌陷问题 　　margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父div包裹着一个div的时候，当给子div设置margin-top属性时，此时只是想让子div的边框距离父div边框有一段距离，而却出现了父div的顶端距离出现了位移，这就是margin-top塌陷的现象...
解决CSS中padding（内边距）margin（外边距）撑大盒子的问题
qq_58671311的博客
07-22 2879
如果使用的时margin（外边距）来书写样式，margin是不会包含到盒子的总宽高中的，margin是会在盒子的外侧撑开，如图，黑色盒子中设置了margin-bottom，这时会在盒子外侧出现边距。在有添加padding（内边距）的样式中添加box-sizingborder-box;...
盒子模型 margin和padding和盒子大小的影响
blithe影子
02-20 6839
margin 是盒子的外边距 padding是盒子的内边距 border是盒子的外边框 它们对盒子的宽度是有影响的，下边举一个例子： 首先是html： <html> <head></head> <style type="text/css"> .div{ width:400px; height:400px; background-...
table中td,th不能设置margin
weixin_30432179的博客
08-07 1068
首先，我们需要知道的是：我们可以对表格table设置margin，而不能设置padding;对单元格td设置padding，而不能设置margin。所以说，我们不能对单元格td设置margin属性来调整单元格与单元格之间的距离，但是我们可以使用一下方法来达到同样的效果。1)设置padding就像刚才所说的那样，我们可以对单元格td设置padding属性来调整单元格之间的间隔td{pad...
CSS3盒模型：解决padding,margin会撑开盒子的问题
weixin_43312083的博客
08-31 4145
解决padding,margin会撑开盒子的问题: box-sizing: border-box ; 1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode 2、box-sizing: border-box 盒子大小为 width 就是说 padding...
关于html <table>标签 中 tbody宽度撑不满
热门推荐
minzhang001的博客
11-16 1万+
table 中使用了display：blok； 将替换成display：table 或 去掉该属性
html body与页面的距离,html - 如何在TBODY元素之间放置间距
weixin_33347467的博客
06-03 995
html - 如何在TBODY元素之间放置间距我有这样一张桌子：footerBody 1Body 1Body 1Body 2Body 2Body 2Body 3Body 3Body 3我想在每个tbody元素之间加一些间距，但填充和边距没有影响。 有任何想法吗？nickf asked 2019-04-14T13:54:04Z11个解决方案66 votes这样的东西会起作用，具体取决于您的浏览器支...
margin的问题
zyl_lyr1019的专栏
11-05 3339
CSS中最重要的概念可以分为三个：浮动，定位，盒模型。 先看下什么是盒模型 盒模型由内容(width,height)，内边距(padding)，边框(border)，外边距(margin)组成。 下面就来看看盒模型中的外边距吧 margin的用法等基本就不多说了，只说一下利用margin实现的一些效果。 1:利用margin实现居中：         一种方法是
菜鸟CAINIAO打印组件升级指南
"商家操作手册10.09主要介绍了菜鸟CAINIAO打印组件的升级与功能优化，旨在提升电商管理效率和准确性。" 本文档是针对电商商家的一份操作手册，重点讲述了菜鸟CAINIAO打印组件的升级及其带来的服务价值。升级后的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值