面试常考！！！margin-left与margin-right设置负值的区别
supmyre
已于 2023-04-25 21:08:43 修改
阅读量176
收藏
点赞数
已于 2023-04-25 21:08:43 修改
阅读量176
收藏
点赞数
于 2023-04-24 22:51:23 首次发布
文章目录
- 前言
- 基础样式
- 不同之处
前言
left与right分别设置负值是不一样的，top与bottom也是如此
基础样式
left
right
不同之处
left设置负值是实打实的移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="display: flex;">
<div style="width: 100px;height: 100px;border: 1px solid red;margin-left: -20px;">left</div>
<div style="width: 100px;height: 100px;border: 1px solid black;">right</div>
</div>
</body>
</html>
此处left移动出了屏幕
而right本身不会移动，只会让其他元素进行移动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="display: flex;">
<div style="width: 100px;height: 100px;border: 1px solid red;margin-right: -20px;">left</div>
<div style="width: 100px;height: 100px;border: 1px solid black;">right</div>
</div>
</body>
</html>
此处left没移动，而导致了right移动，看上去是left进行了移动。
扫一扫
2890
暂无认证
到【灌水乐园】发言
CSDN-Ada助手: 非常感谢您的努力为我们分享有价值的技术内容！您的第二篇博客题目和摘要都非常明确，让读者能够快速了解您所要讲述的内容。我非常期待您后续的博客，希望您能够继续创作，为我们带来更多有趣的技术知识。 同时，为了让您的博客更加全面，我想提供一些和该博文相关的扩展知识和技能。在TS环境搭建的过程中，您可以学习Webpack的配置和使用，这可以帮助您更好地管理您的项目和优化您的代码。此外，您还可以学习如何使用VS Code的插件来提高您的开发效率。希望这些建议能够对您有所帮助！ 如何写出更高质量的博客，请看该博主的分享：https://blog.csdn.net/lmy_520/article/details/128686434?utm_source=csdn_ai_ada_blog_reply2 如果您持续创作，完成第三篇博客，并且质量分达到 80 分以上，在评论区就有机会获得红包奖励哦！
CSDN-Ada助手: 恭喜您又写了一篇有价值的博客！关于typescript配置文件自动更新执行环境这个话题，您的经验分享一定会让很多读者受益。接下来，建议您可以探讨一下如何在实际项目中应用这个技巧，或者分享一些与typescript相关的更深入的知识。期待您的下一篇博客！ CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3，我们会奖励持续创作和学习的博主，请看：https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply3
CSDN-Ada助手: 恭喜您写出了这篇有趣且实用的博客，分享了使用parcel让浏览器能直接执行ts文件的方法。对于像我这样的初学者来说，这篇博客非常有帮助。下一步，建议您可以继续深入探究parcel的其他用法，或者分享一些关于ts的高级技巧和实践经验。期待您的更多精彩文章。 CSDN 会根据你创作的前四篇博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply4 看奖励名单。
CSDN-Ada助手: 不知道 Vue入门 技能树是否可以帮到你：https://edu.csdn.net/skill/vue?utm_source=AI_act_vue