CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。该布局模型在主流浏览器中都得到了支持。

采用flex布局的元素，成为flex容器。它的所有子元素自动成为容器成员，称为flex项目。常用的，设置到容器上的属性有：

设置到项目上的属性：

(Block Formatting Context)块级格式化上下文。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此.并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

上述方法都可以创建BFC，但是会带来一些负面影响：

::before是css3的写法，:before是css2的写法，用来设置对象前的内容

:before的兼容性要比::before好

更准确的说法

1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；

2、animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；

3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；

4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；

常规方法

不需要使用transform属性时

webkit内核

参考链接：

CSS实现不换行/自动换行/文本超出隐藏显示省略号

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能

@import规则一定要先于除了@charset的其他任何CSS规则。

不推荐使用@import:

因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。

伪元素和伪类的区别总结

css继承指的是被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性。

相关链接：

CSS 继承，哪些属性能继承，哪些不能

z-index可以改变元素层叠顺序，z-index较大的会叠加在z-index较小的元素上方。z-index值相同时，则按照文档流顺序，后面的覆盖前边的。

px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。注意css中的1px并不一定是物理像素的一个像素块，需要根据DPR计算，对应多少物理像素块

设备像素比：dpr = 物理像素 / 逻辑像素(px)，例如，iPhone6的dpr为2，物理像素750（x轴）,则它的逻辑像素为375

参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。

css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

1英寸（inch）=2.54厘米（cm）

手机对角线的长度换算成英寸

屏幕横向和纵向的像素点

1px即代表一个物理像素点/像素块

PPI，是每英寸可以显示的像素点的英文缩写。如果说上面分辨率是一个质量总量的概念，那么，ppi就是密度的概念。我们可以通过屏幕的像素总量除以屏幕大小来计算屏幕的PPI，公式如下： a：横向像素数量，b：纵向像素数量，c：屏幕尺寸（英寸）

1px与多少厘米之间是不能直接划等号的，需要看分辨率。

一般电脑的像素分辨率是72ppi，计算公式： (((1**2 + 1**2)**0.5)/72)*2.54 ，此时1px=0.0498cm，1cm=25px；

很多手机是300ppi，计算公式： (((1**2 + 1**2)**0.5)/300)*2.54 ，此时1px=0.0119cm。

参考链接：

画一条0.5px的线

在继承性上：

一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。以css为例，以下这种写法就是渐进增强。

一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能 就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较 大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。同样以css为例，优雅降级的写法如下。

渐进增强，开发时间长，成本高，优雅降级，节约成本，开发周期短。

在CSS2.1的世界中，常见的尺寸分为这几类：

2.1 充分利用可用空间。例如，一些div元素默认宽度100%父元素，这种充分利用可用空间的行为就称为“fill-available”。

2.2 收缩与包裹。典型代表就是浮动，绝对定位以及inline-block，英文称为“shrink-to-fit”，直译为“收缩到合适”，这种直译往往都是不准确的，这种行为表现确实很难描述，有些只可意会不能言传的感觉，而我自己一直以“包裹性”作为理解。在CSS3中有个专有的关键名称，fit-content

2.3 收缩到最小。这个基本上就出现在table-layout为auto的表格中，想必有经验的小伙伴一定见过下面这样一柱擎天的盛况的吧！

大家空间都不够的时候，文字能断的就断，中文是随便断的，英文单词不能断。于是乎，第一列被无情地每个字都断掉，形成一柱擎天。这种行为称之为“preferred minimum width”或者“minimum content width”，也就是本文的重点角色之一min-content，换了一个更加规范好听的名字了。

2.4 超出容器限制 上面1~3情况，除非有明确的width相关设置，否则尺寸都不会主动超过容器宽度的，但是，存在一些特殊情况，例如，连续的英文数字，好长好长；或者内联元素被设置了white-space:nowrap，则表现为一江春水向东流

例如下面：

max-content的表现与之有些类似，具有收缩特性，同时最大内容宽度

2. 理解width:fill-available

width:fill-available比较好理解，比方说，我们在页面中扔一个没有其他样式的<div>元素，则，此时，该<div>元素的width表现就是fill-available，自动填满剩余的空间。也就是我们平常所说的盒模型的margin,border,padding的尺寸填充。

出现fill-available关键字值的价值在于，我们可以让元素的100%自动填充特性不仅仅在block水平元素上，其他元素，例如，我们一直认为的包裹收缩的inline-block元素上：

此时，元素兼具了块状元素的自动填充特性以及内联元素的定位对齐等特性(vertical-align/height/line-height)。于是，（例如）我们就可以直接使用line-height让一个块状表现的元素垂直居中

3. 理解width:max-content

max-content的行为表现可以这么理解，假设我们的容器有足够的宽度，足够的空间，此时，所占据的最大宽度是就是max-content所表示的尺寸。

会发现，width:max-content表现得好像设置了white-space:nowrap一样，文字一马平川下去，元素的宽度也变成了这些文字一行显示的宽度！为什么会这么表现呢？定义就是这样的，对吧，我们对照下， 首先，假设我们的容器有足够的空间，你想呀，容器足够空间，那下面的描述文字肯定会从左到右排列一行显示了，此时，上面的图片和下面的文字哪个内容宽度大？，自然是文字啦，所谓max-content就是width值采用宽度大的那个内容的宽度，也就是这里的文字的长度了

4. 理解width:min-content

min-content宽度表示的并不是内部哪个宽度小就是哪个宽度，而是，采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。

首先，我们要明白这里的“最小宽度值”是什么意思。对于替换元素，例如图片的最小宽度值就是图片呈现的宽度，对于文本元素，如果全部是中文，则最小宽度值就是一个中文的宽度值；如果包含英文，因为默认英文单词不换行，所以，最小宽度可能就是里面最长的英文单词的宽度。So，大家明白的说

同样的是和display:inline-block做比较，display:inline-block虽然也具有收缩特性，但宽度随最大长度长的那一个（同时不超过可用宽度）。而width:min-content的最终宽度是图片和文字最小宽度值里面较大的那一个

5. 理解width:fit-content

width:fit-content也是应该比较好理解的，“shrink-to-fit”表现，换句话说，和CSS2.1中的float, absolute, inline-block的尺寸收缩表现是一样的

OK，然后，有小伙伴会疑问，既然跟很多CSS声明有一样的表现，那为什么还要再弄个新东西呢？

就拿水平居中效果举例，首先浮动肯定不行，因为只有左浮动和右浮动；绝对定位压根不占据空间，普通流中根本无法应用，而inline-block需要父级使用text-align:center，而本身可能还需要text-align:left略烦。

而width:fit-content可以没有这些烦恼，因为，width:fit-content可以实现元素收缩效果的同时，保持原本的元素block水平状态，于是，就可以直接使用margin:auto实现元素向内自适应同时的居中效果了。