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

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

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

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

由css reset想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;padding:0px; },用起来很方便吧?由于学习前端的门槛低,我一直找不到区别于那些用DW的前端的所在点,我总觉得我是用记事本写代码的,我的水平及理解绝对比那些用DW的人呀更胜一筹.但区别在哪里呢?最近,我似乎明白了,拿css来说,前面的很长一段时间,我都是在横向学习css,不断的学习新的东西,制作…

margin可以改变容器的尺寸 //元素尺寸分为可视尺寸,占据尺寸 margin与可视尺寸 1.适用于没有设定width/height的普通block水平元素 2.只适用于水平方向的尺寸 应用:一侧定宽的自适应布局,两端对齐布局等 例如:左边有一张图片固定宽度,右面有文字,无论怎么改变文字的宽度,图片都不会动. margin-left:70px   margin与占据尺寸 1.block/inline-block水平元素均适用 2.与有没有设定width/height值无关 3.适用于水平和垂直…

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

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

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