margin负值原理

负margin的原理以及应用

负margin在布局中往往起到意想不到的效果,比如在多栏等高布局中就是用该技巧. 虽说网络上关于负margin的实践有很多,但对margin负值为什么会出现这样的效果却没有多少讲解,本篇的目的就是阐述负margin 产生或者作用的原因. margin负值之所以可以修改元素在文档流中的位置,也可以改变元素的宽度,主要因为一个公式: BoxWidth =ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth + C

margin负值5种应用

最近做的项目中经常会用到margin的负值,这里就总结一下关于margin负值的5种使用及相关bug的解决. 1. 在流动性布局中的应用如WordPress的两栏式不固定布局就是使用margin负值来实现的定位,属于左右margin负值在流动性布局中的应用. <div style="width:200px;float:left;border-right:4px solid #CEE1EE;margin-right:-200px;"> 左侧宽度固定 </div>

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

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

margin负值 – 一个秘密武器

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

理解margin负值

效果上和左方的margin负值使元素向上和左方向移动,如果该元素position不是absolute或fixed,这还会导致之后的元素也向上,左移下和右方的margin负值会缩小下和右方的空间,使处于该元素下,右方的元素被拉向该元素,使之后的元素发生向上,左移,以至于与之重叠原理由于margin在上下左右的解析逻辑不同,引入参考线概念 margin 上方负值以包含块(Containing block) 内容区域的上边或者上方相连元素 margin 的下边为参考线 margin 左方负值以

margin负值的相关应用

1.页面上实现css sprite背景定位效果其实margin:-40px 0 0 -160px;与background-position:-160px -40px;实现的原理是一致的,而差别就在于background-position会自动让区域外的图片部分不显示,所以我们要做的很简单,就是给margin定位的父标签给它定个高宽,然后overflow:hidden让高度宽度之外的区域不显示就行了. 2.在流动性布局中的应用流动性布局又称自适应布局,也称为宽度不固定布局.比如Wo

初探Margin负值(转)

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

深入理解CSS中的margin负值

前面的话 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它.它看似简单,实际上却蛮复杂,本文就margin负值作详细介绍和梳理 [注意]关于margin部分的基础知识移步至此表现虽然margin可以应用到所有元素,但display属性不同时,表现也不同 [1]block元素可以使用四个方向的margin值 [2]inline元素使用上下方向的margin值无效 [

margin负值的几种妙用

1:定位+margin负值实现元素水平垂直居中 div{ position: absolute; z-index: 1; left: 50%; margin-left: -50px; width: 100px; height: 100px; } 2: margin-top: -1px解决border多一像素的问题 3,圣杯布局(两边固定,中间自适应)

微吧里的各种margin负值

直在做各种项目接各种需求,但你的代码能力得到提高了吗?不停的项目经历虽然能够增加你的代码行数,但不一定能提升你的代码质量,所以除了构建阶段的代码细扣,项目之后的代码总结是至关重要的. 微吧中除了模块化.公用和皮肤元素处理外,还有很多可总结的东西,例如:1.字符图标:整站大部分纯色的功能性的图标都是用字符实现的,节省了图片字节,利于修改和换肤.2.feed的改造和扩展:基础feed.图片带打开收起功能.扩展了视频音乐富文本功能.又扩展成带时间轴和PK模式的feed,代码清晰可扩展性强.3.各种ma

margin负值的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

双飞翼布局的改造 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负值理论

一.浮动布局 1.先让固定宽度的div浮动!使其脱离文档流.2.margin-left的值等于固定div的宽度相等. .aside{ float: left; width: 200px; background-color: red; } .content{ margin-left: 200px; background-color: blue; } <div class="aside"> Lorem ipsum dolor sit amet, consectetur adip

CSS margin负值学习及实际应用

前言 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它. 表现虽然margin可以应用到所有元素,但display属性不同时,表现也不同 [1]block元素可以使用四个方向的margin值 [2]inline元素使用上下方向的margin值无效 [3]inline-block使用上下方向的margin负值看上去无效 [注意]inline-block使用上下方向的m

通过margin负值去除padding

.pay-type { // 图片布局前通过margin负值去除padding margin: 0 -@page-padding-horizontal; display: inline-flex; } <style lang="less"> @import "../style/weui.wxss"; @wx-width: 750rpx; @wx-width-one_unit: @wx-width/750; @color-main_red: #F00;

[转] 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为负数,元素并不会

CSS中margin负值巧布局

margin负值实现细边框我们先准备五个div盒子,并设置好浮动和2px的实线黑色边框,看看效果中间的边框线挨在了一起致使边框变粗成了4px,这时使用margin负值就可以解决这个问题 <style> * { margin: 0; padding: 0; } div { float: left; width: 150px; height: 300px; border: #000 solid 2px; } .fu { margin-left: -2px; } </style> &

margin负值的作用

一.左右负margin改变自身宽度当元素不存在width或者width:auto的时候,负margin会增加元素的宽度. html <div class="parent"> <div class="div1">111</div> </div> css .div1{ background-color: red; margin-right:-100px; } .parent{ width:300px; backgroun

探究负边距（negative margin）原理

W3C规范在介绍margin时有这样一句话: Negative values for margin properties are allowed, but there may be implementation-specific limits. 于是,聪明的开发者们就发现了很多负边距的巧妙用法. 比如,他可以增加一个不定宽块框的宽度,他可以让一个框向上移动去覆盖另一个框,他可以让文字移动去覆盖文字,也可以让浮动框移动去覆盖另一个浮动框. 利用这些特点,我们可以实现圣杯布局和双飞翼布局.等高布局.

margin负值-内秀篇

zccst整理 margin系列之布局篇 margin系列之bug巡演(三) margin系列之bug巡演(二) margin系列之内秀篇(二) margin系列之bug巡演 margin系列之内秀篇 margin系列之外边距折叠 margin系列之与相对偏移的异同 margin系列之百分比 margin系列之keyword auto 一样东西在不同的场景,不同的人手里,所能做的事会有很大不同.我深切的以为 margin 绝对是 CSS 中最有能力的利器之一,不知大家以为然否? 前面几篇文章大概

巴特西