• CSS全名是层叠样式表，用于对html元素或xml元素进行格式化，让同一类型的元素拥有相同的样式
• CSS灵感
• animate.css
• CSS布局教程
• 查看样式支持can I use
• MDN文档
• CSS权威指南例子

2.1 关键字

• CSS定义了一些文字作为关键字
  • 全局关键字：包括initial、inherit、unset、revert，所有CSS属性都能使用，部分特殊样式只接收这些值
    • initial：使用默认值，每个用户都可以在浏览器设置默认属性值
    • inherit：使用父元素样式属性值
    • unset：对于父元素有定义且此值可继承的时候相当于inherit，不然相当于initial
    • revert：将样式设置为浏览器的默认内置样式(新属性)

    css中有样式all，对除direction和unicode-bidi外的所有CSS样式统一修改，配合全局关键字可以快速修改大量样式

  • 非全局关键字：部分样式有专有的关键字，比如：none、normal和underline，要注意这些关键字在不同的样式上表现很可能不同

• 字体是从CSS1就开始支持的功能，在CSS2开始支持下载网络字体。但CSS无法完全控制字体展示效果，如果字体无法正常加载或系统不支持对应的字体格式，显示的效果和设计的效果是不一样的

3.1 字体族

• font-family允许你通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体

• 属性值用逗号隔开，浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过@font-face指定的可以直接下载的字体，如果字体不可用，那么就会用浏览器默认的字体代替

  /* 提供一个字体栈，将依次查找可用的字体作为最终字体 */
  p {
    font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
  }

  如果字体不止一个单词，需要使用引号包裹

• 网页安全字体：是指在绝大多数操作系统中都预先安装的字体。在1996年由微软提出的Core fonts for the Web为绝大多数的操作系统设计了一些共用字体，之后在不断变化，当前windows和mac预装字体和普及率列表见css fonts

• CSS定义了5个常用的字体名称：serif, sans-serif, monospace, cursive和fantasy，当使用这些通用名称时，使用的字体完全取决于每个浏览器，而且它们所运行的每个操作系统也会有所不同

  • 浏览器会尽力提供一个看上去合适的字体，如果未找到将提供衬线字体，通常是Time New Roman
  • serif，sans-serif和monospace是比较好预测的，默认的情况应该比较合理
  • cursive和fantasy是不太好预测的，建议使用它们的时候应该稍微注意一些，多多测试

4.1 颜色

• 一个颜色值可以通过如下方法定义
  • 具名颜色或其他关键字
  • 十六进制标记
  • 函数标记的颜色空间
    • sRGB 颜色空间：hsl()、hwb()、rgb()
    • CIELAB 颜色空间：lab()、lch()
    • Oklab 颜色空间：oklab()、oklch()
    • 其他颜色空间：color()
  • 通过混合两个颜色：color-mix()

5.1 标准盒模型

• 盒子模型是CSS元素的基础，无论什么元素都被一个个的“盒子”包围着，一个元素中心是内容区域，四周有可选的内边距、边框、轮廓和外边距

  • 内容盒子：显示内容的区域；使用inline-size和block-size，或width和height等属性确定其大小
  • 内边距盒子：填充位于内容周围的空白处；使用padding和相关属性确定其大小
  • 边框盒子：边框盒子包住内容和任何填充；使用border和相关属性确定其大小
  • 外边距盒子：外边距是最外层，其包裹内容、内边距和边框，作为该盒子与其他元素之间的空白；使用margin和相关属性确定其大小

• 在标准盒模型中，width和height被定义为内容盒子的宽高，这些属性的处理方式可以通过box-sizing调整

  • box-sizing默认值为：content-box，即为内容盒子设置宽高
  • box-sizing可选值包括content-box|padding-box|border-box

  IE盒模型

  当前除IE浏览器外都使用上面描述的标准盒模型，IE盒模型与标准盒模型的区别在于元素的宽高不是内容盒子的宽高而是边框盒子的宽高

  由于默认使用的是content-box方式，在计算本身大小和布局位置时应该另外考虑边距和边框

• 虽然设置了盒子的宽高，但是当内容盒子装不下所有内容时，宽高会发生改变，以显示所有内容，毕竟谁也不希望元素中的内容缺失

6.1 flex布局基础

• flex布局是一种强大的布局，可以完成block和float不方便完成的布局

  • 在父内容里面垂直居中一个块内容
  • 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用
  • 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同

  通过指定弹性盒子的分布方式、对齐方式和视觉顺序，可以轻易地完成对行列布局或是折断成多行

• 弹性容器：通过声明display: flex或inline-flex，可以把容器变成弹性容器

  • 所有在其中的子元素都称为弹性元素
  • 弹性容器的子元素的子元素不是弹性元素
  • 绝对定位的子元素也是弹性元素，确定尺寸和位置时将此子元素当做容器中唯一的弹性元素
  • 弹性容器flex适合延以主轴实现特定布局，虽然实现双轴布局是可行的，但这不是弹性容器的最初目的

