理解margin-left：-100%

最近看到三栏布局，在圣杯布局和双飞翼布局中发现有margin-left: -100%;不太理解，记录一下

margin-left: -100%; 意思就是向左移动整个屏幕的距离

但是在三栏式写法（其中一种）里面的盒子却是可以移动到上图的黑色区域的，这个原因是：

黑色区域和蓝色区域都加了浮动，当再次使用margin-left的负百分比的时候盒子其实是相对上一个浮动的盒子

总结：可以用float和margin-left负百分比实现布局，单纯的margin-left是不能做到的

理解margin-left：-100%相关推荐

CSS进阶（5）—— 深入理解margin
盒尺寸中padding负责内边距,一般情况下(抛开上一章的诡异现象)不会给使用者带来太多的麻烦,因此作者称之为温和的padding,而margin则有些激进,虽说负责外边距,但有时候还能做一些&quo ...
css margin padding 0,CSS 彻底理解margin与padding
我们在刚开始接触CSS的时候总是被margin和padding闹的晕头转向,什么时候设置margin,什么时候设置padding,不是太清楚,设置了以后在界面上看到的效果也差不多呀. 如何理解marg ...
如何理解margin重叠问题
一.写在前面根据w3c规范,两个margin产生折叠的必备条件: 1.必须处于常规文档流(不能是浮动和定位)的块级盒子,并且处于同一个BFC当中. 2.没有线盒,没有空隙,没有padding和bor ...
CSS进阶（10）—— 深入理解BFC结界
本章继续来探讨CSS世界的流破坏和流保护,延续的是上一章float的内容,在上一章中我们已经知道了clear属性并不是真正的清除浮动,本章将继续深入探索,引入BFC结界的概念.如果对浮动和清浮动属性还 ...
Web前端知识点-关于margin属性的几个问题分析
margin属性在页面布局中发挥着很大的作用,但是在一些使用细节上有几个需要我们特别注意的地方,最常见的就是块元素在垂直方向上的外边距合并问题,本文对常见的情况都做了讨论,此外还对margin取百分比 ...
如何更准确的理解面向对象编程中的对象
现在面向对象的编程思想已经有好长的历史了,我们可能天天都在运用.我们应该如何理解它呢?100个人可能有100种答案,因为它太容易理解了,同时也是最难真正理会其含义的.理解好理解,但在实际的编程当中我们 ...
margin负值布局（一）
搜索关键词:margin 负-100% 链接地址: 负margin用法权威指南负边距(negative margin)实现自适应的div左右排版 <div class="cont& ...
css margin为什么重叠,CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...

理解margin-left：-100%

理解margin-left：-100%相关推荐

最新文章

热门文章