CSS——让我们深入了解基础知识。

我该如何改进？

🙏

• 让我们跳出固有思维模式！
• 默认边距
• 边际收缩
• 速记属性
• 宽度和高度
• 盒子尺寸
• display: none对比visibility:hidden
• 伪类
• 伪元素
• 伪什么？？？
• CSS 规则分组

让我们跳出固有思维模式！

CSS会将每个HTML元素解释为一个盒子。

每个元素都具有：

• 内容；蓝色区域。
• 周围的衬垫，即绿色区域。
• 周围的边界，橙色区域。
• 周围边缘，即棕色区域。

内容
可以是文字、图片、视频……

边框
：边框环绕着内容。

内边距：
从内容到边框的内部空间。

边距：
元素与其相邻元素之间的距离。

CSS 中的盒模型包含内容、边框、内边距和外边距。

<div id="boxModel">
  Hello Box Model!
</div>

#boxModel {
  background-color: violet;
  font-size:50px;
  padding: 20px;
  border: 10px solid red;
  margin: 30px;
}

应用此 CSS 规则后，我们可以在下面看到浏览器如何解释每个 CSS 声明。

内容|蓝色区域
我们有 CSS 声明font-size:50px，因此我们有高度57px

边框 | 橙色区域
我们有 CSS 声明border: 10px solid red，因此为周围的边框分配了 10px 的宽度和solid red颜色。

内边距 | 绿色区域
我们有 CSS 声明padding: 20px;，因此周围区域已分配 20px 的内边距。

边距 | 棕色区域。
此外，我们有一个 CSS 声明margin: 30px;，因此周围边距已分配 30px。

默认边距

通过浏览器

浏览器默认margin: 8px;会给 body 元素分配一个属性。

要移除这个默认边距，我们可以使用以下 CSS 规则：

body {
  margin: 0px;
}

边际收缩

当有两个或多个 HTML 元素（块级元素）时，
它们之间的边距会自动折叠。这是浏览器为了减少过多空白而自动执行的操作。

下面我们可以看到，margin-bottom第一个元素和margin-top第二个元素已经自动合并在一起了。

默认情况下，边距较大的块元素优先。
如下所示，margin-top第二个元素的边距值大于margin-bottom第一个元素的边距值。

阅读更多：

• 掌握边距折叠技巧

速记属性

简写属性可以将多个属性的值合并到一个 CSS 声明中。

例如：

margin: 8px

是……的简写

margin-top: 8px;
margin-right: 8px;
margin-left: 8px;
margin-bottom: 8px;

简写可以更轻松地将多个值传递给一个 CSS 属性。

border: 10px dashed purple;

速记属性的实际应用

padding: 10px 20px;是以下含义的简写：

padding-top:    10px;
padding-right:  20px;
padding-bottom: 10px;
padding-left:   20px;

padding: 10px 20px 30px;是以下含义的简写：

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;

padding: 10px 20px 30px 40px;是以下含义的简写：

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

宽度和高度

宽度

块级元素总是试图占据浏览器的全部可用宽度，或者如果它有外层元素，则占据其外层元素的全部可用宽度。

div {
  background: greenyellow;
}

  <div>What is my width?</div>

如果我们用百分比值来设置宽度，它将占据周围元素宽度的百分比。
在本例中，该div元素没有周围元素，因此它占据了浏览器窗口的全部可用宽度。

div {
  background: greenyellow;
  width: 33%
}

如果我们div用一个外层section元素包裹它，并给这个section外层元素一个特定的宽度。

<section>
  <div>What is my width?</div>
</section>

section {
   width: 500px; 
   background: yellow;
}
div {
  background: greenyellow;
  width: 33%
}

元素的宽度div现在将是其外层元素宽度的百分比。
如下所示，它的宽度已经缩小了。

高度

另一方面，高度设置了元素容纳其内容所需的最大垂直空间。默认情况下，它不会占用浏览器可用的全部高度。

div {
  background: greenyellow;
  width: 100%;
  height: 100%;
}

如果 html 元素被包含在另一个元素内，则其高度将相对于该元素而言。

<section>
  <div>What is my height?</div>
</section>

section {
   width: 500px; 
   background: yellow;
   width: 200px;
   height: 200px;
}

div {
  background: greenyellow;
  width: 80%;
  height: 100%;
}

为了充分利用浏览器窗口的高度，一个技巧是应用以下 CSS 规则：

html, body {
    height: 100%
    }

盒子尺寸

box-sizing该属性允许我们将内边距和边框包含在元素的总宽度和高度中。
但在此之前，让我们先了解一下浏览器是如何为每个元素分配空间的。

元素盒子的实际可见/渲染宽度
= 宽度 + 内边距 + 边框

