CSS 简要发展历史
CSS是一种用于描述网页上元素样式的语言，它的作用是将HTML元素的外观和布局进行控制。CSS可以让网页的外观更加美观、易于阅读和易于导航。
CSS 基础知识
CSS中的选择器用于选取需要设置样式的HTML元素，常见的选择器有标签选择器、类选择器、ID选择器、属性选择器、后代选择器等。
层叠、优先级
层叠三大规则（优先程度递减）：
-
样式表来源（优先程度递增）：
- 用户代理样式
- 用户样式表
- 作者样式表
-
选择器优先级
- 源码位置
由层叠概念引申出的CSS 代码 good practice
- 选择器尽量少用 id
- 尽量不用 ！important
- 自己的样式加载在引用库样式的后面
CSS 的值和单位
值
- 文字类：比如像inital这种关键字、颜色、位置等
- 数值类：比如z-index-1这种数值、或有单位的数值、百分比等
- 函数生成：比如calc()、min()、max()等
单位
- 长度：
- 绝对长度：px、pt、cm、in...
- 相对长度：em、rem、ex...
- 时间：- s、ms
- 角度： deg、gard、tum、rad等
- 分辨率：- dpi、dpcm、dppx
盒模型
- 控制盒子类型display: block.inline、inline-block、flex
- 控制盒子大小& 计算方式： width, height、box-sizing: content-box，border-box
- 控制盒中内容流 overflow: auto、scroll、hidden...
- 控制定位 position: static、relative 、abeolute 、fxed ，sticky
- 是否可见 visibility: visible、hidden
弹性盒子布局
flex item 的布局将受 flex container 属性的设置来进行控制和布局；flex item 不再严格区分块级元素和行内元素；flex item 默认情况下是包裹内容的，但是可以设置宽度和高度。
display: flex：flex container 以 block-level 形式存在，即块元素。
display: inline-flex：flex container 以 inline-level 形式存在，即行内元素。
flex-container 父元素属性
-
flex-direction：该属性决定主轴的方向，有 4 种取值：row、row-reverse、column、column-reverse。 -
flex-direction：该属性决定主轴的方向，有 4 种取值：row（默认值）、row-reverse、column、column-reverse。 -
flex-wrap：决定元素单行显示还是多行显示。有 3 种取值：nowrap（默认值）、wrap（单行显示）、wrap-reverse（修改了交叉轴，即从下到上排列）。 -
flex-flow：是 flex-direction 和 flex-wrap 的简写属性。任何顺序，都是可省略的。 -
justify-content：该属性决定了 flex-item 在 main axis 上的对齐方式 -
align-items：该属性决定了 flex-item 在 cross axis 上的对齐方式。 -
align-content：space-evenly 有兼容性问题。 在 flex container 设置高度后有剩余空间才可能会设置该属性，但是一般开发中都不会设置盒子的高度，而是由内容撑开。
flex-item 子元素属性
order：决定 flex-items 的显示顺序。align-self：单独设置某一个 flex-item 在 cross axis 上的排布方式。flex-grow：决定 了 flex items 如何扩展或拉伸或成长。
网格 布局
grid 布局：通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的列和行
Grid 和 Flex 布局的使用策略
Position 定位
为了我们可以在文档流的基础上，让元素移动，做出更多灵活的改变。当position属性的取值非static的时候，可以使用top, right, bottom, left对其进行定位。
层叠上下文
CSS层叠上下文定义了元素如何根据z-index属性进行层次叠加。
- 每个层叠上下文由一组HTML元素和它们的子元素构成，并且这些元素按照一定的规则垂直地贴合在一起形成平面。
- 在一个平面中，每个层叠上下文都有自己的层级关系，即z轴方向的顺序。
- 在同一个层叠上下文中，具有较高z-index值的元素会被放置在具有较低z-index值的元素上方；而在不同层叠上下文中，其z-index值的比较就不仅仅局限于自身了。
当一个元素形成了层叠上下文时，它就具有了一定的独立性和优先级，其子孙元素会在该元素内部形成自己的层叠关系，并且不会影响到其他元素。同时，该元素也可以通过z-index属性与其他元素进行相对位置调整。
变形、过渡、动画
transition 过渡
transition-property设置元素中参与过渡的属性transition-duration属性用来设置过渡需要花费的时间transition-timing-function属性用来设置过渡动画的类型。transition-delay属性用来设置过渡效果何时开始
animation 动画
响应式设计
响应式设计原则
- 优先选用流式布局，如百分比、flex、 grid等
- 使用响应式图片，匹配尺寸，节省带宽
- 使用媒体查询为不同的设备类型做适配
- 给移动端设备设置简单、统一的视口
- 使用相对长度，em、rem、vw 做为长度度量
媒体查询
媒体查询允许某些样式只在页面满足特定条件时才生效。我们可以将媒体类型（如screen、print) 以及媒体特性（如视口宽度、屏幕比例、设备方向：横向或纵向）做为约束条件。
设备像素
设备像素:显示器上绘制的最小单位,显示屏通过控制每个像素点的颜色，使屏幕显示出不同的图像。
CSS 像素
CSS像素也叫参考像素。CSS像素(reference pixel) 其实是一个视角单位。规范给出的定义是，1css像素是从一臂之遥看解析度为96DPI (即1英寸96点)的设备输出时，1点(即1/96英寸)的视角
viewport 布局视口
布局视口(viewport)是页面中html元素(根元素)的包含块，默认情况下，window.document.documentElement.clientWidth 就是viewport的宽度。在移动设备中，默认的布局视口由于历史兼容pc屏幕的原因，并不符合需求，我们经常需要用<meta>标签对viewport进行设定，来完成移动端设备的适配。
移动端 viewport 的 meta 标签中的属性：
- width
- height
- initial-scale
- minimum-scale
- maximum-scale
- user-scalable：是否允许用户缩放
