CSS | 青训营笔记CSS | 青训营笔记这是我参与[第四届青训营]笔记创作的第7天，以下是一些课堂知识的见解以及总

这是我参与[第四届青训营]笔记创作的第7天

一、CSS

1、CSS是什么？

层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。

简单来说就是美化页面的一门计算机语言【不是编程语言、也不是标记语言】
现在的CSS除了用来添加一些各种各样的样式，还可以用来做一些动画，页面布局等等，花样非常多

2、CSS的编写

单独的CSS规则编写规则。 属性名称：属性值
例如

/* 单独的CSS规则，都是以这样的键值对的形式 */
	color: blue;
	width: 200px;

3、CSS样式与HTML元素结合

CSS提供了三种方法，可以将CSS样式与HTML页面结合起来。
- 内联样式：存在与HTML元素的style属性中
- 嵌入样式表：将CSS放在HTML文件的 <head> 元素里的 <style>元素之中
- 外链样式表：将CSS编写在一个独立的 .css文件中，并且通过<link>元素引入到HTML中

<!-- 内联样式 -->
<div style="width: 200px; height: 200px;">Hello World！！！</div>

/* 嵌入样式表 */
<style>
.title {
        font-size: 20px;
        color: red;
      }
</style>

<!-- 外链样式表 -->
<link rel="stylesheet" href="./css/style.css">

三种形式都需要会使用，都有一定的使用场景。
内联样式：在Vue的模板中、React的JSX中用于动态添加某些样式、UI组件库添加自定义的样式等等
后两者可以说是将样式和内容分离开来，方便维护。起码关注点分离了。

4、CSS是如何工作的

先来看一张图。

根据页面生成一颗DOM树。
将解析后HTML中CSS三种使用方式中声明的CSS样式加载并且解析。
将解析出来的CSS附加到DOM树上，变成一颗渲染树。
通过渲染树展示页面
下面是一个页面简单的渲染过程【这里简单说一下，下面还有更详细的步骤】。

5、CSS选择器

选择器是什么？

我们在写代码的时候，经常需要给特定的网页元素设置样式。那么我们就可以按照一定的规则，选择出符号条件的选择器，为之添加CSS样式。

选择器的大致归类


/* 常见的选择器 */

/* 1、通用选择器 */
* {}

/* 2、标签选择器 */
div {}

/* 3、类选择器 */
.box {}

/* 4、ID选择器 */
#title {}

/* 5、属性选择器 */
[disabled] {}
[title=h2] {}

/* 组合 */
/* 6、后代选择器 */
.box span {} /* 后代就行 */
.box > span {} /* 直接子代 */

/* 7、兄弟选择器 */
.box + span {} /* 相邻兄弟 */
.box ~ span {} /* 普遍兄弟 */

/* 选择器组 */
/* 8、交集选择器 */
span.box {} /* 都要满足 */

/* 9、并集选择器 */
body, p, h2, .title {} /* 满足一个即可 */

/* 伪类 */
a:hover {}
a:link {}
input:focus {}

复制代码

标签选择器
- 使用标签的名字。
- 通用选择器
  - 使用星号* 开头，所有的元素都会被选中
  - 一般用来给所有元素添加一些通用的设置
  - 比如内外边距、重置一些内容。
  - 效率比较低，谨慎使用。
类选择器
- 元素 class属性。通过 点 . 开头，比较常用。
- 在一个文档中，属性值可以重复。
- 为一些元素添加一样的样式。
ID选择器
- 元素的 id 属性。通过 # 开头，比较常用。
- 在一个文档中，属性值必须是唯一的。
属性选择器
- 拥有某一个属性 [attr]
- 属性等于某个值 [attr = value]
伪类
- 伪类是选择器的一种【多了一个点，假装是一个类选择器】
- 用于选择处于特定状态的元素; 下面是常用的一些伪类。
- a:link 未访问的链接
- a:visited 已访问的链接
- a:hover 鼠标挪动到链接上【最常用】
- a:active 激活的链接【鼠标在链接上长按住未松开】
组合

