css中负值(px)的问题有什么?

html-css09

css中负值(px)的问题有什么?,第1张

margin取负值之后,例如margin-top:-1px元素会从父框架的顶部突出一个像素,如果父框架设置了overflow:visibled的话,这个元素就会看起来显示在父框架外面了,如果取了正值,例如margin-top:1px元素就是距离父框架的顶部一个像素,会在父框架内显示。

padding取了负值之后是没有任何效果的,浏览器会认为padding:0。如果padding取正值,就是在元素内部填充,这个很好理解。position取了负值之后的效果和margin差不多,只是position通常是应用绝对定位场景的,而margin通常是应用在相对定位场景的,而且position可以定义z轴上的位置关系,但是margin一般是不可以的,两个的区别主要是在这个方面,至于取负值,在视觉上其实没有什么太大的区别。

用一个 div 试一下就知道了。比如:

<div class="f_margin">

这个是测试 DIV 盒子。

</div>

.f_margin {

margin: 100% -150px

...

...

}

实践是检验真理的唯一标准。

可以通过负值的margin来抵消掉padding的影响

1.margin:负值

当给一个元素设置margin 负值(top/left),该元素将在该方向上产生位移。例如:

/* 元素向上位移10px */

.demo {margin-top:-10px}

二、当给一个元素设置margin负值(bottom/right),这个元素并不会像你所预想的产生位移,而是将任何紧随其后的元素“拉”过来,覆盖在自己的上边。例如:

/* 所有紧随元素demo之后的元素向上位移10px */

.demo {margin-bottom:-10px}

注:如果元素没有设置宽度,那么给该元素设置margin负值(left/right)将会在两个方向增大其宽度,看起来就好像给该元素添加了padding

2.margin正值