理解margin-left：-100%

最新推荐文章于 2023-03-13 15:51:41 发布
转载 最新推荐文章于 2023-03-13 15:51:41 发布 · 2.5k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
原文链接：http://www.cnblogs.com/purple-windbells/p/11299075.html
本文解析了三栏式布局中使用margin-left:-100%的原理，解释了如何通过浮动和负百分比margin-left实现元素跨越左侧区域的效果，强调了单纯使用margin-left无法达到这一目的。

最近看到三栏式布局，发现里面的margin-left: -100%;不太理解，这里记录一下

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

 

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

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

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

转载于:https://www.cnblogs.com/purple-windbells/p/11299075.html

1361976860
关注
关于圣杯布局中，margin-left：-100% 的解释
m0_59132472的博客
05-08 941
圣杯布局，margin-left：-100%
margin-left:-100%的真正含义
m0_60237095的博客
03-13 571
margin-left：作用
margin-left：-100%
qq_46617584的博客
05-17 778
最近看到三栏布局，在圣杯布局和双飞翼布局中发现有margin-left: -100%;不太理解，记录一下 margin-left: -100%; 意思就是向左移动整个屏幕的距离 但是在三栏式写法（其中一种）里面的盒子却是可以移动到上图的黑色区域的，这个原因是： 黑色区域和蓝色区域都加了浮动，当再次使用margin-left的负百分比的时候盒子其实是相对上一个浮动的盒子 总结：可以用float和margin-left负百分比实现布局，单纯的margin-left是不能做到的 .
圣杯布局中 margin-left: -100%的理解
darabiuz的博客
01-24 3925
如果不设置margin-left:100%的话，那么left和right元素会因为空间不足被挤到第二行 1. 对margin值的解释： ①父子关系时：margin-left是指孩子左边界线与父亲左边界线(若父亲有左padding值，指的就是这条padding线)的距离。margin-right是指孩子右边界线与父亲右边界线(若父亲有右padding值，指的就是这条padding线)的距离。 ②兄弟关系时：margin-left指的是我的左边界线与我左兄弟的右边界线(若兄弟有右padding值，指的就是这条
margin-left:-100%
qq_46617584的博客
05-17 824
最近看到三栏布局，在圣杯布局和双飞翼布局中发现有margin-left: -100%;不太理解，记录一下 margin-left: -100%; 意思就是向左移动整个屏幕的距离 但是在三栏式写法（其中一种）里面的盒子却是可以移动到上图的黑色区域的， 这个原因是： 黑色区域和蓝色区域都加了浮动，当再次使用margin-left的负百分比的时候盒子其实是相对上一个浮动的盒子 总结：可以用float和margin-left负百分比实现布局，单纯的margin-left是不能做到的..
对于双飞翼布局中的margin-left:-100%的理解
weixin_43706224的博客
05-24 1010
1、布局代码 2、css代码 3、显示结果（ppt做的，方便讲解） 如图所示：     container是个父容器，他有三个子元素，left,right以及main 。双飞翼布局要求左右两边固定宽度，中间随着浏览器窗口变化而变化。 首先，给定父容器container和main,main的宽度为width:100%; 然后放上left ,这里的left的maigin-left:...
margin-left：-100%理解
iceberg_sss的博客
09-26 4423
magin-left:-100% 这个百分比是以父元素内容长度的百分比，该父元素内容长度需要去除padding magin border。由于长度设置为了100%，需要一整行的宽度补偿margin，则移到最左边。 magin-right：-150px margin负值会改变元素占据的空间，及移到父元素的最右边，并且该子元素width即为200px <html> <div class='container'> <div class='main column'
圣杯的margin-left:-100%；理解
Haley6的博客
04-19 566
圣杯的margin-left:-100%;理解 问题? 为什么margin-left:100%;后浏览器自适应时.left会贴着.container的padding-left最右边??? 要了解的知识 width:auto/100%区别* width:auto; 父元素的width=子元素的width+子元素border+子元素margin+子元素padding width:100%; 子元素的宽度是继承的父元素宽度，不包括子元素设置的margin padding 和border部分 总之:同
css : 圣杯布局的margin-left百分比：-100%
火星男孩的分享空间
05-21 531
一、准备 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .cleanfix { clear:
margin-left:0和margin-left:-100%有什么区别？
ljs_coding
02-21 3143
乍一看我以为这两者是一样的.. 然后，测试一下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{ margin: 0; padding: 0;
css---风筝效果（margin-left、left: 100%）
weixin_46218101的博客
10-17 513
前端入门笔记之css（） 知识点： **margin-left：**让元素向左移动多少像素， **margin-top：**让元素向上移动多少像素 left: 100%： left的%，对应的是父级的width top: 100%：top的%，对应的是父级的heigh 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style
彻底弄懂圣杯布局（margin-left=-100%的）
星海拾遗
03-18 3843
首先，html页面代码结构如下 <div id="container"> <div id="center"></div> <div id="left"></div> <div id="right"></div> </div> 首先设置容器css样式 #conta...
css缩小行距负值,css3的margin中的负值的深入研究
weixin_42356811的博客
08-04 554
今天看到别人的代码，发现有位大神写了如下代码margin-left:-100px以前也一直用margin这个属性，但是从来没有用过负值，虽然有在别的文章中看到过负值的使用场景，但是一直觉得它是一个无用属性，如果css迭代版本的话，应该会取消这种用法......但是还是太年轻，去网上查了下负margin是绝对标准的CSS，W3C甚至标注过：对于margin属性来说，负值是被允许的。完全兼容 并且所有...
CSS双飞翼布局和圣杯布局margin-left:-100%;等内容理解
Allenyhy的博客
08-11 2906
网上搜索双飞翼布局和圣杯布局都会有许多不错的文章，在这里给大家推荐一篇博客双飞翼布局和圣杯布局解析！！ 看完之后，我来补充一点细节的东西！！！ 如何理解margin-left:-100%及margin-left:300px； 看完这个图解，上面的问题就应该没问题了！！具体的双飞翼布局方法请参考上面的文章！！   本博客由博主原创，如需转载需说明出处！谢谢支持！...
margin-left:-100%的解释
reidai的博客
05-24 873
http://bbs.blueidea.com/thread-2956530-1-1.html
CSS 负margin 以及 -100%的理解和3列式左右排版理解
RogerDL的专栏
06-02 2751
<br /><br />首先，这个要从box的模型说起（个人理解）：<br />  1>  可以认为margin是由4条（left,top,right,bottom）margin线组成的区域，如图；<br />  2>  这4条margin线和border组成的block没有位置上的明确关系，以left margin为例，margin-left那条线可以在left border的左边，也可以left border那条线的右边，这里可以认为margin-left那条线可以左右浮动，浮动的方向取决于margin
margin-left与left
CSDN技术支持
11-13 3024
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; .div1 { width: 300px; height: 30
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值