伪元素
- ::first-line【第一行字符】
- ::first-letter【第一个字符】
- ::before【在元素前面加上一些东西】
- ::after【在元素后面加上一些东西】

二、常用属性【Attribute】

1、常用样式的属性

	font-size: 20px;
        color: red;
        background-color: greenyellow;
        height: 40px;
        width: 100px;
复制代码

font-size：文字大小
color：文字颜色（前景色）
background-color：背景色
width：宽度
height：高度

2、颜色相关

颜色的表示方法

颜色关键字：存在的关键字
RGB模型：以“#”加十六进制或者 rgb() 和 rgba() 函数表达式的形式。如：#6e9434、rgb(25, 50, 100)通过三原色比例的混合，可以组成其他的颜色。
HSL模型：以 hsl() 和 hsla() 函数表达式的形式。如：hsl(18, 91%, 42%)通过调节色彩的色相、饱和度、亮度，可以组成其他颜色

3、文本相关

（1）text-decoration【常用】

用于设置文字的装饰线
常见取值
- none：无装饰线（也可以用于去掉浏览器给 a 元素默认添加的下划线）
- underline：下划线
- overline：上划线
- line-through：中划线（删除线）

（2）text-align【重要】

将后代元素中，定义的行内级元素，相对于他自己的父容器居中对齐。
例如【文字、图片、输入框】
常见取值
- left：左对齐
- right：右对齐
- center：正中间显示
- justify：两端对齐

（3）text-indent

用于设置首行缩进（2em刚好是两个文字）

4、字体相关

font-size
- 设置字体大小
- 属性值 + 单位（px、em、% ... ）
- 1em是 100%、2em是200%【会继承下来，相对于父级元素说的】
font-family
- 设置字体的类型
- 可以设置一个、或者多个（某些浏览器不支持一些字体）
- 通常情况，一个网页仅会设置一次
font-weight
- 设置字体的粗细
- 常用的值
  - [ 100 , 900 ]
  - normal ：等于 400【普通情况】
  - bold：等于 700 【加粗情况】
font-style
- 用于设置文字显示方式，[常规、斜体 ]
- 常用的值
  - normal：常规显示
  - italic：斜体（采用字体本身有斜体）
  - oblique：倾斜（暴力倾斜）
line-height
- 用于设置文本的行高
- 常用与文本行高居中对齐【行高 = 文本所占高度】
font缩写属性
- 方便书写的语法糖。
- 可以在文档查看书写顺序。

	.box {
      font-size: 30px;
      font-family: Arial;
      font-weight: 700;
      font-style: italic;
      line-height: 30px;
    }
    /* 等同于 */
    .box {
      font: italic 700 30px/30px Arial;
    }
复制代码

三、深入CSS

1、优先级

（1）CSS的层叠性

对于同一个元素来说，相同一个属性，我们可以通过不同的选择器给它进行多次设置。
那么属性会被层叠掉，但是最终只有一个会生效。

（2）特异度【权重】

上面说了，同一元素多次设置相同属性时，会被一层一层覆盖掉。最后只留下一个值
谁会是最终留下来，就得看他的特殊程度（权重值）
大体上有两条规则
- 选择器越特殊、权重越大，那么它的优先级就越高。它就是最终留下来的。
- 选择器特异度、权重值相同时，在后面设置的会生效。

（3）优先级的计算

如果是组合选择器。那么就需要计算他们的优先级，也就是看看他们谁更特殊，谁的话语权更大，谁的权重更高。
权重值是可以累加的。

(1)	.box li div
         10 + 1 + 1 = 12

(2)     #title
        100 

(3)     .title span .item::before
          10  + 1  +  1  = 12
复制代码

2、CSS的继承（Inherited）

