作为一名跨专业的前端来说,这个真是一种无以言表的滋味,从搞建筑的到搞电脑的。。。。你懂得。。
这是我自学前端大概半年的基础,如今姑且算是入门了。为了丰富瓶颈就去报了个就业班。而其中有一个题目是研究正常盒子与怪异盒子的比对。于是。。。。
第一个是正常盒子模型,对其用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之前一个效果。。。卒。。此问题我研究了太久,先暂时记录,待我后来牛逼时我再回来解决尔等。。。。。当然。。我真心希望能有伟大的前端大神指教一下。。这些诡异事件背后的种种。。。