为什么学习CSS

1.CSS将从基础开始建设直到全面替代传统web设计方法。W3C组织创建的[CSS]技术将替代HTML的表格、font标签、frames以及其它用于表现的HTML元素。
2.提高页面浏览速度。使用[CSS]方法，比传统的web设计方法至少节约50%以上的文件尺寸。
3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，我们不再需要用font标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。

CSS简要发展历史

选择器介绍

元素选择器：根据HTML元素类型选择元素。例如，p选择所有的<p>元素。
类选择器：根据元素的类属性选择元素。例如，.my-class选择具有类my-class的所有元素。
ID选择器：根据元素的ID属性选择特定元素。例如，#my-ID选择ID为my-ID的元素。
属性选择器：根据元素的属性和属性值选择元素。
伪类选择器：根据元素的状态或文档结构选择元素。例如，:hover选择鼠标悬停在其上的元素，:first-child选择作为其父元素的第一个子元素的元素。
伪元素选择器：选择元素的某个部分，例如内容的前后。例如，::before选择元素内容之前的一个虚拟元素，::after选择元素内容之后的一个虚拟元素。
组合选择器：通过组合多个选择器来选择符合所有条件的元素。
- 后代选择器（空格）
- 子元素选择器（>）
- 相邻兄弟选择器（+）
- 一般兄弟选择器（~）
多个选择器：使用逗号分隔的多个选择器可以同时选择符合任一选择器条件的元素。例如，div, p选择所有的<div>和<p>元素。

选择器优先级

注意：

选择器尽量少用id，建议用class
尽量不要用！important，存在代码隐患

继承

CSS 中的继承是一种机制，通过它，子元素可以从其父元素接收样式属性值。这使得我们可以在一个地方设置通用样式，然后让其他元素自动继承这些样式，从而减少代码的重复和提高可维护性。

并非所有的 CSS 属性都是可继承的。一些常见的可继承属性包括：color、font、text-align等。这些属性在父元素上设置后，子元素会自动继承这些样式，除非子元素上明确设置了不同的值。

常见单位

长度单位
- 绝对长度：
  - px（像素）：最常见的单位，通常用于屏幕显示。一个像素对应于屏幕上的一个点。
- 相对长度：
  - em：相对于当前元素的字体大小。例如，如果当前字体大小是 16px，那么 2em 等于 32px。
  - rem：相对于根元素（通常是 <html>）的字体大小。与 em 类似，但始终基于根元素的字体大小。
  - vw（视窗宽度）、vh（视窗高度）：相对于视口（浏览器可见区域）的宽度和高度。1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。

案例：实现三角形

/* 创建一个空的 div 元素，将其作为三角形 */
<div class="my"></div>
<style>
  .my {
    width: 0;
    height: 0;
    /* 三角形的底边宽度，此处设为 100px */
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    /* 三角形的高度，此处设为 100px */
    border-bottom: 100px solid red;
  }
</style>

更多案例：

常规流布局

常规流布局，也被称为文档流布局，是浏览器默认的 CSS 布局方式。在常规流布局中，元素按照它们在 HTML 代码中的顺序自上而下、自左向右地排列。常规流布局主要包括两类元素：块级元素和行内元素。

块级元素：

块级元素会独占一行，即它们会从上到下排列。

块级元素默认的宽度为其父容器的宽度，高度取决于其内容。

常见的块级元素有：<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>等。

行内元素：

行内元素会在同一行内从左到右排列，直到容器宽度不足时才会换行。

行内元素的宽度和高度取决于其内容，而不是父容器的尺寸。

常见的行内元素有：<span>、<a>、<strong>、<em>、<img>等。

虽然常规流布局是浏览器的默认布局方式，但现代前端开发中，很多布局需求无法仅依靠常规流实现。因此，CSS 提供了更加强大和灵活的布局技术，如 Flexbox、Grid、定位（Positioning）等，来满足各种布局需求

理解CSS | 青训营笔记