如果一个属性具备继承性，那么在该元素上设置后，它的后代都可以使用这个属性
如果后代元素自己有设置该属性，那么优先使用自己的。（不论优先级有多高）
继承后的属性的值，是计算值，而不是设置值
常见的可继承的属性
- 一般情况下，和文本本身相关的属性。可以继承
不可继承的一些属性
- 不需要去记，常用的可以继承的属性，用多了就知道了。实在忘记了，查看文档就行了。或者用浏览器的开发者工具
显式继承
- 对于某些不可继承的属性，后代元素强制要使用它
- 这时候就可以通过inherit关键字，将其属性强制继承过来

四、CSS布局相关【重要】

1、盒模型【重要】

（1）宽度（width）高度（height）

其实就是在对盒子里的内容做调整的过程
对于行内级级非替换元素来说，设置宽度是无效的。
另外还可以设置最小最大宽度，用于做移动端适配。
- min-width/max-width
- min-height/max-height

（2）内边距（padding）

用于设置盒子的内边距，通常用于设置边框和内容之间的间距（盒子本身）；
上下左右都可以设置内边距
可以将四个方向的值缩写为一个padding
- 书写顺序按顺时针方向。
- 省略的值，用对立面的值代替。

（3）外边距（margin）

用于设置盒子的外边距，通常用于设置元素和元素之间的间距（盒子之间）。
上下左右都可以设置内边距
可以将四个方向的值缩写为一个magin
- 书写顺序按顺时针方向。
- 省略的值，用对立面的值代替。
margin之间的传递
margin-top的传递：如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值回传递给父元素。
margin-bottom的传递：如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是 auto，那么这个块级元素的margin-bottom值回传递给父元素。
margin之间的折叠
折叠：垂直方向上相邻的2个margin，有可能会合并为一个margin
水平方向不会被折叠
折叠后的计算值：取较大的值
解决折叠办法：设置一个就行了
用margin将块级盒子水平居中对齐
- margin-left / margin-right初始值是 0；
- 在没有给盒子设置宽度的时候。就按初始值设置
- 如果盒子设置宽度后，那就优先按宽度来设置。而margin-left: 0; margin-right: 父元素总宽 - 该元素总宽;
- 所以这时候，我们要告诉浏览器，你现在，margin的左右，都用auto，让浏览器来分配margin-left / margin-right。
- 然后水平就会居中对齐了
- magin: 0 auto;

（4）内边距 vs 外边距

其实这两个都是相对而言的，有些都不区分这两个。
用什么都可以实现相同的功能，可能都会有些问题。
两个建议
- 设置兄弟元素之间的间距：margin
- 设置父子元素之间的间距：padding

（5）边框（border）

用于设置盒子的边框（盒子本身）
可以设置边框的
- 宽度 / 样式 / 颜色
同内外边距一样，也有四个方向的值
可简写为一个值 border
可以通过border-radius来设置圆角
是对border-box而言的。【内容 + padding + border】
值可以为：数值 / 百分比
如果一个盒子是正方形，值 >= 50% 时，正方形盒子就变成了一个圆形盒子

2、元素类型

（1）块级元素【block level】

（2）行内元素【inline level】

（3）相互转换


	// 块级元素 -> 行内级元素
    div {
      display: inline;
    }

	// 行内级元素 -> 块级元素
    span {
      display: block;
    }

CSS中有个display属性，能修改元素的显示类型常见有四个值
- block
  - 让元素显示为块级元素
  - 可以设置宽高和高度
- inline
  - 让元素显示为行内级元素
  - 行内非替换元素不可以设置宽高
- inline-block
  - 让元素同时具备行内级、块级元素的特征
  - 可以和其他元素在同一行显示
  - 可以设置宽度和高度
- none
  - 隐藏元素，并且不会生成在DOM树里。和不存在一样

（4）元素的隐藏方法【补充】

