这是软件开发人员所普遍接受的智慧，在学习编程方面取得进步的最佳方法是“边做边学”。我不是来争这个。
但是我也目睹了仅专注于项目最终目标的新手Web开发人员如何能够养成不良习惯和对问题的笨拙变通办法，过度依赖熟悉但不合适的技术，而更清洁，更强大和更具逻辑性的替代方案仍然被忽略和未使用。
虽然看起来很简单，但定位是CSS学习者特别可能只选择一种或两种首选方法的领域。正如我对Flexbox定位所做的那样，许多学生变得过于依赖一种放置和移动元素的方式，而没有意识到还有其他技术可以使他们的生活变得如此轻松。
尽管我会自由地承认这不是CSS的最迷人的方面，但我向您保证： 如果有一个CSS领域，您想拥有无与伦比的自信，那就是它的定位。
骨架是什么，CSS定位属性就是网页。您将要在网站上看到的所有内容，功能和美观都取决于CSS定位基础提供的坚实结构。
因此，如果您发现自己逐个像素地浏览网页的各个部分，或者想知道是否有一种更简单的方法来用同样大小的链接填充响应式导航栏，那么您来对地方了以您的知识，并逐步掌握真正的CSS定位。让我们开始。
顺其自然
问题：上次忘记链接HTML和CSS文件时，页面的外观如何？
除了消失了高雅的字体，背景和边框外，您可能还注意到，在没有任何CSS定位属性的情况下，许多元素突然想要在屏幕的左侧排队。这是为什么？
好吧，您正在看的是所谓的 “正常流量”。在网页上，重力对我们在地球上的生命意味着什么：一种很容易被覆盖的弱力，一种如此普遍的力量，即使您忘记了它，也可以原谅，但在没有任何干扰的情况下，通常解释事物为什么运动或为什么不运动的主要因素。
一块……要花多长时间？
从广义上讲， 一个元素 只有其需要的大小。
与我的第一印象相反，元素不仅具有随机大小。通常，它们的行为像弹性的。首先，它们紧紧围绕内容。然后，它们将符合给定的任何盒模型上浆属性，例如宽度/高度和填充。然后他们会停下来，不要求更多像素。
尽管这是一个可靠的工作原理，但该弹性有许多常见的例外。具有定义的宽度和高度的元素会牺牲其包装行为，而flexbox和grid项也会使人想到远离此原则的情况很遥远。但是，这种弹性原理的第一个也是最明显的例外是块状单元。
块与内联：块上的新孩子
块 和 内联 是块格式化上下文的两种类型 ， 这 只是一种术语，基本上意味着所谓的“块”元素在页面上的行为和排列方式与所谓的“内联”元素不同。
简而言之， 块元素的行为类似于段落，而内联元素的行为类似于word。在英语中，每个词都位于 前一个词的右边，而每个段落都位于前 一个词的 下面 。
这是因为单词（如内联元素）可以共享水平空间，而段落和块元素则不能。
这就解释了为什么您第一次编写<h1> Hello World！</ h1>并想以海蓝宝石为背景的爵士乐时，这种海蓝宝石背景从左到右一直延伸到整个网页的主体。
除了说明有色海蓝宝石的错误选择之外，这还表明块元素 不会 围绕其内容的宽度缠绕，而是会扩展到其父容器的宽度。
其他元素，例如，默认情况下是内联元素，缩小到其内容的高度 和 宽度。实际上，内联元素是如此“弹性”，以至于它们的大小甚至都无法通过显式的高度和宽度属性来改变！
尽管它们会增长以适应填充，但是内联元素也忽略了顶部和底部的边距-随之而来的更多内容。
块元素 可以 具有width和height属性，但是如果没有它们，它们将仅包装到其内容的高度并延伸到其容器的整个宽度。
但是，尽管默认情况下<span>是内联的，而<h1>，<p>和<div>默认是块的，但是任何元素都可以将其显示值定义为更改其行为。
想在盒子里
我要说一次： 每个元素都是一个box。
不要被现代网页设计的烟雾和镜子所迷惑。如果不是盒子，那就不是元素。如果它看起来不像盒子，那就是。这句话是一个方框，这个段落是一个方框，本文中的图像都是方框，甚至网页本身也是一个方框。
这些盒子中的每个盒子都由四个部分组成，四个子盒子，实际上就像俄罗斯玩偶一样，一个装在另一个盒子中：内容盒子，填充盒子，边框和边距盒子。尽管它们都很重要，但定位元素时经常使用的是边距和填充。但是，让我们从顶部开始。而且，我的意思是中间。
该 内容框 是元素的心脏。当我们谈论元素围绕它们的内容“包装”时，这就是我们所谈论的内容的基本领域。如果不是用于填充，则该内容区域（通常）将是盒子的整个区域。你说什么填充？很高兴你问。
填充 非常简单。它回答了以下问题：“该元素应该与其内容包裹多近？”。元素 想要 占用尽可能少的空间，以使其内容尽可能紧密地包装。因此，当padding为0时，没有什么可以阻止元素包装到其内容的全部内容，而这正是它的作用。
但是增加填充值意味着必须在内容和元素边界之间保持一定距离。如果将元素包裹得很紧，然后应用填充，则元素的总面积将被迫增加，因为内容的大小相同，但现在将边界“推”得更远。但是你说这是什么边界？
很高兴你问。该 边框 从“外部”分隔元素框的“内部”。它位于元素区域的边界上。而且，尽管通常这是一个非常狭窄的区域，但重要的是要问：边框本身是在盒子内部还是外部？
很高兴你问。答案是，可以两者兼而有之。通过 默认，边框被认为是在盒子外面，但是box-sizing属性可以用来改变它，并且可以根据情况使盒子的真实大小的计算变得更加容易。
保证金：没有人的土地
保证金 是盒式拼图的第四部分，很可能是这四部分中最可能用作定位工具的部分。为什么？
在正常的流程上下文中，margin的作用与填充相似，但是margin不在内容和框的边缘之间保持距离，而是位于 框的外部，使 其他 框保持一定距离。为了适应页边距所需的距离，页面上的元素将向左，向右或按他们需要的任何方向随机播放，以确保保持无人站距离。
边距不可折叠，这意味着两个边距 不能重叠。如果一个元素的边距要求它与任何其他元素保持10px的距离，而下一个元素的边距要求它与任何其他元素保持15px的距离，则这两个元素将拒绝相距25px的距离。
位置位置
既然我们已经清楚元素是盒子，并且它们通常遵循称为“正常流”的力，那么让我们看看它们何时不为盒子。
position属性具有五个可能的值，我们实际上已经知道其中之一：静态。
静态 是position属性的默认值。这意味着“只要遵循正常流程”。静态定位的元素是所有元素中最听话的。
下一个值是 relative。相对定位的元素也非常服从，但是可以说服它们使用上，右，下和左等偏移量属性来打破规则。
相对定位的元素首先根据正常流动放置在应放置的位置，但是从那里开始，它们将根据已给出的任何偏移属性沿其他方向平移。
真正顽皮的位置值中的第一个是 绝对值。
这些元素 仅 服从偏移属性，并且 不在正常流动范围之内。绝对定位的元素根本无法“看到”正常流元素，并且其边距不会将其他任何元素推开（除了其父元素之外）。
但是，如果相对定位的元素将其“正常流动”位置作为偏移的起点， 则绝对定位的元素将从何处偏移呢？
好吧，来自他们最近的“非静态祖先”。那可能是他们的父元素，也可能只是身体。无论是哪种容器，它们的行为都好像是该容器的第一个也是唯一的子元素，并将其放置在其左上角，然后按照指示从该位置偏移。
第四位置值是 固定的。这些元素，就像它们的绝对定位表亲一样，也不正常。但是，尽管绝对元素相对于其直接祖先定位自己，而固定元素相对于其视口定位自己 。那就对了。滚动网页对固定元素没有任何意义。告诉它坐在屏幕的左侧，它将 始终 在那里。
position属性的最终选择是该组的年轻人。粘滞 定位只有在CSS3到达现场时，才会 结合相对定位和固定定位的行为。它将保持在相对位置，直到用户滚动将其移动到其“允许的”偏移量之外（例如，顶部：0px），在该位置它会“粘贴”到视口以遵守该偏移量规则。
到目前为止，我们的定位选项要么是带有边距和填充的“流入”，要么是带有静态定位和偏移的“流出”
而且有关元素自然行为的基本信息 是绝对必须知道的。但是，仅使用这些有些尴尬的定位方法构建的网站看起来有点像90年代。如果您忘记了它的外观，请访问美国地理调查局1994年突破性的网站：
对我们来说幸运的是，现在还有其他一些主要的，得到良好支持的定位技术，它们与“正常流量”和90年代的网站差不多。
让我们从网格开始。
网格和正方形
网格 几乎是新手Web开发人员可用的最强大的二维定位系统。使用网格，您可以将容器分为任意大小的网格行，网格列和网格单元，然后仅告诉子元素要占用哪些区域！
网格布局可以夸耀的其他优点包括其出色的响应屏幕尺寸的能力。他们可以使用 百分比距离单位来根据容器的宽度/高度定义行和列的宽度。或者，他们可以使用 fr单元，它是网格（“自由空间的单位”）所特有的，并且基本上指示网格 按fr单位在行和列之间按比例分配 未占用的空间。
网格的力量在于宏观结构。当flexbox或常规流定位完全可以完成工作时，许多较小的容器不需要网格定位。但是用页边距，偏移量，浮点数甚至是flexbox布局整个网页可能会变得异常复杂，就像用火柴棍搭建小木屋一样。
通过允许网格控制大范围的位置，然后通过填充，边距，偏移量等来微调位置，您可以发挥每种方法的优势，并保持代码的清洁和可靠。
弹性盒
网格是二维布局系统，而 flexbox 定位最适合一维上下文。
Flexbox容器具有主轴线和交叉轴。例如，在水平导航栏中，主轴从左到右，而横轴从上到下。
Flex的项目自动消耗所有在提供给他们的空间的 交叉轴。 可以通过flex-basis和flex-grow等属性非常精确地控制主轴上的空间的 分布方式，这些属性指示flex项目应该扩展多少以填充空白空间。或者，可以使用justify-content属性将空间保留为空白并分布在项目之间的间隙中。使用flexbox，相对于项目所在的空间以及与其共享空间的其他项目，项目的大小比其大小并不重要。
Flexbox非常出色。结合媒体查询，响应的度量单位和flex-wrap属性，flexbox布局可以使导航栏和其他容器在拉伸或收缩时都能无缝适应。但是，它们确实在一维布局环境中发挥了自己的作用，介于网格擅长的大规模结构与填充和边距提供的“完成修饰”之间。
小编也在前端混了有几年，整理了一些学习资料，对web开发技术感兴趣的同学欢迎加入新建的Q群：603985993，不管你是小白还是大牛我都欢迎，希望大家诚心交流！还有大牛整理的一套高效率学习路线和教程与您免费分享，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!
结论
我相信本文的内容代表了CSS定位方面的一些最重要的概念和工具，即使没有涉及浮动，z-index或不同定位规则相互作用的数百万种小方法，我目前也在这里发现每天至少这些。
但是，了解不同定位方法的本能甚至比理解您可以使用的概念和工具更为重要。没有“好”和“坏”的定位方法，只有“对此有利”和“对此不利”。
Web开发的新手-我是从第一手经验讲到的-很容易被CSS的闪光点，其颜色和背景，其视频和图像，其字体和边框所迷惑，以至于他们忽略了真正采用是时候了解他们构建的每个网页上的定位机制了。我认为他们应该。
掌握定位基础知识意味着知道您的工具是什么以及何时使用它们。您可能完全熟悉本文中介绍的某些技术，但是我相信避免过度依赖您最自信的领域意味着您的工具包将变得多样化，这只能提高您创建的网站的质量以及您在此期间的乐趣创建它们。
但是，对于该建议，我要补充一点： 通过学习来做。 不要对自己的方式陷入困境，而对其他方式感到好奇。与其保持舒适，不如适应其他事物。不要与您的薄弱环节进行谈判，直接对着他们！因为在诸如开发这样的领域中，总会有更好的方法。所以去找到它。
网友评论