发表于： 2019-06-24 23:21:38
1 971
今天完成的事：
今天完成了任务8图片的插入，深度思考margin负值在页面布局中有哪些应用
明天计划的事：
完成任务8和深度思考
遇到的问题：
没遇到什么大问题
收获：
margin负值在页面布局中有哪些应用
MARGIN为负值时产生的影响
1、对于自身的影响
当static(非浮动、非定位）元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向。
但如果你设置margin-bottom/right为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。
如果没有设定width属性，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样。
2、对文档流的影响
元素如果用了margin-left/margin-top时，元素自身会被拉向左/向上进行偏移，效果类似与position：relative。与之不同的是，在其后面的元素会补位，也就是后面的行内元素会紧贴在此元素的之后。
元素如果用了margin-right/margin-bottom时，元素视觉位置不变，但其后（下面/右边）的元素会被拉向此元素，相对此元素进行偏移并覆盖此元素。
3、对浮动元素的影响
负margin会改变浮动元素的显示位置，即使元素写在DOM的后面，也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的，都是利用这个原理实现的。
4、对绝对定位的影响
对于绝对定位元素，负margin会基于其绝对定位坐标再偏移
一、左右列固定，中间列自适应布局
此例适用于左右栏宽度固定，中间栏宽度自适应的布局。由于网页的主体部分一般在中间，很多网页都需要中间列优先加载，而这种布局刚好满足此需求。
HTML：
<div class="main">
<div class="main_body">Main</div> </div> <div class="left">Left</div> <div class="right">Right</div>CSS：
body{ margin:0; padding:0; min-width:600px; }
.main{ float:left; width:100%; }
.main_body{ margin:0 210px; background:#888; height:200px; }
.left,.right{ float:left; width:200px; height:200px; background:#F60; }
.left{ margin-left:-100%; }
.right{ margin-left:-200px; }效果：
项目中经常会使用浮动列表展示信息，为了美观通常为每个列表之间设置一定的间距（margin-right）,当父元素的宽度固定式，每一行的最右端的li元素的右边距就多余了，去除的方法通常是为最右端的li添加class，设置*margin-right:0; *这种方法需要动态判断为哪些li元素添加class。
使用绝对定位将div定位到body的中心，然后使用负margin（content宽高的一半），将div的中心拉回到body的中心，已到达水平垂直居中的效果。
四、去除列表最后一个li元素的border-bottom
列表中我们经常会添加border-bottom值，最后一个li的border-bottom往往会与外边框重合，视觉上不雅观，往往要移除。
五、多列等高
此例关键是给每个框设置大的底部内边距，然后用数值相似的负外边距消除这个高度。这会导致每一列溢出容器元素，如果把外包容器的overflow属性设为hidden，列就在最高点被裁切。
返回列表
评论