方法一：display 设置为 none【display: none;】
- 元素不显示出来，并且也不占据位置，不占据任何空间，和不存在一样
方法二：visivility 设置为 hidden【visibility: hidden;】
- 元素不显示出来，但是会占据元素应该占据的空间。
- 默认值为visible
方法三：rgba设置颜色，将不透明度设置为 0【rgba(255, 0, 0, 0)、#ff000000】
- 只是设置当前的 color/background 的颜色，不会影响其他元素
方法四：将opacity设置为 0 【opacity: 0;】
- 设置当前元素的透明度，会影响所有的子元素

3、布局相关技术

常规流、文档流
浮动
定位
但是我们在学习定位之前，先来了解一下盒模型、和元素类型

4、布局（Layout）

（1）标准流（Normal Flow）

默认情况下，元素都是按照标准流进行排布的

①排布规则

从左到右、从上到下按顺序摆放在网页中
默认情况下，兄弟元素相互之间不存在层叠现象
在标准流中，可以使用margin/padding对元素做一些简单的定位

②弊端

标准流布局，比较明显的缺点
- 设置一个元素的margin或者padding，通常会有一些副作用，会影响到其他元素
- 不便于实现元素的层叠的效果

（2）定位（Position）【重要】

①认识定位

定位允许我们自己从正常的标准流布局中取出元素，使得这些元素有不同的行为，如：
- 放在另一个元素上面
- 始终保持在浏览器视窗内的某一位置

②排版规则

static（默认值）
- 元素按照标准流布局
- 不可以left、right、top、bottom进行定位
relative
- 元素按照标准流布局
- 可以通过left、right、top、bottom进行定位
- 相对定位参照对象，是自己原来的位置
- 使用场景
  - 在不影响其他元素的前提下，对当前元素进行微调
- 示例
absolute
- 元素脱离标准流（脱标）
- 可以通过left、right、top、bottom进行定位
- 绝对定位参照对象，是最临近的祖先定位元素
  - 定位元素：position值不为static的元素
fixed
- 元素脱离标准流（脱标）
- 可以通过left、right、top、bottom进行定位
- 固定定位参照对象，是视口
  - 视口（viewport）：文档的可视区域
sticky
- 粘性定位可以看做是相对定位和固定定位的结合体
- 一开始定位元素像相对定位一样，直到它滚动到某个阈值，就会变成固定定位
- 粘性定位是相对于最临近的滚动祖先包含视口

③定位元素的特点

可以随意设置宽高
宽度默认由内容决定
不再受标准流的约束
- 不再严格按照从上到下、从左到右排布
- 不再严格区分是什么盒子类型（块级、行内级），很多类型的特性都会失效
不再给父元素汇报宽高数据【有高度塌陷问题】
脱标元素内部默认还是按照标准流布局
设置z-index时有效
- z-index属性用来设置定位元素的层叠顺序
- 取值可以是正整数、负整数、0

（3）Flex 布局【重要】

①认识flex布局

FlexBox是一种弹性盒子：是一种按行或者按列布局的一维布局方法
- 元素可以膨胀以填充额外的空间，收缩以适应更小的空间
Flex布局时目前web开发中使用最多的布局方案：
- 也叫做弹性布局
flex布局的出现，CSS布局中就出现了一种专门用于一维布局的方案
原先的布局存在的一些痛点
- 在父内容里面垂直居中一个块内容
- 使容器的所有子项等分可用宽度/高度

②Flex布局的重要概念

开启了flex布局的元素叫做：flex container
flex container 里面的直接子元素叫做 flex item
当盒子变成 flex item时，具备以下特点：
- 将受flex container 属性的设置进行控制和布局
- flex-item不再严格区分块级元素和行内级元素
- 默认情况下是包裹内容的，但是可以设置宽度和高度
设置 display 属性为 flex / inline-flex可以变成 flex container
- flex：flex container是块级盒子
- inline-flex：flex container是行内级盒子
父盒子区分盒子类型，子元素不区分盒子类型

③Flex的布局模型

