发表于： 2016-12-10 00:02:51
1 1551
今天完成的事情：
1、通过segmantfault了解排序相关的JS程序；
2、写任务3的页面；
3、听万位娜讲关于外边距合并的问题。
明天计划的任务：
继续写任务3，继续看JS方面的内容
遇到的问题：
听小师妹讲外边距合并的问题，感觉收获很多。一起也研究过外边距合并现象的问题。不过只是知道了外边距合并现象发生在垂直方向，相邻元素和父子元素均会产生外边距合并问题。听小师妹讲了后，知道外边距对block元素有效，对inline-block元素无效，对float和绝对定位也不起作用。当本身为空元素时，自身也会发生外边距合并现象。
考虑到前几天更正了对inline-block元素的认识：对相邻元素变相inline属性，对子元素表现为block元素。于是乎，我想到了inline-block的等价表示方法：<span><div></div></span>。这样正好体香了inline-block的特性。但是，今天有遇到疑惑了。因为我在思考为何外边距合并对inline-block元素无效呢：会不会对相邻元素和父类来说，它表现为inline的缘故呢？于是，我做了和实验，设置了一个block元素：grandpa，里面放inline-block元素：father，里面再放了一个block元素：son。其中son和father具有外边距，但是没有发生外边距合并的问题。这下子我就纳闷了：按理说father对son来说是block元素啊，son本身也是block元素，应该会发生外边距合并现象啊，结果却没有，不知道是什么原因，自己到底哪一步出问题了。这是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.margin-box {
width: 9rem;
height: 12rem;
margin: 3rem;
background: #fae900;
border:1px solid black;
}
span{
display: inline-block;
margin:1rem 0;
background-color: green;
}
.red{
width: 2rem;
height:2rem;
margin:1rem 0;
border:2px solid black;
background-color: white;
}
</style>
</head>
<body>
<div><span><div>en</div></span></div>
</div><br><br><br>
<p>思考：如果inline-block元素相对子元素来说呈现block元素，那为何没有和子元素.red发生外边距合并现象呢？</p>
</body>
</html>
收获：
前端果然是个坑，想的越多越纠结啊！
返回列表
评论