每个Web开发人员都应该知道的7个CSS

到目前为止，很多人不知道CSS是如何工作的，不过这已经不是什么秘密了，尤其是当你第一次接触CSS时。很难弄清楚为什么一个元素位于某个位置，或者为什么该元素具有红色，尽管使用了重要的覆盖它。在本文中，我将介绍7个关于CSS的核心概念，它们将帮助您了解发生了什么（即使是一点点）。请注意，这篇文章不适合CSS资深人士，没有任何令人兴奋的功能或类似的东西，它只涵盖了CSS的核心概念。1、Display你是否曾经尝试过将两个div并排放置，但另一个div最终位于单独的一行？或者尝试将链接放在单独的行上，但其他元素以某种方式在它旁边结束？我已经覆盖了你！使用display属性，您可以控制元素在页面上的显示方式。虽然很多网站都在使用flexbox和grid（我不会介绍，因为今天的内容是一个初学者指南），但您肯定会遇到一个仍然使用旧显示属性进行布局的网站。1.1、显示块块元素默认占用%的可用空间，并且不允许任何元素放置在同一行上，即使您减小宽度（如上图所示），元素大小也会减小，但仍然不会允许在它旁边放置另一个元素。大多数HTML元素默认是块元素。1.2、显示内联块Inline-Block元素允许将其他非块元素放置在它们旁边，并且只有在没有空间留给这些元素时才会将其他元素推到下一行。1.3、显示内联内联元素类似于inline-block，因为它们允许将其他元素放在它们旁边，但是内联元素的尺寸（宽度和高度）不能更改，它们的尺寸由它们的内容（文本和填充）。注意：您可以使用br元素在inline/inline-block元素之后换行。2、盒子模型在HTML中，一切都是一个盒子（是的，甚至圆形、三角形等都只是剪切框）。但是，这些盒子是如何工作的呢？盒子内的空白空间是如何添加的？盒子外面呢？“盒子”到底是什么？注意：这是假设下面的代码块在使用的CSS文件中，它非常流行，你甚至不需要知道如果它不存在会发生什么。

*{box-sizing:border-box;}“盒子”基本上是HTML元素的构建块，它由四个主要块组成：边距（margin)、边框(border)、填充(padding)和内容(content)。2.1、边距边距在所选元素及其周围的所有元素之间添加空白空间，并且不会影响元素内容的大小。现在有个巧妙的小秘密，从边框的外边缘开始，margin-top将选定的元素向下推动而不移动其他元素，而margin-bottom将所述元素保持在原位并向下推动其他元素。margin-left将所选元素推到右侧，并且不移动其他元素，而margin-right将所述元素保持在原位并将其他元素推到右侧。虽然一开始可能听起来令人困惑，但它的工作原理是这样的，因为HTML是从上到下、从左到右呈现的。我强烈建议在开发工具中使用边距，以便更好地了解它的工作原理。现在提出一个开创性的问题：假设我有两个块元素——A和B，A在B之上——如果我添加margin-bottom:15px;会发生什么；到A和margin-top:10px;给B?如果您认为它们之间的距离为25像素，我很抱歉地通知您您错了。为什么？因为边距崩溃！基本上，如果您有两个方向相反的边距，则只会渲染较大的边距（在本例中为15px），而另一个将被忽略。所以在我们的例子中，A和B仅相隔15px。我知道这需要消化很多，但我保证其他属性没有那么复杂。2.2、边框边框定义了元素边缘的外观，它还带走了内容并将内容向内推。因此，如果我们有一个*px的元素，添加一个10px的边框将为我们留下90*90px的内容。2.3、填充padding在元素的边界内添加空白空间——不是空白，这意味着如果元素具有背景颜色，它将不会受到影响——从内容大小中移除，并将其向内推。使用与上面相同的示例，拥有10像素的边框和10像素的内边距将为我们留下80x80像素的内容。2.4、内容内容基本上就是计算完padding和border后剩下的空间。它是文本或图像或子HTML元素开始出现在所选元素中的位置。3、定位我知道你试过给top:50px;你的元素，想知道为什么它没有移动，我们都去过那里。这就是为什么我们需要讨论position属性，它允许您控制元素的位置。3.1、static所有HTML元素都是position:static;默认情况下。这意味着您不能使用top、left、right、bottom属性来移动它们，它们仍然可以使用margin、flexbox等来移动。但在某些情况下，您只想将该元素稍微移动到没有在它周围移动元素，这就是为什么position:relative;接下来即将到来。3.2、relative好的，但相对于什么？位置：相对；意味着元素将相对于其原始位置放置，而与边距不同，不会移动它周围的任何其他元素。通过使用relative，您现在可以使用top、left、right和bottom属性来重新定位您的元素。3.3、absolute我建议您将以下句子阅读10遍，因为一开始它很混乱。位置：绝对；相对于最近的非位置定位所选元素：静态；parent（如果没有这样的元素，它相对于body放置），并将元素从HTML流中取出，导致元素浮动在其他元素之上。您绝对应该只在创建需要浮动在其他元素之上的东西（例如弹出或关闭按钮）时才使用此属性，通常，您使用该属性的次数越少越好。3.4、Fixed位置：固定；与absolute类似，它使元素浮动在其他元素之上。但是，它始终是相对于正文放置的，即使您滚动页面，它也会保持在原来的位置。4、选择器尽管我很想讨论这个话题，但已经有上千篇关于它的文章了，我没有太多要补充的，我最喜欢的一篇是MDN官方文档，（

转载请注明：http://www.guyukameng.com/aspnet/aspnet/2022-07-08/15705.html