主轴（main axis）
- flex item 默认都是沿着主轴，从 main start 开始往 main end方向排布
- 修改主轴的方向：flex-direction，调整 start 和 end 的位置
交叉轴（cross axis）
- 交叉轴永远垂直于主轴。

④Flex相关属性

设置在flex container	设置在flex item
flex-flow	flex-grow
flex-wrap	flex-basis
flex-direction	flex-shrink
justify-content	order
align-items	align-self
align-content	flex

设置在container上的属性

flex-direction

修改主轴的方向，调整start和end的位置
取值
- row（默认）：从左到右
- row-reverse：从右到左
- column：从上到下
- column-reverse：从下到上

flex-wrap

修改 flex container 是单行还是多行，可以修改交叉轴的方向
取值
- nowrap（默认）：单行
- wrap：多行
- wrap-revers：多行，（比wrap，corss start 与 cross end 相反）

flex-flow

是flex-direction 、 flex-wrap的简写属性
- 顺序任意，而且都可以省略

justify-content【常用】

决定了flex items 在主轴上的对齐方式
取值
- flex-start（默认）：与main start对齐
- flex-end：与main end对齐
- center：居中对齐
- space-between：flex items之间的距离相等，并且与main start、main end两端对齐
- space-around：flex items之间的距离相等，并且与main satrt、main end之间的距离是flex items 之间距离的一半
- space-evenly：flex items之间的距离相等，并且main start、main end之间的距离等于flexitems之间的距离

align-item

flex items 在交叉轴上的对齐方式
取值
- normal（默认值）：在弹性布局中，效果和stretch一样
- stretch：当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container
- flex-start：与 cross start 对齐
- flex-end：与 cross end 对齐
- center：居中对齐
- baseline：与基准线对齐

align-content

多行 flex items 在交叉轴上的对齐方式，用法与justify-content类型
取值
- stretch（默认值）：与 align-items 的 stretch 类似
- flex-start：与cross start对齐
- flex-end：与crossend对齐
- center：居中对齐
- space-between：flex items之间的距离相等，并且与cross start、crossend两端对齐
- space-around：flex items之间的距离相等，并且与cross satrt、cross end之间的距离是flex items 之间距离的一半
- space-evenly：flex items之间的距离相等，并且cross start、cross end之间的距离等于flexitems之间的距离

设置在item上面的属性【不常设置】

order

设置flex items的排布顺序
取值
- 默认值是 0，按HTML的书写顺序。
- 可以设置任意整数（正整数、负整数、0），值越小就越排在前面

align-self

单独设置某一个item，在container里面的对齐方式
取值
- auto（默认值）：遵从 flex container 的 align-items 设置
- stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致

flex-grow

flex items 如何拉伸、扩展
取值
- 可以设置任意非负数，默认值是 0
- 当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效
flex items 扩展后的最终 size 不能超过 max-width\max-height

flex-shrink

flex items 如何收缩(缩小)
- 可以设置任意非负数字（正小数、正整数、0），默认值是 1
- 当 flex items 在 main axis 方向上超过了 flex container 的 size flex-shrink 属性才会有效
- flex items 收缩后的最终 size 不能小于 min-width\min-height

（4）Grid布局

①为什么还要有Grid布局？

我们可以看到 Flex 已经是一个非常强大的能够实现很多布局了。那么就有了 flex 之后，我们为什么还又引了一个 Grid 布局这样的一概念。
就是因为很多时候我们发现在页面上的一个布局，它不仅仅是一个一条线的，就是流式的从左到右从上到下的布局，有时候它是一个二维的布局方式。
可以理解为， Flex 它是一种单一方向的布局模式。然后 Grid 它是一个二维的。
但是其实从概念上、或者用法上，Grid和 Flex 有一些相似的一些地方。

②Grid排版上下文

通过 display: grid;，生成一个 grid 的一个排版上下文。让一个元素变成一个块级的 grid 容器
然后我们通过 grid-template这个属性。其实它是一系列的一些属性，把这个容器划分成一个二维的网格
然后我们再去设置，他的行数和列数。将他的子元素放在划分的格子里边
在划格子的时候，可以去设置每一个各种占多少行或者多少列

