margin的使用方法与技巧

1.margin还可以用来做平移,作用类似translate哈哈。将元素设成absolute后就可以用margin随便平移他了,既不像relative那样要霸占空间,又不用为父元素设置relative

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

全栈程序员社区此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“验证码”,获取验证码。在微信里搜索“全栈程序员社区”或者“www_javaforall_cn”或者微信扫描右侧二维码都可以关注本站微信公众号。

1.margin还可以用来做平移,作用类似translate哈哈。将元素设成absolute后就可以用margin随便平移他了,既不像relative那样要霸占空间,又不用为父元素设置relative,还可以和top,left,right,bottom组合使用

2.当为div设置padding后有些元素又想占满div, 这时只要设置这个元素的margin为负padding的值就行了

 1 <b>marign 妙用1:</b>
 2 
 3 <div class="padding20">
 4     padding20
 5     <hr class="margin_20"/>
 6     hr通过margin设成负数占满了div
 7 </div>
 8 <hr/>
 9 <b>marign 妙用2:</b>
10 <div class="relative">
11         absolute,相对位置(需要设置父元素为relative)
12         <div class="abs">
13             移动到这
14         </div>
15 </div>
16 <br/>
17 <hr/>
18 <div>
19     使用relative,相对位置
20         <div class="relativeMove">
21             移动到这
22         </div>
23     上边被relative占了一行空间!
24 </div>
25 <br/>
26 <hr/>
27 <div>
28         使用margin,相对位置
29         <div class="margin">
30             移动到这
31         </div>
32     没被占用空间
33 </div>

css:

 1 .relative {
 2     position: relative;
 3     width: 300px;
 4 }
 5 
 6 .abs {
 7     position: absolute;
 8     right: 10px;
 9     top: -10px;
10     color: orange;
11 }
12 .margin {
13     position: absolute;
14     margin-left: 120px;
15     margin-top: -30px;
16     color: red;
17 }
18 .relativeMove {
19     position: relative;
20     right: -120px;
21     top: -30px;
22     color: green;
23     
24 }
25 .padding20 {
26     padding: 20px;
27     width: 200px;
28     border: 1px solid green;
29 }
30 .margin_20 {
31     margin: 0 -20px;
32 }

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/120759.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • react中postMessage与addEventListener的使用

    react中postMessage与addEventListener的使用有时候两个页面之间不是父子组件的情况下,信息交互很难搞,看到有人用postmessage来进行消息交互,我也试了一下,哎呀妈真香!!!1、首先在需要发送消息的界面中使用postMessage使用的是React+TypeScript,逻辑是更新提交的时候刷新打开当前页面的父窗口,postMessage用法如下:if(window.opener&&window.opener.location&&window.opener.location.href){

    2022年7月12日
    60
  • 【MQTT】在Windows下搭建MQTT服务器

    【MQTT】在Windows下搭建MQTT服务器最近在项目中要使用MQTT协议,需要搭建一个MQTT服务器来进行调试,在网络上找了一天,找到的大多数都是MQTT客户端,最后发现这篇博客写的教程可以使用,特此记录。

    2022年6月14日
    30
  • python 打包exe文件[通俗易懂]

    上一篇说了我自己做了一个定时截屏的工具,我想如果我可以打包成exe文件,那我就可以单独放在桌面运行,不用进入程序启动运行就可以完成截屏工作了。安装模块1、pyinstaller这里建议最好使用命令安装,手动下载安装有很多其他的模块不存在,我就一开始是手动安装,安装一次缺一个模块,然后补一个,然后又少一个,命令行安装就没这个问题了pipinstallpyinstaller2、pyQt…

    2022年4月14日
    42
  • 10月22日Ajax培训日记

    10月22日Ajax培训日记今天还是由梁言兵老师讲解Ajax,根据昨天学员的反馈,觉得AjaxTable这个项目太大了,学习起来有点费劲,希望梁老师讲一个较小的综合案例。所以,梁老师先讲解XTree这个客户端JavaScript组件,然后结合XTree,buffalo,spring,hibernate这些框架开发一个Ajax的demo。小收获:varobj={a:’xxx’b:function(){}}定义…

    2025年10月30日
    11
  • 别人的收藏_自己的qq收藏别人是否能看到

    别人的收藏_自己的qq收藏别人是否能看到0DAY 0daydivxz数据库0dayGamezHowtotellNFOrceEntertainmentTLF0DayCheckIndexTLF资讯网UGiA0daysearchengine_2002-2005梦幻0Day~game阿拉下载龙族-北京站-MCSYSTEM2004 BBS  下载论坛

    2022年10月8日
    2
  • c#csdn_C++ 教程

    c#csdn_C++ 教程C#是微软于2000年6月发布的一种面向对象的、运行于.NETFramework上的高级程序设计语言。它是第一个面向组件的编程语言,同时也是微软.NETwindows网络框架的主角。从语言风格上来讲,C#受到了C,C++和C#的影响,兼顾了各语言的优点,也对各语言存在的问题进行了改进,因此它是一门很优秀的语言。从目前来看,c#大有赶超JAVA之势,它几乎集中了所有关于软件开发和软件…

    2025年9月23日
    5

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号