理解margin-left：-100%

最新推荐文章于 2023-05-08 01:00:08 发布
最新推荐文章于 2023-05-08 01:00:08 发布
阅读量769 收藏 2
点赞数
分类专栏： Html 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LiLi_code/article/details/118026351
版权
前端 同时被 2 个专栏收录
21 篇文章 1 订阅
订阅专栏
Html
5 篇文章 0 订阅
订阅专栏

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

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

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

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

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

LiLi_code
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS布局之圣杯布局与双飞翼布局
01-21
按照我的理解，其实圣杯布局跟双飞翼...此时middle占满一行，所以要把left拉到middle所在行的最左边，使用 margin-left:-100% 4.这时left拉回到middle所在行的最左边，但会覆盖middle内容的左端，要把middle内容拉出
CSS - margin负值
seaalan的博客
04-01 409
margin-left和margin-right设置负值会增加元素的宽度 （该元素没有设定width属性或width:auto）。 margin-top设置负值不会增加元素高度，只会产生向上的位移。 margin-bottom设置负值不会产生位移，只会减小元素供CSS读取的高度。 文档流只能是后面的流向前面的，即文档流只能向左或向上流动，不能向下或向右移动。 对浮动元素的影响：可以改变元素的布局...
margin-left:-100%的真正含义
m0_60237095的博客
03-13 302
margin-left：作用
CSS双飞翼布局和圣杯布局margin-left:-100%;等内容理解
siwangdexie_copy的博客
11-28 521
CSS双飞翼布局和圣杯布局margin-left:-100%;等内容理解 网上搜索双飞翼布局和圣杯布局都会有许多不错的文章，在这里给大家推荐一篇博客双飞翼布局和圣杯布局解析！！ 补充一点细节的东西！！！ 如何理解margin-left:-100%及margin-left:300px； （这张图真的是我见过的画的最明白的图了，没有之一！！！！） 转载自 CSS双飞翼布局和圣杯布局margin-le...
关于圣杯布局中，margin-left：-100% 的解释
m0_59132472的博客
05-08 666
圣杯布局，margin-left：-100%
圣杯布局中 margin-left: -100%的理解
darabiuz的博客
01-24 3581
如果不设置margin-left:100%的话，那么left和right元素会因为空间不足被挤到第二行 1. 对margin值的解释： ①父子关系时：margin-left是指孩子左边界线与父亲左边界线(若父亲有左padding值，指的就是这条padding线)的距离。margin-right是指孩子右边界线与父亲右边界线(若父亲有右padding值，指的就是这条padding线)的距离。 ②兄弟关系时：margin-left指的是我的左边界线与我左兄弟的右边界线(若兄弟有右padding值，指的就是这条
margin-left：-100%理解
iceberg_sss的博客
09-26 4166
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 638
最近看到三栏布局，在圣杯布局和双飞翼布局中发现有margin-left: -100%;不太理解，记录一下 margin-left: -100%; 意思就是向左移动整个屏幕的距离 但是在三栏式写法（其中一种）里面的盒子却是可以移动到上图的黑色区域的， 这个原因是： 黑色区域和蓝色区域都加了浮动，当再次使用margin-left的负百分比的时候盒子其实是相对上一个浮动的盒子 总结：可以用float和margin-left负百分比实现布局，单纯的margin-left是不能做到的..
深入理解css中的margin属性（推荐）
01-21
之前我一直认为margin属性是一个非常简单的属性，但是最近做项目时遇到了一些问题，才发现margin属性还是有一些“坑”的，下面我会介绍margin的基本知识以及那些“坑”。这篇博文主要分为以下几个部分： margin–...
CSS中的float和margin的混合使用示例代码
11-20
最近我使用float和margin布局，加深了我对这两个一起使用的理解。（新生可以看一下，大神请忽略） float属性 float: left | right | none | inherit 当然最常用的还是前面两个：向左浮动和向右浮动 浮动最主要的...
CSS入门教程:计算CSS盒模型宽和高
12-09
如上一段的代码，很多时候我们会把它所占的位置计算成width:120px，height:120px，因为在正常的理解下，padding是内边距，应该是包括在width里面的，而margin是外边距，所以width＝margin-left margin-right width，...
Css 模块化编码技巧
12-10
Css的模块化,我们可以理解成(抑或本身就是)OOP思想, 重用性、灵活性、可扩展性便是它终极的目标, "类"便是它的核心, OOP的多用组合少用继承一样是它的基本原则. Css模块化是一个新颖高效的Css编码方式, 若有接触过...
前端建立WebSocket（单纯new）
热门推荐
LiLi_code的博客
12-08 1万+
建立，new一个 this.wSocket = new WebSocket('ws://192.xx.xx.xx:8080/xxx/xxxx'); //记住没有http:// if (!this.wSocket) { console.log('您的浏览器不支持websocket协议！'); //不进来这个表示浏览器支持WebSocket } PS：若是https环境，将ws改为wss即可。 俩个函数接收与发送 this.wSocket.onopen = () => {
Html 引入使用 Element-ui、Vue
LiLi_code的博客
03-01 7231
因为Element-ui是基于Vue的框架，所以要想正常可以使用Element-ui,必须在其脚本引用之前先引用Vue脚本 直接代码演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> ...
Echarts 设计饼图扇区被选中时中间显示数据
LiLi_code的博客
09-05 6964
效果图如下： 1、初始状态 2、扇区被选中时状态（中间数据跟着修改） 思路： 使用echarts饼图自带的label，显示出每一个扇区的具体值 可采用 【formatter: "{b} : {c} 人"】 设计格式 并将显示位置改为 position: 'right' 其实本身直接将position改为 ‘center’也能将数据显示在中间，但是扇区边缘就不会显示具体数...
请求方式总结——GET,POST,PUT,DELETE,OPTIONS
LiLi_code的博客
03-15 4786
之前做的java web项目，基本上只使用get和post的请求方式，但是现在新项目额外增加了put，delete，查了点资料，做个简单的总结。 1、GET get请求是用来获取数据的，只是用来查询数据，不对服务器的数据做任何的修改，新增，删除等操作。 在这里我们认为get请求是安全的，以及幂等的。安全就是指不影响服务器的数据，幂等是指同一个请求发送多次返回的结果应该相同。 特点： get请求会把请求的参数附加在URL后面，这样会产生安全问题，如果是系统的登陆接口采用的get请求，需要对请求的参数
JSON字符串、JSON对象、JSON数组
LiLi_code的博客
03-31 2657
一、json字符串 json采用map键值对的形式，又区别于map，map键值对采用等号关联。 （json字符串是前后端交互常采用的通信格式） 如： “{"employees": [{"firstName": "Bill","lastName":Gates"},{"firstName":"George","lastName": "Bush"},{"firstName": "Thomas","lastName": "Carter"}]}” 注意json字符串只是一堆字符拼接...
关于Symbol创建对象函数时的调用方法
LiLi_code的博客
03-16 1097
情况一： let game = { name: '俄罗斯方块', }; let methods = { up: Symbol(), down: Symbol() }; game[methods.up] = function () { console.log("改变形状"); } game[methods.down] = function () { console.log("快速下降"); } game[methods.down](); //调用成功 情况二：
父容器设置为display: flex; 子元素margin-left: auto;没有起作用
最新发布
07-08
如果父容器设置为`display: flex;`，并且子元素设置了`margin-left: auto;`，但没有起作用，可能有以下几个原因： 1. 子元素没有设置`flex-grow`属性：`margin-left: auto;`只会生效在有剩余空间的情况下，而`flex-grow`属性决定了子元素在剩余空间中的放大比例。请确保子元素设置了适当的`flex-grow`值，例如`flex-grow: 1;`。 2. 子元素的宽度不够：如果子元素的宽度不够，即使设置了`margin-left: auto;`也不会产生效果。请确保子元素的宽度足够，或者使用适当的布局方式来保证子元素能够占据父容器的空间。 3. 子元素被其他样式覆盖：可能存在其他样式或选择器对子元素的`margin-left`属性进行了覆盖或限制。请检查其他样式规则，确保没有冲突的样式存在。 如果以上解决方法仍然无效，请提供更多代码或具体示例，以便更好地理解和排查问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值