元素盒子的实际可见/渲染高度
= 高度 + 内边距 + 边框

默认情况下，边距、边框和内边距会分别设置各自的间距。

<div>How much space do I use?</div>

div {
  background: pink;
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 10px;
  border: 10px solid greenyellow;
}

box-sizing我们可以通过给属性赋予三个可能值之一来改变盒子模型。

1. content-box
2. padding-box
3. border-box（最受欢迎的值）

举例说明box-sizing: border-box;

div {
  background: pink;
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 10px;
  border: 10px solid greenyellow;
  box-sizing: border-box;
}

box-sizing重置方法

如果要border-box在整个项目中使用，以下样式可以快速解决问题。

html  {  
    box-sizing: border-box;  
}  
*, *:before, *:after  {  
    box-sizing: inherit;  
}

延伸阅读：

• 盒子尺寸

显示属性

块级元素
是指任何另起一行的元素，例如段落，并且会占用页面或容器的全部宽度（所有可用的水平空间）。块级元素可以占据一行或多行，元素前后都有换行符。我们可以设置其上边距和下边距。

块级元素示例：

display 属性允许我们将元素的行为更改为块级、行内或行内块级。

行内元素
顾名思义，“作为正文的一部分而非单独的部分包含在内”。行内元素会根据其内容占用主元素所定义的空间，也就是说，它们会占据足够的空间来容纳其内容。与块级元素不同，行内元素不会另起一行。因此，两个行内元素可以位于同一行（只要它们的内容组合起来没有占据整个空间，否则会添加换行符）。对行内元素设置 `<style>`width或 ` <style>`height属性也不会产生任何效果。

行内元素示例：

行内块
元素与周围所有文本保持行内对齐，外观与行内元素相同。
其优点在于：我们可以设置该元素的垂直高度，因此可以设置margin-top宽度、margin-bottom高度padding-top和padding-bottom间距vertical-align。

延伸阅读

• MDN 显示

display: none对比visibility:hidden

CSS 声明display: none;会将该元素从文档流中移除。这意味着该元素不再可见，也不会“阻塞其位置”。其他元素可以（并且将会）取代它的位置。

CSS声明visibility: hidden;会隐藏一个元素，但保留它在文档中的位置。这意味着其他元素不会占据它原本的位置。

例如，如果我们有两个 div 元素，一个设置为 display: none，另一个设置为 visibility: hidden：

<section>
<div class="dnone">Display None</div>
</section>
<br>
<section>
<div class="vhidden">Visibility Hidden</div>
</section>

section {
  border: 1px solid red;
}
.dnone {
    display: none;
    height: 50px;
}

.vhidden{
    visibility: hidden;
    height: 50px;
}

第一个div带有 CSS 声明的元素display: none;已从文档流中完全移除。

伪类

伪类在特定条件下选择元素：

• 当它们的位置是相对于它们的兄弟姐妹而言时。
• 或者当他们处于某种特定状态时。

常见伪类示例：

动态伪类

• :link
• :visited
• :hover
• :active
• :focus

UI元素状态伪类

• :enabled
• :disabled
• :checked

结构伪类

• :first-child
• :nth-child(n)
• :nth-last-child(n)
• :nth-of-type(n)
• :nth-last-of-type(n)
• :last-child
• :first-of-type
• :last-of-type
• :only-child
• :only-of-type
• :root
• :empty

其他伪类

• :not(x)
• :target
• :lang(language)

伪元素

伪元素有效地创建了文档标记中未指定的新元素，并且可以像常规元素一样对其进行操作。

• ::before
• ::after
• ::first-letter
• ::first-line

p::first-letter {
  color: Red;
  font-size: 25px;
  font-weight: bolder;
}

p::after {
  content: "<-- Remember this";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

伪什么？？？

伪类和伪元素之间的区别乍一看可能有点令人困惑。
伪类是一种选择器，它可以帮助我们选择那些无法用简单选择器表达的内容，例如 `<a>` :hover。因为`<a>`:hover是一个动作。另一方面，伪元素允许我们
创建文档树中通常不存在的元素，例如 `<a>` ::after。

所以伪类用于选择，而伪元素用于创建。

CSS 规则分组

如果两条 CSS 规则共享相同的 CSS 声明，我们可以用逗号 (.) 将它们分组,。
这里，逗号 (.),并不起到组合器的作用。

div:first-letter,
p::first-letter {
  font-family: sans-serif;
  font-weight: bold;
  color: orange;
  font-size: 30px;
}

我该如何改进？

感谢您阅读本文。🙏 🙏 🙏
您能否告诉我我可能遗漏了哪些内容，以及我该如何改进这篇文章？
谢谢。

激励我写更多东西

🙏