到目前为止，很多人都不知道CSS是如何工作的，这已经不是什么秘密了，尤其是当您是第一次接触CSS时。很难弄清楚为什么一个元素在某个位置，或者为什么尽管使用important来覆盖它，但元素仍然是红色。在本文中，我将介绍有关CSS的7个核心概念，它们将帮助您了解正在发生的事情（哪怕是一点点）。请注意，这篇文章不适合CSS老手，没有任何令人兴奋的功能或类似的东西，它只涵盖CSS的核心概念。1.显示你有没有试过并排放置两个div，但另一个div却在单独的一行上？或者尝试将链接放在单独的行中，但其他元素不知何故就在它旁边？我有你覆盖！使用显示属性，您可以控制元素在页面上的显示方式。虽然许多站点使用flexbox和网格（我不会介绍，因为今天的内容是初学者指南），但您一定会遇到仍然使用旧显示属性进行布局的站点。1.1、显示块块元素默认占用100%的可用空间，不允许任何元素放在同一行，即使你减小宽度（如上图所示），元素大小也会减少，但它仍然不允许将元素放在同一行上在它旁边放置另一个元素。默认情况下，大多数HTML元素都是块元素。1.2、显示行内块Inline-Block元素允许其他非块元素紧挨着放置，只有当这些元素没有剩余空间时才会将其他元素推到下一行。1.3、显示内联Inline元素类似于inline-block，因为它们允许在其旁边放置其他元素，但内联元素的尺寸（宽和高）不能改变，它们的尺寸由它们的内容（文本和填充）。注意：您可以使用
元素在内联/内联块元素之后换行。2.盒子模型在HTML中，一切都是盒子（是的，即使是圆形、三角形等也只是剪裁盒子）。但是这些盒子是如何工作的呢？盒子里面的空位是怎么加的？盒子外面呢？究竟什么是“盒子”？注意：这是假设以下代码块在所使用的CSS文件中，它是如此普遍，你甚至不需要知道如果它不存在会发生什么。*{box-sizing:border-box;}“盒子”基本上是HTML元素的构建块，由四个主要块组成：边距、边框、填充和内容）。2.1.MarginMargin在被选元素和周围所有元素之间添加空白，不影响元素内容的大小。现在这是一个巧妙的小秘密，从边框的外边缘开始，margin-top将所选元素向下推而不移动其他元素，而margin-bottom将所述元素保持在原位并将其他元素向下推。margin-left将所选元素向右推并且不移动其他元素，而margin-right将所述元素保持在原位并将其他元素向右推。虽然一开始听起来可能令人困惑，但它是这样工作的，因为HTML是从上到下和从左到右呈现的。我强烈建议使用开发工具中的边距来更好地了解它是如何工作的。现在提出一个开创性的问题：假设我有两个块元素——A和B，A在B之上——如果我添加margin-bottom:15px;会发生什么？到A和margin-top:10px;给乙？如果您认为它们相距25像素，很遗憾地通知您您错了。为什么？因为利润率崩溃了！基本上，如果你有两个相反方向的边距，只有较大的一个（在本例中为15px）将被渲染，另一个将被忽略。所以在我们的示例中，A和B仅相隔15px。我知道需要消化的内容很多，但我保证其他属性不会那么复杂。2.2.Border边框定义了元素边缘的外观，它也带走内容并将内容向内推。因此，如果我们有一个100*100px的元素，添加一个10px的边框将为我们留下90*90px的内容。2.3.填充在元素的边界内添加空白空间——不是空白，这意味着如果元素有背景颜色，它不会受到影响——将它从内容大小中移除，并将其向内推。使用与上面相同的示例，具有10px的边框和10px的填充将为我们留下80x80px的内容。2.4.Contentcontent基本上就是计算padding和border后剩下的空间。它是文本或图像或子HTML元素开始出现在所选元素中的位置。3.定位我知道你试过给top:50px;到你的元素，想知道为什么它没有移动，我们都去过那里。这就是为什么我们需要讨论position属性，它允许您控制元素的位置。3.1、所有静态HTML元素都是position:static;默认情况下。这意味着你不能用top、left、right、bottom属性移动它们，它们仍然可以用margin、flexbox等移动。但在某些情况下，你只想稍微移动那个元素而不移动它周围的元素，那就是为什么位置：相对；接下来是3.2、相对的好，但是相对的是什么？职位：相对；意味着元素将相对于其原始位置定位，而不移动其周围的任何其他元素，这与边距不同。通过使用relative，您现在可以使用top、left、right和bottom属性来重新定位您的元素。3.3,absolute我建议你把下面的句子读10遍，因为一开始很容易混淆。位置：绝对；相对于最近的非位置：static；parent（如果没有这样的元素，它相对于body放置）并将该元素从HTML流中取出，使该元素浮动在其他元素之上。您绝对应该只在创建需要浮动在其他元素之上的东西（例如弹出按钮或关闭按钮）时使用此属性，并且通常，您使用此属性的次数越少越好。3.4、固定位置：固定；类似于absolute，它使元素浮动在其他元素之上。但是，它始终相对于文本定位，即使您滚动页面，它也会保持原样。4.选择器虽然我很想讨论这个话题，但是关于它的文章已经有成千上万篇了。我没有太多要补充的。我最喜欢的是官方MDN文档，（地址：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity）你应该在大多数时候使用类来设置元素的样式，并且避免在任何时候使用!important可能的。但是，我将在调试部分讨论如何直接从开发工具中知道哪个选择器具有更高的特异性。5.继承一些CSS属性——字体大小、字体系列和颜色等——当且仅当它们没有为给定元素指定时，才会从它们最近的父元素继承。以下HTML：
