css 负值的应用场景

box-shadow单侧投影

• 如果阴影的模糊级别半径,与负的扩张半径一致，那么我们将看不到任何阴影，因为生成的阴影将被包含在原来的元素之下
  

scale(-1)实现旋转

• transform: scale(-1)和transform:rotate(180deg)

letter-spacing:-px; 实现文字倒叙

letter-spacing:36px;
letter-spacing:-72px;

text-indent负数实现文字隐藏

margin负值

• 改变布局位置

  • 设置左边或顶部的负外边距：元素就会相应地向左或向上移动，导致元素与它前面的元素重叠
    • 通过负边距进行偏移的元素，它会放弃偏移前占据的空间，并覆盖在之前的元素上，这样它后面文档流中的其它元素就会“流”过来填充这部分空间。
  • 设置右边或者底部的负外边距：并不会移动元素，而是将它后面的元素拉过来。

• 对父元素尺寸计算的影响

  • 文档流在计算元素位置的时候,会认为负边距把元素的尺寸减小了,因此位置也就发生变化了,但实际尺寸没有发生改变
  • 当父元素由子元素撑开时,子元素大小100px,设置margin-bottom:-20px;会认为子元素变小了,故父元素大小变成了80px

• 改变元素大小

  • 该元素没有设定width属性或width:auto时。margin-left|margin-right:-npx;会使得元素增加对应宽度
  • 当元素通过margin负值变大时，元素的父元素宽度并不会增加，会和margin非负值的宽度保持一致

• 对浮动元素的影响

  • 不同于文档流.浮动流既可以向左，也可以向右，即margin-left|margin-right负值都会影响布局

  • 场景:圣杯布局、双飞翼布局等

• 对定位元素的影响

  • 绝对定位的元素定义的top、right、bottom、left等值是元素自身的边界到最近的已定位的祖先元素的距离,这个元素自身的边界指的就是margin定义的边界

  • 如果margin为正的时候,那它的边界是向外扩的,如果margin为负的时候,则它的边界是向里收的。利用这点,就有了经典的利用绝对定位来居中的方法：

div{
	position:absolute;
	width:100px;
	height:100px;
	left:50%;
	top:50%;
	margin-left:-50px;
	margin-top:-50px;
}