freeCodeCamp 练习5 -- intermediate css

1. css position 和 overflow

2. css z-index

   • z-index属性用于为HTML元素创建“层”。如果您熟悉图像编辑工具，您可能以前使用过图层。这是一个类似的概念。
     具有较高z指标值的元素将呈现在具有较低z指标值的元素之上。这可以与上一课的定位相结合，创造出独特的效果。
   • 实际应用一例：将背景元素放在所有元素最下面，可以将它的 z-index设为 -1

3. css content: ""

   • 这将使伪元素为空。
   • content 属性用于设置或覆盖元素的内容。 默认情况下，::before 和::after 伪选择器创建的伪元素是空的，元素不会被渲染到页面。 将 content 属性设置为空字符串 “” 将确保元素呈现到页面时仍为空。

4. css position: absolute前端——如何用绝对定位(position:absolute)完美定位布局及其注意事项

   • 父元素: position: relative, 当前元素: position: absolute

5. css @media

   @media 规则，也称为媒体查询，用于有条件地应用 CSS。

   应用场景：响应式网页设计。媒体查询通常用于使用 max-width和 min-width属性根据视口宽度应用 CSS。

   在下面的示例中，当视口宽度为 960 像素及以下时，填充将应用于 .card 类。

   @media (max-width: 960px) {
     .card {
       padding: 2rem;
     }
   }
   

6. css overflow:hidden应用场景：溢出隐藏、清除浮动、解决外边距塌陷等等