（5）浮动（Float）

①认识浮动

float属性可以指定一个元素应沿容器的左侧或者右侧放置，允许文本和内联元素环绕它
float属性最初只是想用在一段文本内浮动图形，实现图文混排的效果
但是一开始左右布局不好做，所以，float在一段时间内被 “滥用” 于多列布局
随着计算的发展，float又在慢慢的退出布局的舞台，回归本心
常用值
- none：不浮动、默认值
- left：向左浮动
- right：向右浮动

②排布规则

浮动会让元素脱离标准流（脱标）
- 朝着向左或者向右方向移动，直到自己的边界紧贴着包含块，或者其他浮动元素的边界为止
- 定位元素会层叠在浮动元素上面
元素向左（右）浮动，边界不能超出包含块的左（右）边界
浮动元素之间不能层叠
- 如果一个元素浮动后，后浮动的元素会紧贴在前一个浮动元素【左浮找左浮，右浮找右浮】
- 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，知道有充足的空间为止
浮动元素不能与行内级元素层叠，行内级元素将会被浮动元素挤到后面去。

③浮动的问题

父元素高度塌陷问题
- 由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
- 解决办法：清除浮动

最后

总结一下面试可能会问到的问题：

HTML5 新特性、语义化

概念：

HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构。【正确的标签做正确的事】
语义化标签：

header nav main article section aside footer
语义化的优点:
- 在没CSS样式的情况下，页面整体也会呈现很好的结构效果
- 代码结构清晰，易于阅读，
- 利于开发和维护 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
- 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

HTML5新特性有哪些

语义化标签
音视频处理API(audio,video)
canvas / webGL
拖拽释放(Drag and drop) API
history API
requestAnimationFrame
地理位置(Geolocation)API
webSocket
web存储 localStorage、SessionStorage
表单控件，calendar、date、time、email、url、search

CSS 选择器及优先级

选择器

