margin-left:-100%的真正含义

最新推荐文章于 2023-05-08 01:00:08 发布
最新推荐文章于 2023-05-08 01:00:08 发布
阅读量351 收藏
点赞数 1
文章标签： 前端 css Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60237095/article/details/129496219
版权
负margin可以用来改变元素在布局中的位置。当`margin-left`设为-100%，元素会移至父元素最左边，相当于占据了一整行的宽度。而`margin-right:-150px`会使元素向右移动150px，其宽度则表现为150px，常用于定位和布局调整。
摘要由CSDN通过智能技术生成

magin-left:-100%

这个百分比是以父元素内容长度的百分比，该父元素内容长度需要去除padding magin border。由于长度设置为了100%，需要一整行的宽度补偿margin，则移到最左边。

magin-right：-150px

margin负值会改变元素占据的空间，及移到父元素的最右边，并且该子元素width即为150px

结果才重要
关注
圣杯布局和双飞翼布局 margin-left:-100%
Rashu99's blog
05-12 636
文章目录前言一、圣杯布局1、先写middle2、container设置padding ，预留位置给左右3、middle设置宽度100%4、left、right设置固定宽度200px5、给中左右设置浮动（一浮都浮）6、给left设置margin-left:-100%7、接着给right设置margin-left: -200px8、给left设置position: relative; 再设置right:200px9、优化下细节二、双飞翼1、middle外多封装了一层div2、wrap(父级)上设置宽度100%3
CSS的四种定位方式详解
QIQIQI1175113305的博客
06-26 1823
在CSS中定位使用position属性来设置，有以下4种取值： 静态定位 -static 相对定位 -relative 绝对定位 -absolute 固定定位 -fixed 静态定位 -static 静态定位是css中的默认定位方式，也就是没有定位，在正常文档流中。 在此定位方式中，设置top，bottom，left，right，z-index属性是无效的。 相对定位 -relative ...
margin-left：-100%理解
iceberg_sss的博客
09-26 4260
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%
qq_46617584的博客
05-17 665
最近看到三栏布局，在圣杯布局和双飞翼布局中发现有margin-left: -100%;不太理解，记录一下 margin-left: -100%; 意思就是向左移动整个屏幕的距离 但是在三栏式写法（其中一种）里面的盒子却是可以移动到上图的黑色区域的，这个原因是： 黑色区域和蓝色区域都加了浮动，当再次使用margin-left的负百分比的时候盒子其实是相对上一个浮动的盒子 总结：可以用float和margin-left负百分比实现布局，单纯的margin-left是不能做到的 .
margin-left:-100%
qq_46617584的博客
05-17 703
最近看到三栏布局，在圣杯布局和双飞翼布局中发现有margin-left: -100%;不太理解，记录一下 margin-left: -100%; 意思就是向左移动整个屏幕的距离 但是在三栏式写法（其中一种）里面的盒子却是可以移动到上图的黑色区域的， 这个原因是： 黑色区域和蓝色区域都加了浮动，当再次使用margin-left的负百分比的时候盒子其实是相对上一个浮动的盒子 总结：可以用float和margin-left负百分比实现布局，单纯的margin-left是不能做到的..
关于圣杯布局中，margin-left：-100% 的解释
最新发布
m0_59132472的博客
05-08 793
圣杯布局，margin-left：-100%
JavaEE - Tomcat和HTTP协议
热门推荐
旧时言的博客
06-06 1万+
HTTP (全称为 “超文本传输协议”) 是一种应用非常广泛的 应用层协议.HTTP 诞生与1991年. 目前已经发展为最主流使用的一种应用层协议.最新的 HTTP 3 版本也正在完善中, 目前 Google / Facebook 等公司的产品已经支持了.HTTP 往往是基于传输层的 TCP 协议实现的. (HTTP1.0, HTTP1.1, HTTP2.0 均为TCP, HTTP3 基于 UDP实现)目前我们主要使用的还是 HTTP1.1 和 HTTP2.0 . 当前课堂上讨论的 HTTP 以 1.1 版
V - Layout：淘宝、天猫都在用的UI框架，赶紧用起来吧！
tasty
11-27 1493
前言 V- Layout 是阿里出品的基础 UI 框架，用于快速实现页面的复杂布局，在手机天猫 Android版 内广泛使用 让人激动的是，在上个月V- Layout终于在Github上开源！  Github - alibaba - vlayout 在五一假期我对V- Layout进行了详细分析，我将献上一份 V- Layout的使用攻略 &amp; 源码分析，希望你们会...
border-radius 你了解多少
weixin_49140057的博客
01-08 923
border-radius 你了解多少 在 border-radius 这个 CSS3 属性出现之前，我们要想在页面画个圆，务必借助图片来实现，出了这个 border-radius 属性之后，我们在页面中实现一个圆形是非常容易的。接下来我们仔细研究研究这个 border-radius，看看它还有那些黑魔法？ Border-radius 探究 通过 border-radius 轻而易举的可以划出一个圆。我们通过这样的一个小例子，开始探究 border-radius。 HTML: CSS: .demo { w
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
m0_55613022的博客
02-24 3213
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
圣杯布局中 margin-left: -100%的理解
darabiuz的博客
01-24 3711
如果不设置margin-left:100%的话，那么left和right元素会因为空间不足被挤到第二行 1. 对margin值的解释： ①父子关系时：margin-left是指孩子左边界线与父亲左边界线(若父亲有左padding值，指的就是这条padding线)的距离。margin-right是指孩子右边界线与父亲右边界线(若父亲有右padding值，指的就是这条padding线)的距离。 ②兄弟关系时：margin-left指的是我的左边界线与我左兄弟的右边界线(若兄弟有右padding值，指的就是这条
圣杯的margin-left:-100%；理解
Haley6的博客
04-19 427
圣杯的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部分 总之:同
理解margin-left：-100%
weixin_30423977的博客
08-04 2439
最近看到三栏式布局，发现里面的margin-left: -100%;不太理解，这里记录一下 margin-left: -100%;是什么意思呢？意思就是向左移动整个屏幕的距离 但是在三栏式写法（其中一种）里面的盒子却是可以移动到上图的黑色区域的，这个原因是： 黑色区域和蓝色区域都加了浮动，当再次使用margin-left的负百分比的时候盒子其实是相对上一个浮动的盒子 ...
彻底弄懂圣杯布局（margin-left=-100%的）
星海拾遗
03-18 3684
首先，html页面代码结构如下 <div id="container"> <div id="center"></div> <div id="left"></div> <div id="right"></div> </div> 首先设置容器css样式 #conta...
圣杯布局中margin-left = -100%的理解
qq_44689118的博客
04-23 433
效果图## 要求 实现（浮动） <!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; /
CSS双飞翼布局和圣杯布局margin-left:-100%;等内容理解
siwangdexie_copy的博客
11-28 573
CSS双飞翼布局和圣杯布局margin-left:-100%;等内容理解 网上搜索双飞翼布局和圣杯布局都会有许多不错的文章，在这里给大家推荐一篇博客双飞翼布局和圣杯布局解析！！ 补充一点细节的东西！！！ 如何理解margin-left:-100%及margin-left:300px； （这张图真的是我见过的画的最明白的图了，没有之一！！！！） 转载自 CSS双飞翼布局和圣杯布局margin-le...
css : 圣杯布局的margin-left百分比：-100%
火星男孩的分享空间
05-21 380
一、准备 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .cleanfix { clear:
margin-left: -100%;
03-16
我很高兴能够为您服务。..."margin-left: -100" 似乎是CSS中设置元素的左外边距为负100像素的语法。但是，我不知道您具体想了解什么。您可以提供更多的信息或者明确您的问题吗？这样我才能为您提供更准确的帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

结果才重要

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值