• 布局时将沿着两个轴来布局：

  • 主轴(main axis)是沿着flex元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。该轴的开始和结束被称为main start和main end
  • 交叉轴(cross axis)是垂直于flex元素放置方向的轴。该轴的开始和结束被称为cross start和cross end

• 弹性元素有以下特性

  • 弹性元素的外边距不会折叠，float和clear属性不起作用，不会因为float把弹性元素移出文档流
  • 行内元素转用display: flex后是块级的
  • 绝对定位的弹性元素将移出文档流，不参与文档布局，但仍将受到弹性样式的影响

7.1 grid布局基础

• 网格布局是由一系列水平和垂直结构构成的一种布局模式，创建在每行固定位置和有固定宽度的元素展示页面

  • 一个网格通常具有许多的列(column)与行(row)，以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽(gutter)

• 栅格容器从弹性容器沿袭了相当多的概念

  • 栅格容器的子元素是栅格元素，就像弹性容器的子元素是弹性元素等
  • 也有grid和inline-grid两种方式
  • 栅格容器没有:first-line和:first-letter伪元素
  • 浮动的元素不会打乱栅格，对栅格容器内元素使用float无效
  • 栅格的外边距不会重叠
  • vertical-align无效，应该使用grid布局内的对齐属性

• 基本的栅格术语

  • 栅格容器是确立栅格的框体，其中的元素根据栅格布局规则排布，栅格比表格布局强大得多
  • 栅格元素是栅格排布的元素，通常是子元素，也可能是匿名元素
  • 栅格线是最重要的组件，其他栅格组件随着栅格线的定义出现
  • 栅格轨道(grid track)：两条相邻的栅格线夹住的整个区域
  • 栅格单元(grid cell)：四条栅格线限定的区域
  • 栅格区域(grid area)：四条任意的栅格线限定的矩形区域，由多个栅格单元构成

• 栅格轨道、栅格单元和栅格区域都完全由栅格线建构，不一定非要有相应的栅格元素存在

• 栅格区域中不一定充满栅格元素，完全可以让部分甚至多数栅格单元空着。此外，栅格元素还可以重叠，方法是定义重叠的栅格区域，或者把栅格线重叠起来

• 另外要注意的一点是，栅格线的数量不限，想定义多少就可以定义多少。你可以只定义一系列纵向的栅格线，创建一行多列布局。你也可以反过来，创建多个行轨道但不创建列轨道(当然还是会有一个列轨道，从栅格容器的一边延伸到对边)。然而，如果栅格元素无法放入你定义的列或行轨道中，或者你明确指定把栅格元素放在轨道的外部，那么栅格系统将自动添加栅格线和轨道

8.1 通用

8.1.1 object-fit和object-position

• object-fit指定可置换元素(例：img或video)的内容应该如何适应到其使用高度和宽度确定的框，默认为fill

  • contain：被置换的内容将被缩放，以在填充元素的内容框时保持其宽高比

  • cover：被置换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框

  • fill：被置换的内容正好填充元素的内容框

  • none：被置换的内容将保持其原有的尺寸

  • scale-down：内容的尺寸与none或contain中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些

• 如果被置换元素比内容框小时，object-position指定如何控制置换元素的对齐方式，支持使用各种位置值

9.1 变形

• 变形的效果可以通过网站查看
• 变形只是对元素本身的可视区域显示效果进行处理，不会触发回流重排，同时是交给合成处理，使用GPU渲染，效果很快，常见的可以用于轮播图，代替会触发回流的left和top修改

9.1.1 坐标系

• 变形涉及两种坐标系

  • 笛卡尔坐标系，用户是从z轴正方向向里查看，x轴正方向是右侧，y轴正方向是下侧

  • 球坐标系，在笛卡尔坐标系外面添加一层球坐标系，变形允许元素绕坐标系的一轴旋转，实际上都对应着轴在轴所在的圆周平面上的旋转一定角度

10.1 滤镜

• CSS提供了一种通过filter属性将内置的视觉过滤器效果以及在页面或外部文件中定义的自定义过滤器应用到元素的方法，滤镜通常用于调整图像、背景和边框的渲染

  • 可选的取值包括

    • 大量滤镜函数，语法和用途见MDN文档
    • 通过url加载通过svg存储的某个滤镜元素

    filter: blue(10px);
    filter: brightness(0.4);
    filter: contrast(200%);
    filter: drop-shadow(16px 16px 20px blue);
    filter: grayscale(50%);
    filter: hue-rotate(90deg);
    filter: invert(75%);
    filter: opacity(25%);
    filter: saturate(30%);
    filter: sepia(60%);
    
    /* svg文件中的一个元素 */
    filter: url(file.svg#filter-element-id);
    /* 包含一个滤镜的svg图像 */
    filter: url(file.svg);
    
    /* 多个滤镜的叠加，将依次应用每个滤镜 */
    filter: contrast(175%) brightness(103%) url(file.svg#filter-id);
    函数效果展示