css 负值的应用场景

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

在这里插入图片描述

2、scale(-1)实现旋转
	transform: scale(-1)和transform:rotate(180deg)

3、letter-spacing:-px; 实现文字倒叙
		letter-spacing:36px;
		letter-spacing:-72px;

在这里插入图片描述

在这里插入图片描述

4、text-indent负数实现文字隐藏

5、margin负值
	改变布局位置
		负边距对这些由文档流控制的元素的作用是,会使它们在文档流中的位置发生偏移
		但这种偏移不同于相对定位,通过相对定位偏移后,其仍然会坚守着它原来占据的空间,不会让文档流的其它元素乘虚而入。
		而通过负边距进行偏移的元素,它会放弃偏移前占据的空间,并覆盖在之前的元素上,这样它后面文档流中的其它元素就会“流”过来填充这部分空间。
		
		原因:只是文档流在计算元素位置的时候,会认为负边距把元素的尺寸减小了,因此位置也就发生变化了,但实际尺寸没有发生改变
		
		现象:一切通过文档流布局的,都会受到影响
		
		限制:即文档流只能向左或向上流动,不能向下或向右移动即margin-bottom|margin-right不会影响位置,但会影响父元素尺寸计算
		
		对父元素尺寸计算的影响:当父元素由子元素撑开时,子元素大小100px,设置margin-bottom:-20px;会认为子元素变小了,故父元素大小变成了80px
		
	
	改变大小
		该子元素没有设定width属性或width:auto时。margin-left|margin-right:-npx;会使得父元素增加对应宽度

在这里插入图片描述

对浮动元素的影响
	不同于文档流.浮动流既可以向左,也可以向右,即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;
	}

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/121272045
今日推荐