共计 3503 个字符，预计需要花费 9 分钟才能阅读完成。
本文将介绍 7 个对于 CSS 的外围概念，心愿对初学者有些许帮忙。
1、Display
你是否已经尝试过将两个 div 并排搁置，但另一个 div 最终位于独自的一行？或者尝试将链接放在独自的行上，但其余元素以某种形式在它旁边完结？我曾经笼罩了你！应用 display 属性，您能够管制元素在页面上的显示方式。尽管很多网站都在应用 flexbox 和 grid，但您必定会遇到一个依然应用旧显示属性进行布局的网站。
1.1、显示块
块元素默认占用 100% 的可用空间，并且不容许任何元素搁置在同一行上，即便您减小宽度，元素大小也会减小，但依然不会容许在它旁边搁置另一个元素。大多数 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 像素，我很道歉地告诉您您错了。为什么？因为边距解体！基本上，如果您有两个方向相同的边距，则只会渲染较大的边距，而另一个将被疏忽。所以在咱们的例子中，A 和 B 仅相隔 15px。我晓得这须要消化很多，但我保障其余属性没有那么简单。
2.2、边框
边框定义了元素边缘的外观，它还带走了内容并将内容向内推。因而，如果咱们有一个 100x100px 的元素，增加一个 10px 的边框将为咱们留下 90x90px 的内容。
2.3、填充
padding 在元素的边界内增加空白空间——不是空白，这意味着如果元素具备背景色彩，它将不会受到影响——从内容大小中移除，并将其向内推。应用与下面雷同的示例，领有 10 像素的边框和 10 像素的内边距将为咱们留下 80×80 像素的内容。
2.4、内容
内容基本上就是计算完 padding 和 border 后剩下的空间。它是文本或图像或子 HTML 元素开始呈现在所选元素中的地位。
3、定位
我晓得你试过给 top:50px；你的元素，想晓得为什么它没有挪动，咱们都去过那里。这就是为什么咱们须要探讨 position 属性，它容许您管制元素的地位。
3.1、static
所有 HTML 元素都是 position:static；默认状况下。这意味着您不能应用 top、left、right、bottom 属性来挪动它们，它们依然能够应用 margin、flexbox 等来挪动。但在某些状况下，您只想将该元素略微挪动到没有在它四周挪动元素。
3.2、relative
地位：绝对；意味着元素将绝对于其原始地位搁置，而与边距不同，不会挪动它四周的任何其余元素。通过应用 relative，您当初能够应用 top、left、right 和 bottom 属性来从新定位您的元素。
3.3、absolute
地位：相对；绝对于最近的非地位定位所选元素：动态；parent(如果没有这样的元素，它绝对于 body 搁置)，并将元素从 HTML 流中取出，导致元素浮动在其余元素之上。您相对应该只在创立须要浮动在其余元素之上的货色 (例如弹出或敞开按钮) 时才应用此属性，通常，您应用该属性的次数越少越好。
3.4、Fixed 地位
固定；与 absolute 相似，它使元素浮动在其余元素之上。然而，它始终是绝对于注释搁置的，即便您滚动页面，它也会放弃在原来的地位。
4、选择器
只管我很想探讨这个话题，但曾经有上千篇对于它的文章了，我没有太多要补充的，我最喜爱的一篇是 MDN 官网文档，(地址：#/en-US/docs/Web/CSS/Specificity) 您应该在大多数工夫应用类来设置元素的款式，并尽可能防止应用！
5、继承
一些 CSS 属性——font-size、font-family 和 color 等等——是从它们最近的父级继承的，当且仅当它们没有为给定元素指定时。以下 HTML：<；divclass=”grand-parent”>；<；divclass=”parent”>；<；divclass=”child”>；<；/div>；<；/div>；<；/div>；
如果咱们给祖父母 div 色彩：红色；思考到所述 div 没有指定色彩属性，父 div 和子 div 都将具备红色文本色彩。如果它们中的任何一个指定了色彩，它将笼罩继承，不，在祖父母上增加！important 不会笼罩其孩子的色彩。同样，我将在调试局部探讨更多对于如何查找哪些属性被继承的内容。
6、z-index 堆栈
我也心愿 z -index 像具备更高 z -index 的元素将显示在顶部一样简略，但这不是它的工作原理。再次看以下 HTML：<；divclass=”sibling-1parent”>；<；divclass=”child”>；<；/div>；<；/div>；<；divclass=”sibling-2″>；<；/div>；
思考到兄弟 1 的 z -index:10；兄弟 2 的 z -index:20；在这种状况下，兄弟 2 将位于兄弟 1 之上，这很棒！当初，思考 child 的 z -index:30；在这种状况下，它不会显示在兄弟 2 的顶部，因为它的父级 (sibling-1) 的 z -index 较小。因而 z -index 仅实用于兄弟元素，如果该兄弟元素的 z -index 高于父元素，则子元素不能显示在其父兄弟元素的顶部。您可能能够应用 position:absolute；做一些巫术魔术。以及所有这些，但不倡议这样做，因为它简直不可能保护您的布局。如果您心愿一个元素始终位于其余元素之上，建议您将其间接附加到注释中。
7、调试
尽管调试不是 CSS 的一部分，但您能够应用开发工具来帮忙您理解正在产生的事件。我在上面的例子中应用 Chrome 关上元素选项卡并从那里抉择要查看的元素。
7.1、盒子模型
在款式选项卡的最底部，您能够看到盒子模型的不同局部以及它们所笼罩的区域，将鼠标悬停在它们上方，元素的相应局部将突出显示。
7.2、计算款式
在 Styles 选项卡旁边有 Computed 选项卡，您能够在其中看到利用于所选元素的所有不同 CSS 属性。例如，如果您的元素在没有指定任何内容的状况下具备红色，您能够单击箭头图标以查看该款式的起源，它可能是继承的，也可能是由另一个选择器意外提供的。如果一个属性变暗，很可能是因为应用了 flexbox 或网格来指定所述属性。
7.3、选择器
在 Styles 选项卡中，您能够看到所有针对所选元素的选择器，在以下示例中，从 5 个不同的选择器中为 span 赋予了色彩。蓝色没有被划掉的起因是它具备最高的特异性。所以选择器的特异性越高，它在列表中的地位就越高。