id选择器(#myid)
类选择器(.myclass)
属性选择器(a[rel="external"])
伪类选择器(a:hover, li:nth-child)
标签选择器(div, h1,p)
相邻选择器（h1 + p）
子选择器(ul > li)
后代选择器(li a)
通配符选择器(*)

优先级：

!important
内联样式（1000）
ID选择器（0100）
类选择器/属性选择器/伪类选择器（0010）
元素选择器/伪元素选择器（0001）
关系选择器/通配符选择器（0000）

带!important 标记的样式属性优先级最高；样式表的来源相同时： !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

渐进增强与优雅降级的理解及区别

渐进增强（Progressive Enhancement）： 一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）： 一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。 两者区别 1、广义：其实要定义一个基准线，在此之上的增强叫做渐进增强，在此之下的兼容叫优雅降级 2、狭义：渐进增强一般说的是使用CSS3技术，在不影响老浏览器的正常显示与使用情形下来增强体验，而优雅降级则是体现html标签的语义，以便在js/css的加载失败/被禁用时，也不影响用户的相应功能。

/* 例子 */
.transition { /*渐进增强写法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}
.transition { /*优雅降级写法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

常见的兼容性问题

不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}
IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。
设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

CSS3新特性

过渡

/*所有属性从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒*/ 
transition：all,.5s

动画

//animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）
/*执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear;

形状转换

//transform:适用于2D或3D转换的元素
//transform-origin：转换元素的位置（围绕那个点进行转换）。默认(x,y,z)：(50%,50%,0)
transform:translate(30px,30px);
transform:rotate(30deg);
transform:scale(.8);

选择器:nth-of-type()
阴影文字阴影: text-shadow: 2px 2px 2px #000;(水平阴影，垂直阴影，模糊距离，阴影颜色) 盒子阴影: box-shadow: 10px 10px 5px #999
边框 border-image: url(border.png);
背景
文字
渐变
Filter（滤镜）
弹性布局、栅格布局、多列布局
媒体查询

position 属性的值有哪些及其区别

固定定位 fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。

相对定位 relative：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位 absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

粘性定位 sticky：元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

默认定位 Static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit: 规定应该从父元素继承 position 属性的值。

box-sizing属性

box-sizing 规定两个并排的带边框的框，语法为 box-sizing：content-box/border-box/inherit

content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。【标准盒子模型】

border-box：为元素设定的宽度和高度决定了元素的边框盒。【IE 盒子模型】

inherit：继承父元素的 box-sizing 值。

CSS 盒子模型

CSS 盒模型本质上是一个盒子，它包括：边距，边框，填充和实际内容。CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。\ 在标准的盒子模型中，width 指 content 部分的宽度。\ 在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度。

故在计算盒子的宽度时存在差异：

标准盒模型： 一个块的总宽度 = width+margin(左右)+padding(左右)+border(左右)

怪异盒模型： 一个块的总宽度 = width+margin（左右）（既 width 已经包含了 padding 和 border 值）

BFC（块级格式上下文）

BFC的概念

BFC 是 Block Formatting Context的缩写，即块级格式化上下文。BFC是CSS布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局，并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算。

BFC的原理布局规则

内部的Box会在垂直方向，一个接一个地放置
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反
BFC的区域不会与float box重叠
BFC是一个独立容器，容器里面的子元素不会影响到外面的元素
计算BFC的高度时，浮动元素也参与计算高度
元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context。

如何创建BFC？

根元素，即HTML元素
float的值不为none
position为absolute或fixed
display的值为inline-block、table-cell、table-caption
overflow的值不为visible

BFC的使用场景

去除边距重叠现象
清除浮动（让父元素的高度包含子浮动元素）
避免某元素被浮动元素覆盖
避免多列布局由于宽度计算四舍五入而自动换行

让一个元素水平垂直居中

水平居中
- 对于行内元素 : text-align: center;
- 对于确定宽度的块级元素：
  
  （1）width和margin实现。margin: 0 auto;
  
  （2）绝对定位和margin-left: margin-left: (父width - 子width）/2, 前提是父元素position: relative
- 对于宽度未知的块级元素
  
  （1）table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为 display:table），再通过给该标签添加左右margin为auto。
  
  （2）inline-block实现水平居中方法。display：inline-block和text-align:center实现水平居中。
  
  （3）绝对定位+transform，translateX可以移动本身元素的50%。
  
  （4）flex布局使用justify-content:center
垂直居中
1. 利用 line-height 实现居中，这种方法适合纯文字类
2. 通过设置父容器相对定位，子级设置 绝对定位，标签通过margin实现自适应居中
3. 弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中
4. 父级设置相对定位，子级设置绝对定位，并且通过位移 transform 实现
5. table 布局，父级通过转换成表格形式，然后子级设置 vertical-align 实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。

传送门 ☞ # 图解CSS水平垂直居中常见面试方法

隐藏页面中某个元素的方法

1.opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click 事件，那么点击该区域，也能触发点击事件的

2.visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件，隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

3.display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素。不显示对应的元素，在文档布局中不再分配空间（回流+重绘）

该问题会引出回流和重绘

用CSS实现三角符号

/*记忆口诀：盒子宽高均为零，三面边框皆透明。 */
div:after{
    position: absolute;
    width: 0px;
    height: 0px;
    content: " ";
    border-right: 100px solid transparent;
    border-top: 100px solid #ff0;
    border-left: 100px solid transparent;
    border-bottom: 100px solid transparent;
}

页面布局

1.Flex 布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

Flex 是 Flexible Box 的缩写，意为"弹性布局",用来为盒状模型提供最大的灵活性。指定容器 display: flex 即可。简单的分为容器属性和元素属性。

容器的属性：

flex-direction：决定主轴的方向（即子 item 的排列方法）flex-direction: row | row-reverse | column | column-reverse;
flex-wrap：决定换行规则 flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow： .box { flex-flow: || ; }
justify-content：对其方式，水平主轴对齐方式
align-items：对齐方式，竖直轴线方向
align-content

项目的属性（元素的属性）：

order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0
flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大
flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义个 item 的 flow-shrink 为 0，则为不缩小
flex-basis 属性：定义了在分配多余的空间，项目占据的空间。
flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。
align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖
align-items，默认属性为 auto，表示继承父元素的 align-items 比如说，用 flex 实现圣杯布局

2.Rem 布局

首先 Rem 相对于根(html)的 font-size 大小来计算。简单的说它就是一个相对单例如:font-size:10px;,那么（1rem = 10px）了解计算原理后首先解决怎么在不同设备上设置 html 的 font-size 大小。其实 rem 布局的本质是等比缩放，一般是基于宽度。

优点：可以快速适用移动端布局，字体，图片高度

缺点：

①目前 ie 不支持，对 pc 页面来讲使用次数不多；\ ②数据量大：所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的适配；\ ③在响应式布局中，必须通过 js 来动态控制根元素 font-size 的大小。也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在 css 样式之前。

3.百分比布局

通过百分比单位 " % " 来实现响应式的效果。通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。直观的理解，我们可能会认为子元素的百分比完全相对于直接父元素，height 百分比相对于 height，width 百分比相对于 width。 padding、border、margin 等等不论是垂直方向还是水平方向，都相对于直接父元素的 width。除了 border-radius 外，还有比如 translate、background-size 等都是相对于自身的。

缺点：

（1）计算困难\ （2）各个属性中如果使用百分比，相对父元素的属性并不是唯一的。造成我们使用百分比单位容易使布局问题变得复杂。

4.浮动布局

浮动布局:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变的好像浮动元素不存在一样。

优点

这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题

缺点

最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。

如何使用rem或viewport进行移动端适配

rem适配原理：

改变了一个元素在不同设备上占据的css像素的个数

rem适配的优缺点

优点：没有破坏完美视口
缺点：px值转换rem太过于复杂(下面我们使用less来解决这个问题)

viewport适配的原理

viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的，等比的

viewport适配的优缺点

在我们设计图上所量取的大小即为我们可以设置的像素大小，即所量即所设
缺点破坏完美视口

清除浮动的方式

添加额外标签

<div class="parent">
    //添加额外标签并且添加clear属性
    <div style="clear:both"></div>
    //也可以加一个br标签
</div>

父级添加overflow属性，或者设置高度
建立伪类选择器清除浮动

//在css中添加:after伪元素
.parent:after{
    /* 设置添加子元素的内容是空 */
    content: '';
    /* 设置添加子元素为块级元素 */
    display: block;
    /* 设置添加的子元素的高度0 */
    height: 0;
    /* 设置添加子元素看不见 */
    visibility: hidden;
    /* 设置clear：both */
    clear: both;
}

CSS预处理器Sass、Less、Stylus的区别

什么事CSS预处理器?

CSS预处理器是一种语言用来为CSS增加一些变成的特性，无需考虑浏览器兼容问题，例如你可以在CSS中使用变量，简单的程序逻辑、函数等在编程语言中的一些基本技巧，可以让CSS更加简洁，适应性更强，代码更直观等诸多好处基本语法区别

Sass是以.sass为扩展名，Less是以.less为扩展名，Stylus是以.styl为扩展名变量的区别

Sass 变量必须是以$开头的，然后变量和值之间使用冒号（：）隔开，和css属性是一样的。 Less 变量是以@开头的，其余sass都是一样的。 Stylus 对变量是没有任何设定的，可以是以$开头或者任意字符，而且变量之间可以冒号，空格隔开，但是在stylus中不能用@开头三种预处理器都有：嵌套、运算符、颜色函数、导入、继承、混入。Stylus还有一些高级特性。例如循环、判断等

CSS | 青训营笔记