理解margin-left：-100%

最新推荐文章于 2023-05-08 01:00:08 发布
原创 最新推荐文章于 2023-05-08 01:00:08 发布 · 950 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

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

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

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

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

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

pointer-events: none；属性。pointer-events: none；看得见摸不着，点击穿透。
i_am_a_div的博客
04-01 1万+
pointer-events: none;点击渗透属性
利用vertical-align:middle实现行内元素的水平垂直居中对齐
09-25
`vertical-align-span`类应用于一个`<span>`元素，它创建了一个高为100%、宽度为1px的行内块级元素，通过调整`margin-left`来确保与图片对齐。图片元素自身也使用了`vertical-align: middle;`来确保垂直居中。 此...
margin-left：-100%
qq_46617584的博客
05-17 754
最近看到三栏布局，在圣杯布局和双飞翼布局中发现有margin-left: -100%;不太理解，记录一下 margin-left: -100%; 意思就是向左移动整个屏幕的距离 但是在三栏式写法（其中一种）里面的盒子却是可以移动到上图的黑色区域的，这个原因是： 黑色区域和蓝色区域都加了浮动，当再次使用margin-left的负百分比的时候盒子其实是相对上一个浮动的盒子 总结：可以用float和margin-left负百分比实现布局，单纯的margin-left是不能做到的 .
margin-left:-100%的真正含义
m0_60237095的博客
03-13 504
margin-left：作用
margin-left:-100%
qq_46617584的博客
05-17 800
最近看到三栏布局，在圣杯布局和双飞翼布局中发现有margin-left: -100%;不太理解，记录一下 margin-left: -100%; 意思就是向左移动整个屏幕的距离 但是在三栏式写法（其中一种）里面的盒子却是可以移动到上图的黑色区域的， 这个原因是： 黑色区域和蓝色区域都加了浮动，当再次使用margin-left的负百分比的时候盒子其实是相对上一个浮动的盒子 总结：可以用float和margin-left负百分比实现布局，单纯的margin-left是不能做到的..
关于圣杯布局中，margin-left：-100% 的解释
m0_59132472的博客
05-08 899
圣杯布局，margin-left：-100%
margin-left和right失效(斯芬克斯)之谜
01-24
### margin-left/right 失效的原因及其解决方案 #### 一、问题背景 在Web前端开发过程中，经常遇到元素的`margin`属性无法按照预期的方式显示的情况。通常这种情况发生在垂直方向上，即`margin-top`和`margin-...
IE6 float:left margin-left出现两倍像素
09-25
其中一个被广泛讨论的问题是当元素应用了浮动属性(float:left)并设置左侧边距(margin-left)时，这个边距值会被错误地加倍。这个现象通常被称为“IE6双空白边bug”。 要深入理解这个问题，首先需要知道CSS中的浮动...
clear:both后margin-top不起作用其他左右下都起作用
09-25
理解`clear:both`和BFC的概念对于优化CSS布局至关重要。在处理浮动元素和它们相邻元素的关系时，熟练掌握这些概念能够帮助我们避免不必要的布局问题。在现代Web开发中，使用Flexbox或Grid布局通常可以更好地替代传统...
margin-left：-100%理解
iceberg_sss的博客
09-26 4382
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%的解释
reidai的博客
05-24 843
http://bbs.blueidea.com/thread-2956530-1-1.html
圣杯布局中margin-left = -100%的理解
qq_44689118的博客
04-23 477
效果图## 要求 实现（浮动） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> </head> <style> body { min-width: 550px; /
圣杯布局中 margin-left: -100%的理解
darabiuz的博客
01-24 3880
如果不设置margin-left:100%的话，那么left和right元素会因为空间不足被挤到第二行 1. 对margin值的解释： ①父子关系时：margin-left是指孩子左边界线与父亲左边界线(若父亲有左padding值，指的就是这条padding线)的距离。margin-right是指孩子右边界线与父亲右边界线(若父亲有右padding值，指的就是这条padding线)的距离。 ②兄弟关系时：margin-left指的是我的左边界线与我左兄弟的右边界线(若兄弟有右padding值，指的就是这条
margin-left:0和margin-left:-100%有什么区别？
ljs_coding
02-21 3094
乍一看我以为这两者是一样的.. 然后，测试一下 &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 以及 -100%的理解和3列式左右排版理解
RogerDL的专栏
06-02 2707
<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和_margin-left的用法以及区别
kokorodo的随堂笔记
08-16 705
关于这两种写法，主要是为了解决浏览器的兼容问题而提出来的，现在在IE7和IE8中用的是margin-left这样的写法，但是现在还有不少用户所使用的是IE6，_margin-left是特地针对IE6识别的。现在的浏览器比较多，但是还是以IE和火狐（Firefox）为主，在进行网页的结构布局时，IE8和Firefox是基本支持w3c标准的，IE7也比较规范，但是IE6就非常不标准了，这在编辑网...
C语言margin的作用是,css中margin是什么意思，margin作用是什么
weixin_33614878的博客
05-16 1468
一、简介，甚么含义？margin为对象外边距间隔属性。假如对一个对象比方div配置了边框后，再设置margin就会察看到这个div外面孕育发生了间距边距。margin感导：设置对象与此外对象的外边距离，外边隔绝距离。比喻对象与对象，凹凸DIV，摆布DIV隔断几多，大要使用margin完成。.css5{margin:10px}设置html中class=css5对象的外边距(包括上、左、下、右)分别为...
彻底弄懂圣杯布局（margin-left=-100%的）
星海拾遗
03-18 3804
首先，html页面代码结构如下 <div id="container"> <div id="center"></div> <div id="left"></div> <div id="right"></div> </div> 首先设置容器css样式 #conta...
margin-left: auto; 加个注释
最新发布
06-21
### 如何为 CSS 样式 `margin-left: auto;` 添加合适的注释说明 在 CSS 中，`margin-left: auto;` 是一种常见的布局技巧，用于实现元素的水平对齐或间距调整。为该样式添加注释时，应明确说明其功能和作用机制，以便开发者理解代码的目的。 以下是一个带有注释的完整示例： ```css /* 将左侧外边距设置为自动，使元素靠右对齐。 当左右外边距中仅有一个被设置为 auto 时， 浏览器会将其计算为剩余空间的大小，从而实现水平方向上的对齐效果。[^4] */ div { margin-left: auto; } ``` 此外，如果需要进一步解释上下文或应用场景，可以扩展注释内容。例如： ```css /* 通过设置左侧外边距为 auto，让子元素在父容器内水平靠右对齐。 此方法适用于 Flexbox 布局之外的场景，尤其是在需要简单水平对齐的情况下使用。[^4] */ .right-aligned-element { margin-left: auto; } ``` ### 注释的核心要点 - **功能描述**：明确指出 `margin-left: auto;` 的作用是让元素靠右对齐，或者分配剩余空间。 - **作用机制**：解释浏览器如何计算 `auto` 值，即根据容器宽度和其他属性动态调整外边距。 - **适用场景**：可提及该样式的典型应用场景，如水平对齐、间距调整等。 ### 示例代码 以下是一个完整的示例，展示如何结合注释和实际代码使用 `margin-left: auto;`： ```html <div class="container"> <div class="right-aligned-box"></div> </div> <style> .container { width: 300px; height: 100px; background-color: lightgray; /* 设置相对定位，便于观察子元素对齐效果 */ position: relative; } .right-aligned-box { width: 50px; height: 50px; background-color: darkgray; /* 将左侧外边距设置为 auto，使子元素在父容器内水平靠右对齐。[^4] */ margin-left: auto; position: absolute; top: 25px; } </style> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值