其实用负边距布局最大的优点就是布局不受html结构的影响,可以任意调换预备放在同一行的块的位置。这对于我们想要把最重要的内容最先呈现在用户面前有着很大的作用和益处。那么如何计算负边距呢?先看下面的代码。
<style type="text/css">
*{margin:0;padding:0;}
.wrap div{float:left;height:400px;}
.wrap {overflow:hidden;_zoom:1;}
.content{width:60%;background:gray;}
.nav{width:20%;background:orange;}
.infor{width:19%;background:green;}
</style>
<body>
<div class="wrap">
<div class="content">a</div>
<div class="nav">b</div>
<div class="infor">c</div>
</div>
</body>
这段代码从结构可以看出一个大的父包含框里有三个液态子块,css样式将这些子块向左浮动。在给出计算方法之前,我们需要做一个实验,给导航nav增添一个属性margin-left:20%;这时,我们通过浏览器的显示结果可以知道c模块也就是infor被挤到了下一行显示。再做个对比实验。在原始代码中,把c模块向左移动19%,也就是在infor中添加margin-left:-19%;的属性,浏览器这时会显示c模块覆盖在了b上,但是b和a的位置都没有发生移动。
通过上面实验的结果对比我们可以发现对浮动模块使用负边距可以覆盖在相应的浮动模块上,负边距的边距属性并不对其它模块的位置产生作用,他的移动参考点是以本身为参考的。这点和正边距是大为不同的。正边距以相邻模块的位置为参考点进行移动,并对周围模块进行合理地排挤。
好了,通过以上的解释,我们来实现一个bac的布局。我们需要花费很小的移动代价,以尽量少地影响其它模块的位置为前提来布局。我们需要让a模块为b预留相应的宽度位置,b的宽度为20%,所以我们给a增添margin-left:20%;的属性(在本文头部给出的原始未改动的代码中添加)。根据我们实验的结论可知,正边距会使得b和c模块相应的移动,也就是被挤离原来的位置20%,这时b模块要移动到最左边,需要超越a的60%宽度,并加上自己被挤走的20%,使用负边距属性margin-left:-80%;到达预定位置。好了,布局结束。
或许有人要问,那c模块呢,它不是被挤离了20%吗?嘿嘿,要记住abc都是被浮动了的啊,ab完成了位置交换活动,c的位置又没有被占领,c自然挤回去了。
那么,如果你明白了以上的原理,是否也能够自己实现其它的布局诸如acb,cab,bca呢?
- 浏览: 435788 次
- 性别:
- 来自: 成都
文章分类
- 全部博客 (377)
- Java (66)
- C++ (0)
- VC++ (0)
- .net (1)
- css (36)
- 数据库 (22)
- html (2)
- extjs (1)
- jpbm (0)
- javascript (31)
- 物资管理 (1)
- java基础 (5)
- C# (0)
- Android (56)
- window service (1)
- 其他 (2)
- Web服务器 (7)
- jbpm (1)
- eclipse (2)
- tomcat (3)
- java字符串与二进制的相互转化 (1)
- Oracle 数据库 (6)
- FreeMarker (8)
- 浏览器 (1)
- php (1)
- photoshop (6)
- spring (4)
- spring mvc (2)
- Acegi (1)
- webStorm 3.0 (4)
- Mongodb (8)
- mysql (9)
- 软件开发:需求分析 (1)
- 把Java程序作为Windows系统服务 (1)
- nodejs (4)
- json (1)
- 缓存 (1)
- J2ee (2)
- Flash报表 (1)
- MyEclipse+Maven+Tomcat (11)
- 生活 (1)
- Ubuntu (1)
- Bootstrap (1)
- jquery easy ui (2)
- 敏捷开发 (1)
- phone gap (1)
- rest (1)
- 移动开发 (22)
- Redis + Jedis + Spring (3)
- anroid (7)
- grunt 教程 (7)
- PhoneGap (2)
- sublime text (7)
- mariadb (1)
- linux (1)
- maven (2)
- jquery (1)
- ActiveMQ (1)
- LVS Nginx (1)
- nginx (6)
- ngnix (1)
- 爱因斯坦 (1)
- 天干地支 (1)
最新评论
-
muqingren:
...
Maven多模块布局实例详解 -
shutear:
解决了我的难题,谢谢分享!
Unable to load configuration. - action - file:/D:/studytool/apache-tomcat-6.0.16 -
702346318:
[img][/img][flash=200,200][/fla ...
CAS单点登录完整教程(上)【转】 -
liuguofeng:
PersonS631887934 写道学习中。。 有个问题想请 ...
js constructor属性 -
S631887934:
学习中。。 有个问题想请教楼主为什么要加上Person.pro ...
js constructor属性
发表评论
-
CSS实现二列等高布局及右边自适应宽度
2015-01-06 21:53 688html, body, div, span, applet, ... -
关于CSS浮动以及清除浮动的几种方法
2015-01-06 21:36 1203众所周知,CSS浮动在日常页面运用中起到非常重要的作用。例如 ... -
CSS3兼容旧版IE(6,7,8)解决方案
2014-11-29 11:23 549http://www.16code.com/css3-fo ... -
使用SVG中的Symbol元素制作Icon
2014-11-01 15:41 984原文出处: 腾讯ISUX ... -
CSS设计模式:OOCSS 和 SMACSS
2014-11-01 14:18 592真心觉得写出 CSS 并不难,但是要写出可被维护的 CSS ... -
编写可维护的CSS
2014-11-01 14:16 542http://blog.jobbole.com/76032/ ... -
人人FED CSS编码规范
2014-09-26 15:07 542浏览器特效支持规范 为了页面性能考虑,如果浏览器不支持C ... -
那些年我们一起清除过的浮动
2014-09-25 22:35 693浮动(float),一个我们即爱又恨的属性。爱,因为通过浮 ... -
详解inline-block
2014-09-25 22:35 916转自:http://ued.taobao.com/blog/ ... -
前端精选文摘:BFC 神奇背后的原理
2014-09-25 22:01 420BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC ... -
Block Formatting Context
2014-09-25 22:01 432来自聚焦前端@任浩‘博客http://www.focus ... -
CSS布局奇淫技巧之-宽度自适应
2014-08-31 15:21 819css这个东西,说难不难,说容易也不容易。我觉得最重要的还是 ... -
DIV+CSS规范命名大全集合
2014-08-31 11:13 583头:header 内 ... -
最常用和实用的CSS技巧
2014-08-31 10:42 585下面是CSS最常用和实用的技巧。 1.重置浏览器的字体大小 ... -
Web页面中八种创建多列等高(等高列布局)的实现技术
2014-08-31 10:19 691高度相等列在Web页面设计中永远是一个网页设计师的需求 ... -
用好负边距,省时又省力
2014-08-30 19:04 677说到负边距,广大的前端兄弟们肯定不会陌生,外边距 margi ... -
css样式表中margin负值的五种应用详解
2014-08-28 10:56 449在网页前端设计中经 ... -
javascript中的数据类型、Object与Function
2014-10-28 09:36 5601. 数据类型 javascript中包含6种数据类型 ... -
如何减少浏览器repaint和reflow(下)
2014-08-27 22:03 0四、如何优化你的脚本来减少reflow/repaint? ... -
如何减少浏览器repaint和reflow(中)
2014-08-27 22:02 0三、浏览器优化 浏览器对于每一个渲染动作并不是立即执行,而 ...
相关推荐
此demo运用margin负边距解决一些边框、间距问题
在日常开发中,常常碰到一些布局的问题,让人头疼,来看看负边距的情况吧
国外关于使用负边距创建这类布局的技术文档,我看到的最早是04年 Ryan Brill 发表在 A List Apart 上的 《Creating Liquid Layouts with Negative Margins》 (04年 – -!国内刚小部分人开始关注WEB标准化),本文...
自适应布局主要是浮动圣杯布局也叫双飞翼布局,主要是利用浮动和margin负边距实现的,希望大家能够很好的理解下面的几个例子,绝对定位布局也是非常的简单了
Margin:边距 Padding :空白 Border:边框 Float:浮动属性
对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做,但是没有人会谈论它。(It’s like an online taboo—everyone’s doing it, yet no one wants to talk...
合理使用负边距技术,可以帮助我们创建很多有意思的布局,比如自适应浏览器宽度的流体布局。
边距属性 边距属性 01 CSS的边距属性包括“内边距”和“外边距”两种 内边距 外边距 外边距 内边距(内填充) padding-top:上边距; padding-right:右边距; padding-bottom:下边距; padding-left:左边距; padding:...
很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的。本文非常基础,老鸟可以略过。 负边距在普通文档流中的作用和效果 那些没有脱离文档流的元素(指不是浮动元素也不是绝对...
XML应用开发(软件品牌)-1期 4.9 课堂实践-使用CSS容器属性显示XML文档-边距属性margin和补白属性padding.doc 学习资料 复习资料 教学资源
XML应用开发(软件品牌)-1期 4.9 案例分析-使用CSS容器属性显示XML文档-边距属性margin和补白属性padding.doc 学习资料 复习资料 教学资源
图文详情布局应该预留出左右内边距 https://blog.csdn.net/qq_36413371/article/details/101929192
本人查阅好多资料,上了N多网站,始终找不到关于Fastreport动态调整页边距的代码,现终于找到方法,共享出来,愿与各位菜鸟共享。希望对大家能有所帮助。好的资源大家一起共享。用fastreport 4.8.5调试通过。
js打印设置页边距,设置页眉页脚,初始化页眉页脚,左右边距
word 2021 页边距设置方法.docx
更少的边距助手类 一组 LESS 边距辅助类,允许您使用纯 CSS 类快速为元素分配各种级别的边距。 安装 安装组件: $ ngx install less-margin-helper-classes 不知道ngx命令行工具是什么? 了解有关更多信息。 如何...