负margin原理及应用
margin 可以改变元素的可视尺寸，但和padding 是互补的
padding: 元素设定了width 或者保持 "包裹性"的时候 会改变元素的尺寸
marign: 与padding相反，元素设定了width 或者保持 "包裹性"的时候 margin对尺寸没有影响
只有元素是"充分利用可用空间" 状态的时候 ,margin才可改变元素的可视尺寸
只要元素的尺寸表现 符合"充分利用可用空间" 无论是垂直方向，还是水平方向 都可通过margin改变尺寸
css默认流方向是 水平方向，对于普通元素 margin只能改变元素水平方向尺寸，但对于拉伸特性的绝对定位元素，则水平或垂直方向都可以
例子 :
<style> /* 元素的宽度无变化 还是300px 因为只要设定了宽度，margin就无法改变元素尺寸 */ .father{ width: 300px; margin: 0 -20px; } /* 元素的宽度通过负值设置变大了 340px 这时的宽度就是充分利用可用空间 */ .father{ width: 300px; } .son{ margin: 0 -20px; } </style> <div class="father"> <div class="son"></div> </div>
左和右的负边距对元素宽度的影响
<style> *{ margin: 0; padding: 0; } ul,li{ list-style: none; } .container{ border:solid gray 5px; height: 210px; width: 460px; } ul{ overflow: hidden; margin-right: -20px; } li{ width:100px; height: 100px; background-color: pink; float: left; margin-right: 20px; margin-bottom: 10px; } </style> <div class="container"> <ul> <li>子元素1</li> <li>子元素2</li> <li>子元素3</li> <li>子元素4</li> <li>子元素5</li> <li>子元素6</li> <li>子元素7</li> <li>子元素8</li> </ul> </div>
1、负边距对元素自身的影响
2、负边距在普通文档流中的作用
3、负边距对绝对定位的元素的影响
负边距对元素自身的影响
利用margin为负值添加增加宽度——可用于多列布局增加边距从而不需要增加宽度或者单独设置margin-right:0;
<style> .father{ width: 200px; height: 100px; background-color: pink; } .son{ background-color: blue; margin-right: -30px; color:#fff; } </style> <div class="father"> <div class="son">555</div> </div>
负边距在普通文档流中的作用
负边距对绝对定位元素的影响
对于绝对定位元素，负margin会基于其绝对定位坐标再偏移，
唯有的缺点就是你必须知道这个觉得定位元素宽度的和高度才能并设置负margin值使其居中浏览器窗口，
<style> div{ width: 200px; height: 200px; background-color: #ccc; top: 50%; left: 50%; position:absolute; margin-left: -50px; margin-top: -50px; } </style> <div></div>
赞 (0)