前端栈学习(十一)-CSS的显示类型、溢出、动画以及Tailwind库

这篇博客将讨论：

• CSS选择器
• 显示类型
• 内容溢出
• 动画

演示网站Tailwind Play

CSS选择器

我们有四种不同的CSS选择器

• 后代选择器(空格)
  • 
• 子选择器(>)
  • 
• 一般兄弟选择器(+)
  • 
• 紧邻兄弟选择器(~)
  • 

虽然我们在第一篇博客已经讨论过了

<div class="container">
  <section class="child" id="c1">
    <div>subchild</div>
  </section>
  <div class="child" id="c2">child2</div>
  <div class="child" id="c3">child3</div>
  <div class="child" id="c4">child4</div>
</div>

显示类型

我们已经讨论过了

• block
• flex

接下来我们将讨论

• grid
• none

<div class="container">
  <div class="child" id="c1">child1</div>
  <div class="child" id="c2">child2</div>
  <div class="child" id="c3">child3</div>
  <div class="child" id="c4">child4</div>
</div>

grid

.container {
    display: grid;
}

grid-auto-flow

自动布局（auto-flow）赋予我们一种能力，可以告诉浏览器如何自动处理到达网格布局末端的子元素。

row是默认值

grid-template-rows/columns

none

告诉浏览器将元素从文档中移除——在布局中不会占用任何空间。

• 这与 visibility: hidden 不同，后者会隐藏元素但仍然占据布局中的空间。

内容溢出

溢出属性(overflow)允许我们告诉浏览器如何处理可能超过父元素大小的子元素。

我们将关注下面几个值

• visible
• hidden
• scroll
• auto

<div class="container">
    <p>the quick brown fox jumps over the lazy dog</p>
</div>

.container {
  width: 50px;
  height: 50px;
  background-color: gray;
}

overflow: visible

默认值：告诉浏览器显示溢出的内容

overflow: hidden

告诉浏览器隐藏溢出内容

overflow: scroll

告诉浏览器为父元素显示一个滚动条→这个滚动条将一直存在，即使可能没有任何溢出的内容。

overflow: auto

告诉浏览器如果父元素需要，显示滚动条→这个滚动条只有在有任何溢出内容时才会出现。

• 溢出:

• 没溢出

动画

我们将讨论下面几个动画主题

• Keyframes
• Calling our animation
• Duration
• Delay
• Timing functions

<div class="container">
    <p>
        the quick brown fox jumps over the lazy dog
    </p>
</div>

关键帧(Keyframes)

描述了我们正在创作的动画，以及在动画的不同点会发生什么。

.container{
  animation: fadeIn;
}

@keyframes fadeIn{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

• “fadeIn” 是我们的动画名称
• 我们通过百分比表示动画的不同阶段
  • 0% → 动画开始时
  • 100% → 动画结束时
• 在这些百分比内，我们可以指定希望动画的 CSS 属性。在这个例子中，我们正在动画化透明度（opacity）。

持续时间

告诉浏览器动画应该持续多长时间。

.container{
  animation: fadeIn;
  animation-duration: 5s;
}

延迟

在动画执行之前给浏览器一个延时。

.container{
  animation: fadeIn;
  animation-duration: 5s;
  animation-delay: 2s;
}

时间函数

时间函数（Timing Functions）改变动画进展的速度：

• ease（默认）：开始慢 → 中间快 → 结束慢
• ease-in：开始慢
• ease-out：结束慢
• ease-in-out：开始慢 → 结束慢
• linear：均匀速度

.container{
  animation: fadeIn;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-timing-function: ease-out;
}

CSS库(Tailwind)

什么是 TailwindCSS?

TailwindCSS 是一个以实用性为核心的 CSS 框架，它通过预制的类名使开发更快捷、更高效。

它是一个怎样的”效用优先(utility-first)“框架?

• TailwindCSS 提供用于样式化的实用类名 → 消除了命名方案的困扰

  • 类名的含义即其功能（实用性）
  • 示例：m-4 → 表示 4px 的外边距

• 预制的类名让颜色选择、间距、排版等设计保持一致性变得简单。

---

TailwindCSS有什么特别的?

• 低级设计：TailwindCSS 不直接提供组件类，而是通过相同的实用类可以创建不同的组件。
  • 例如：Bootstrap 提供组件模板 → 导致组件外观高度统一，且难以在低级别修改。
• 最小化 CSS 文件大小：Tailwind 的编译器会自动移除未使用的 CSS → 更小的 CSS 文件体积 = 更快的加载时间。
• 响应式设计：Tailwind 提供用于响应式设计的实用选择器，帮助处理不同屏幕尺寸的样式变化。

TailwindCSS使用例子

我们将使用TailwindCSS来实现这个推特框

<section class="bg-gray-900 w-full p-4">
  <!-- 背景为深灰色，宽度占满父容器，内边距为16px -->
  <div class="flex justify-between">
    <!-- 使用Flexbox布局，左右两端对齐 -->
    <p class="text-white">Close</p>
    <!-- 文本颜色为白色 -->
    <p class="text-blue-400 font-semibold">Drafts</p>
    <!-- 浅蓝色字体，字体加粗 -->
  </div>

  <div class="flex gap-4 py-8 h-48">
    <!-- 使用Flexbox布局，子元素间距16px，上下(y轴)内边距32px，高度192px -->
    <div class="w-16 h-16 aspect-square bg-blue-400 rounded-full"></div>
    <!-- 正方形（宽高64px），浅蓝色背景，完全圆角 -->
    <textarea class="w-full mt-4 bg-transparent text-white text-2xl focus:outline-none" 
              placeholder="What is happening?!"></textarea>
    <!-- 宽度100%，顶部外边距16px，透明背景，白色文字，大字体，移除聚焦高亮 -->
  </div>

  <p class="font-bold text-blue-400"> Everyone can reply</p>
  <!-- 加粗字体，浅蓝色文字 -->
  <hr class="border-gray-500 my-4">
  <!-- 灰色边框的水平线，上下外边距16px -->

  <nav class="flex items-center justify-between">
    <!-- 使用Flexbox布局，子元素垂直居中，两端对齐 -->
    <div class="flex gap-4 text-blue-400">
      <!-- 使用Flexbox布局，子元素水平间距16px，浅蓝色文字 -->
      <p>Image</p>
      <p>GIF</p>
      <p>Poll</p>
      <p>Emoji</p>
      <p>Location</p>
    </div>

    <botton class="text-white bg-blue-400 px-4 py-2 rounded-full font-bold"> 
      Post 
    </botton>
    <!-- 白色文字，浅蓝色背景，水平内边距16px，垂直内边距8px，完全圆角，字体加粗 -->
  </nav>
</section>

• py: y 轴的padding
• my: y 轴的marging