margin负值的作用

1.有俩个边框，有不同的背景色，不管哪边高增加，另一边也变高

2、实现自适应

时间： 2024-10-16 08:15:10

margin负值的作用的相关文章

margin外边距负值的作用

margin外边距负值的作用:在很多CSS代码中,都可以看到margin外边距有使用负值的情况,下面就介绍一下他的作用.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部

几个常见的布局的多种实现方式及margin负值总结

第一部分:几个常见的布局实现方式一.左右两边固定, center中间自适应未知 html代码中 center 部分首先要放在box的最前部分.然后是left,right 圣杯布局: <div class="box"> <div class="center"></div> <div class="left"></div> <div class="right"&g

在margin属性中一共有两类参考线,top和left的参考线属于一类,right和bottom的参考线属于另一类.top和left是以外元素为参考,right和bottom是以元素本身为参考. 和左方的 margin 负值使该元素向上和左方向移动. 下和右方的 margin 负值使该元素下方.右方的元素被拉向该元素. margin 属性可以应用于几乎所有的元素,除了表格显示类型(不包括 table-caption, table and inline-table)的元素,而且垂直外边距对非置换内

[转] margin负值的探讨

原文: margin负值-权威指南 [http://www.csswang.com/exp/cssexp/3863.html] static元素是没有设定成浮动的元素,下图说明了负margin对static元素的作用. 1. 当static元素的margin-top/margin-left被赋予负值,元素将被拉进指定的方向. /* 元素向上移动10px */ #mydiv1 { margin-top: -10px; } 2. 但如果你设置margin-bottom/right为负数,元素并不会

margin负值 – 一个秘密武器

CSS盒模型中,margin是我们老熟悉的一个属性了, 它的负值你用过吗? 你知道margin负值的秘密武器吗?我们一起看看吧! 1.带竖线分隔的横向列表(例如:网站底部栏目) 传统的分隔符是使用 “|” 来实现的,弊端显而易见,不利于表现与结构的分离,同时增加了后台输出时的判断工作. 所以我们采用border-left 左边框来模拟分割线,然后通过margin-left:-1px隐藏掉第一个列表项的边框,父元素设置 overflow:hidden 来隐藏溢出部分,这样完美达到首尾无分割线的要求

双飞翼布局的改造 box-sizing和margin负值的应用

box-sizing + margin负值升级双飞翼布局一.box-sizing属性 .content-size, .border-size{ width: 200px; height: 100px; padding: 10px; border: 5px solid red; margin: 20px; } .content-size{ box-sizing: content-box; } .border-size{ box-sizing: border-box; } context-siz

浮动元素margin负值的应用

上次写到三列布局,其中提到浮动元素margin为负值时的应用,今天就来总结一下,它的用处何在. 首先,先来探究一下,当一个元素的margin为负值时,都会有哪些影响. 其一,对自身的影响. 当元素不存在width属性或则width:auto的时候,负值margin会增加元素的宽度.(注意:这仅仅是在元素不存在width属性或则width属性默认的时候,如果有宽度设置,margin-left和margin-right为负值时,会发生位移.) <!DOCTYPE html> <html>

初探Margin负值(转)

相对而言,margin 负值的使用机率在布局中似乎很少,但是我相信一旦你开始掌握就会着迷,接下来我们看看关于margin负值的一些资料: 它是一个有效的属性,至少w3c中明确描述如下:”Negative values for margin properties are allowed…”; margin负值并非hack,正因为不熟悉所以有时候会避而远之,甚至误解; margin负值遵循文档流:假如使用margin负值促使一个元素向上位移,那么相关元素也会随之发生位移. 良好兼容,甚至是ie6也能

ie6、7 margin负值部分无法看到的解决方法

ie6.7下,若元素设置margin值为负值,则margin负值区域会有一部分会离奇的消失,无法在页面上看到(相当于父元素设置了overflow:hidden后,子元素超出父元素部分就会被砍掉的效果一样) 问题重现代码: <style>*{margin: 0;padding: 0;}body{padding: 200px;}</style><div style="width:200px;height:200px;background:#f00;">&