利用margin的负值错别固定的宽度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{margin:0 0;padding:0 0;}
.wrap{overflow:hidden;width:800px;margin: 0 auto;}
.common{float:left;background-color:#cde1ff;padding-bottom: 3276px !important;margin-bottom: -3276px !important; }
.mode-maincontent{width:100%; background-color:#fff;}
.mode-maincontent .cont{margin-left:210px; margin-right: 310px;background-color:#fde0ff;}
.mode-colL{width:200px; margin-left:-100%;}
.mode-colR{width:300px;margin-left:-300px;}
</style>
</head>

<body>
<div class="wrap">
<div class="common mode-maincontent">
<div class="cont">1946年,年青的银行家安迪(蒂姆•罗宾斯 Tim Robbins 饰)被冤枉杀了他的妻子和其情人,这意味着他要在肖申克的监狱渡过余生。
  银行家出身的安迪很快就在监狱里很吃得开,他懂得如何帮助狱卒逃/税,懂得如何帮监狱长将他收到的非法收入“洗白”,很快,安迪就成为了狱长的私人助理。
  一名小偷因盗/窃入狱,他知道安迪妻子和她情人的死亡真相,兴奋的安迪找到了狱长,希望狱长能帮他翻案。虚伪的狱长表面上答应了安迪,暗中却派人杀死了小偷,只因他想安迪一直留在监狱帮他做帐。
  安迪知道真相后,决定通过自己的救赎去获得自由!</div>
</div>
<div class="common mode-colL">ModeLeft</div>
<div class="common mode-colR">ModeRight</div>
</div>
</body>
</html>
### CSS Margin 负值的作用与使用场景 在CSS中,`margin` 属性确实支持负值。这允许创建一些特殊的效果和布局技巧。 当 `margin` 的值为负数时,元素会超出其正常位置向相反的方向移动。例如,对于水平方向上的负边距,元素将移出容器边界并向左或右扩展[^3]。 #### 实现两头固定中间自适应布局 通过应用负的左边距 (`margin-left`) 或者右边距 (`margin-right`) 可以让浮动元素突破父级容器的约束,从而实现特定的设计需求。比如,在构建两侧宽度固定的侧栏加上居中的主要内容区这种常见的网页结构时,就可以借助于负的外边距来微调子元素的位置[^2]: ```html <div class="main"> <div class="content">我是内容</div> </div> <div class="fl">左侧栏</div> <div class="fr">右侧栏</div> <style> .main { width: 80%; margin: auto; } .fl, .fr{ float:left; width:10%; /* 设定具体数值 */ } .fr {float:right;} .content{width:auto;}/* 让中间部分自动填充可用空间 */ /* 应用负边距使左右两侧更贴近中心区域 */ .fl {margin-left:-10%;} .fr {margin-right:-10%;} </style> ``` 上述代码片段展示了如何利用负的 `margin` 来调整浮动元素的位置,使得页面呈现出两端固定宽度而中央灵活伸缩的效果。 #### 影响相邻兄弟元素排列 另一个重要特性是,当一个块级元素设置了较大的负边距时,可能会改变与其同级别的其他元素之间的相对定位关系。特别是当这些元素之间存在默认间距(即上下方有正的 `margin` 值),此时设置其中一个元素具有较大绝对值的负边距就可能导致它们相互覆盖或者交放置。 需要注意的是,虽然可以自由设定任意大小的负边距,但在实际开发过程中应当谨慎处理这种情况下的样式冲突问题,并确保整体视觉效果符合预期设计目标。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值