热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS布局的实用小技巧:margin负值

负边距即margin属性的值设为负值,在CSS布局中时一个很有用的技巧。当margin-bottom、margin-right设为负值的时候,元素本身没有位置变化,后面的元素会下移、右移。

负边距即margin属性的值设为负值,在CSS布局中时一个很有用的技巧。值为正的场景很常见,大家都很熟悉其表现

  • 当margin-top、margin-left为负值的时候,会把元素上移、左移,同时文档流中的位置也发生相应变化,这点与position:relative的元素设置top、left后元素还占据原来位置不同

  • 当margin-bottom、margin-right设为负值的时候,元素本身没有位置变化,后面的元素会下移、右移

看几个应用场景

绝对定位元素

当元素被设置为绝对定位的时候其top、right、bottom、left值是指离最近的非static元素的距离,经典的垂直居中的一种方式正是利用的绝对定位元素的负边距实现的

把元素设置为绝对定位,然后设置top和left为50%,这时候元素的上边、左边就到了父元素的50%处,再对元素设置其自身高度、长度一般的负边距,使元素中心移动到父元素中心,实现居中对齐

float元素

负边距对float元素的影响也是按照上面说的,不过有其特殊性,我们看个例子就很清楚了

浮动元素负边距

在一个宽度为280px的div中右3个float:left的子元素,宽度为100px,由于一排放不下,最后一个陪移动到了下一行

我们对代码稍作修改

第三个元素添加-20px的负边距

这时候发现第三个元素移上去了,并且覆盖了第二个元素20px,经典的多列布局正是利用此原理

多列布局

Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
Right

代码很简单

  • 为content元素添加父元素,设置左浮动,宽度100%

  • content元素设置右边距,值等于right的宽度

  • right左浮动,然后设置其宽度的负边距

本来right应该在第二行显示了,但是其宽度的左浮动使它到了第一行的最右边,覆盖了wrap的一部分,但是content有right宽度的右边距,覆盖区域没有内容,这样就实现了两列布局

普通元素

负边距对不同块元素的影响很有意思,我们通过几个例子来看一下

多列列表

  • aaa
  • bbb
  • ccc
  • ddd
  • eee
  • fff
  • ggg
  • hhh
  • iii

普通的做法我们肯定是通过浮动实现,通过刚才介绍的知识应该不难理解为什么这样也行。看起来在普通元素上没什么稀奇的

放大元素

什么?负边距还可以放大元素!!!

inner inner inner inner inner inner inner inner inner inner inner inner

这个例子看起来平淡无奇,效果却很惊人,内层的div设置了水平的负边距后竟然变大了

看到这种效果你第一想法是什么?会不会是子元素设置margin-right,在遍历的时候nth-child(3n)还要设置为0,看看利用上面知识我们可以怎样处理

我们没有设置nth-child(3n)的边距为0,而是通过负边距使父元素“变大”。

负边距是不是很有意思,不很了解的少年们学起来吧!

更多编程相关知识,请访问:编程学习!!

以上就是CSS布局的实用小技巧:margin负值的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 探讨并提供解决方案以应对 'view is not in the window hierarchy' 的错误提示。 ... [详细]
  • 本文介绍了如何处理MySQL数据库中表 'xdb.auditlog' 被标记为已损坏的问题,并提供了解决方案。 ... [详细]
  • 本文介绍了多种Eclipse插件,包括XML Schema Infoset Model (XSD)、Graphical Editing Framework (GEF)、Eclipse Modeling Framework (EMF)等,涵盖了从Web开发到图形界面编辑的多个方面。 ... [详细]
  • 本文详细介绍了一种实现PopupWindow全屏显示且能有效隐藏虚拟按键的技术方案,适用于Android开发。此方法经过实际测试,表现良好,兼容性优秀。 ... [详细]
  • BeautifulSoup4 是一个功能强大的HTML和XML解析库,它能够帮助开发者轻松地从网页中提取信息。本文将介绍BeautifulSoup4的基本功能、安装方法、与其他解析工具的对比以及简单的使用示例。 ... [详细]
  • 本文介绍了如何使用Maven命令对Spring Boot项目中的子模块进行独立打包,包括依赖树的查看、项目的运行和打包等基本操作。 ... [详细]
  • 深入理解异步多线程编程模型
    现代计算机系统中的CPU通过并行处理提高效率,但所谓的并发处理实际上是一种基于轮询的模拟并行。本文探讨了现代处理器如何通过虚拟化技术实现更高的并发性能,以及在.NET框架中如何有效利用线程和异步编程模式。 ... [详细]
  • 本文探讨了 Boost 库中的 Program Options 组件,这是一个强大的工具,用于解析命令行参数和配置文件。文章介绍了如何正确设置和使用该组件,包括处理复杂选项和负数值的方法。 ... [详细]
  • 本文通过具体示例详细介绍了 Python 中的装饰器和装饰类的使用方法,包括带参数的装饰器和装饰类的应用场景。 ... [详细]
  • 解决 Pytest 运行时出现 FileNotFoundError 的方法
    在使用 Pytest 进行测试时,可能会遇到 FileNotFoundError 错误,提示无法找到指定的文件或目录。本文将探讨该错误的原因及解决方案。 ... [详细]
  • HDU1085 捕获本·拉登!
    问题描述众所周知,本·拉登是一位臭名昭著的恐怖分子,他已失踪多年。但最近有报道称,他藏匿在中国杭州!虽然他躲在杭州的一个洞穴中不敢外出,但近年来他因无聊而沉迷于数学问题,并声称如果有人能解出他的题目,他就自首。 ... [详细]
  • SpringBoot新手入门指南
    本文旨在为初次接触SpringBoot的开发者提供一份详细的入门指导,包括如何快速搭建并运行一个简单的SpringBoot应用。通过本文,读者将了解Maven项目的构建、必要的配置文件设置以及基本的应用开发流程。 ... [详细]
  • 本视频详细介绍了如何利用J2EE、JBPM 3.x/4.3、Flex流程设计器、jQuery以及授权认证机制构建高效的企业普及版贝斯OA及工作流管理系统。 ... [详细]
  • BL550721、特点液晶驱动输出:Common输出4线,Segment输出36线内置显示寄存器364144bit2线串行接口(SCL,SDA)内置震荡电路内置液晶驱动电源电路13 ... [详细]
  • 本文详细介绍了使用Java语言来测量程序运行时间的方法,包括代码示例和实现步骤,旨在帮助开发者更好地理解和应用时间测量技术。 ... [详细]
author-avatar
龙行天下1027
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有