热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

CSS四大定位模式

我是表哥Harker,表妹我来咯~上一篇浮动应该是很吃力的,还是多多复习,反复的思考,很多东西是固定的语法,你只能按照它的语法来,有些知识需要去牢记,就像写代码编程开发,语法固定

我是表哥Harker,表妹我来咯~

上一篇浮动应该是很吃力的,还是多多复习,反复的思考,很多东西是固定的语法,你只能按照它的语法来,有些知识需要去牢记,就像写代码编程开发,语法固定,就看你怎么灵活去运用了,这一篇讲解CSS定位又是一个大头鬼!如果表妹们真的能学完这篇下来,你已经进入了新的境界了,你会发现新大陆,CSS原来还能这样玩!

 

CSS 定位

为什么需要定位 ?

  • 1. 某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子
  • 2. 当我们滚动窗口的时候,盒子是固定屏幕某个位置的

  • 以上效果,标准流或浮动都无法快速实现,此时需要定位来实现

所以: 

  • 1. 浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子 (行内块元素之间有缝隙)
  • 2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子

 

1、定位 <


推荐阅读
  • [Offer收割]编程竞赛第8轮 A 小Ho的完美主义倾向
    题目链接:小Ho的完美主义倾向题目描述:小Ho在一条直线型的街道上漫步。这条街道由若干块长度为L的石板铺设而成,因此每隔L的距离就会出现一道石板间的接缝。小Ho对这些规律排列的接缝产生了浓厚的兴趣,他决定研究如何在这条街道上行走,以满足自己对完美路径的追求。本题要求在给定的约束条件下,计算出小Ho能够实现其目标的所有可能方案数。 ... [详细]
  • LeetCode 算法挑战:最小栈的 Java 实现与优化 ... [详细]
  • Elasticsearch 嵌套调用中动态类导致数据返回异常分析与解决方案 ... [详细]
  • 针对拥有约300万条记录的大型SQL数据库,网站性能受到影响。为了提升效率,建议根据实际使用情况采取优化措施。例如,如果常用字段较多,可以考虑进行横向分表,按特定规则拆分数据以减轻单表负担。此外,还可以通过索引优化、查询重构和缓存机制等手段进一步提高数据库性能。 ... [详细]
  • 本文深入探讨了MD5与SHA1哈希算法在实际应用中的表现及其安全性。通过对这两种算法的详细分析,揭示了它们在数据完整性验证和密码存储等方面的优势与局限。文章不仅介绍了算法的基本原理,还讨论了近年来针对这些算法的安全性攻击,并提出了改进措施和替代方案。希望读者能够通过本文对哈希算法有更全面的理解。 ... [详细]
  • 本文深入探讨了层叠样式表(CSS)的核心原理与应用技巧,旨在帮助读者全面理解CSS的工作机制。从选择器、属性到布局模式,文章详细解析了CSS的关键概念,并通过实例展示了如何高效运用这些技术,提升网页设计与开发的水平。 ... [详细]
  • 在《物联网内核与驱动开发基础课程》第五讲中,详细解析了平台总线技术的应用与开发。本讲内容不仅涵盖了平台总线的基本概念,还深入探讨了其在嵌入式系统中的实现方法及优化策略,为开发者提供了宝贵的实践指导。通过具体案例分析,帮助学员更好地理解平台总线在设备管理、资源分配等方面的关键作用。 ... [详细]
  • 本文详细阐述了如何从源代码编译Apache HTTPD 2.4服务器,涵盖了必要的依赖安装、配置步骤及编译过程。通过本指南,读者可以深入了解HTTPD的内部机制,并掌握在Linux环境下手动构建HTTPD的方法。建议对服务器管理和开发感兴趣的读者仔细阅读,以获取更多实用技巧。例如,使用`yum install gcc pcre-devel`来安装所需的编译工具和库。 ... [详细]
  • Java进阶之旅:第六阶段深度解析与实践
    在之前的Java进阶之旅中,我们已经深入探讨了Java语言的核心特性,包括继承、封装和多态。本文将在此基础上,进一步解析第六阶段的关键概念和技术实践,帮助读者深化对Java高级特性的理解和应用。通过具体的代码示例和实际项目中的应用场景,我们将探讨如何高效地利用这些特性解决复杂问题,提升开发效率和代码质量。 ... [详细]
  • 本文深入探讨了 Python 中 `issubclass` 内置函数的功能与应用。该函数用于检查一个类是否为另一个类的子类(包括直接、间接或虚拟继承)。通过详细解析其工作原理和实际应用场景,帮助开发者更好地理解和使用这一重要工具。 ... [详细]
  • 阿里巴巴Java后端开发面试:TCP、Netty、HashMap、并发锁与红黑树深度解析 ... [详细]
  • 如何在DataGridView中实现带有图标的单元格显示
    本文详细探讨了在C# WinForms应用程序中,如何通过DataGridView控件实现带有图标的单元格显示。文章不仅提供了具体的实现方法,还深入解析了相关技术细节,对于希望提升用户界面交互体验的开发者而言,具有很高的参考价值。 ... [详细]
  • 【每日算法】移除排序数组中的重复元素(JavaScript实现) ... [详细]
  • 本文简要介绍了 MacOS 系统的分区与引导机制。通过详细解析系统分区结构和引导加载过程,帮助用户更好地理解 MacOS 的启动流程。文章还涵盖了不同版本 MacOS 的分区特点,以及如何在遇到引导问题时进行故障排除。对于希望深入了解 MacOS 内部运作机制的用户来说,本文提供了丰富的技术细节和实用建议。 ... [详细]
  • 开发技巧分享:利用套索与矩形选择工具高效选取绘图中的全部字形节点
    开发技巧分享:利用套索与矩形选择工具高效选取绘图中的全部字形节点 ... [详细]
author-avatar
从容嘛_100
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有