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)
上一篇 2021年12月20日 下午2:00
下一篇 2021年12月20日 下午3:00


相关推荐

  • JS如何取整数

    JS如何取整数1.丢弃小数部分,保留整数部分parseInt(5/2)2.向上取整,有小数就整数部分加1Math.ceil(5/2)3,四舍五入.Math.round(5/2)4,向下取整Math.floor(5/2)

    2022年6月16日
    38
  • mysql格式化工具_SQL Pretty Printer-不错的SQL格式化工具

    mysql格式化工具_SQL Pretty Printer-不错的SQL格式化工具前言好长时间没有写过博客了 人变懒了很多 应该说本来也不怎么勤快 但今天为了这个工具 必须得勤快一下了 天下真的没有免费的午餐 之前使用过 sqlserver200 的查询设计器和 Toadfororacl 都有格式化 Sql 语句的功能 感觉很方便 尤其对于我这种有着轻微强迫症的人来说 当最近把 SQLServerMan SSMS 升级到 2008R2 版本时 没有

    2026年3月18日
    2
  • sqlite 锁机制_SQLite读写为什么冲突

    sqlite 锁机制_SQLite读写为什么冲突sqlite读写锁SQLite3总共有三种事务类型:BEGIN[DEFERRED/IMMEDIATE/EXCLUSIVE]TRANSCATION,提供以下五种的文件锁状态,按锁的级别依次是:UNLOCKED/SHARED/RESERVERD/PENDING/EXCLUSIVE。1).UNLOCKED:无锁  文件没有持有任何锁,即当前数据库不存在任何读或写…

    2022年8月12日
    9
  • IntentService的原理及使用

    在Android开发中,我们或许会碰到这么一种业务需求,一项任务分成几个子任务,子任务按顺序先后执行,子任务全部执行完后,这项任务才算成功。那么,利用几个子线程顺序执行是可以达到这个目的的,但是每个线程必须去手动控制,而且得在一个子线程执行完后,再开启另一个子线程。或者,全部放到一个线程中让其顺序执行。这样都可以做到,但是,如果这是一个后台任务,就得放到Service里面,由于Service和Ac

    2022年4月7日
    43
  • 金税盘计算机USB无法识别,金税盘连接电脑无法识别怎么回事?「建议收藏」

    金税盘计算机USB无法识别,金税盘连接电脑无法识别怎么回事?「建议收藏」金税盘连接电脑无法识别怎么回事?答:部分情况可能是因为USB供电不稳定,造成金税盘驱动无法正常运行;建议电脑重启,金税盘数据线重新插拔一下或者更换一个USB端口连接试试.如果多次尝试无效,则需要联系服务单位处理.金税盘使用增值税防伪税控系统,可开具增值税专用发票和增值税普通发票,营改增试点地区和行业一般纳税人(提供货物运输服务的纳税人除外)适用.税控盘使用货物运输业专用发票税控系统,可开具货物运输…

    2022年6月11日
    135
  • 一个线程有几个threadlocal_thread线程

    一个线程有几个threadlocal_thread线程基本概念程序是指令的有序集合,其本身没有任何运行的含义,是一个静态的概念。而进程是程序在处理机上的一次执行过程,它是一个动态的概念。进程是由程序、数据和进程控制块三部分组成的。进程是操作系统资源分配的基本单位,而线程是任务调度和执行的基本单位。每个进程都有独立的代码和数据空间(程序上下文),程序之间的切换会有较大的开销;线程可以看做轻量级的进程,同一类线程共享代码和数据空间,每个线程都有自己…

    2025年8月8日
    6

发表回复

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

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