前端面试系列-CSS和页面布局
具有flex布局的元素成为flex容器。它的所有子元素都自动成为容器成员，这被称为flex项目。常用的，设置为容器属性的有:
为项目设置的属性:
(块格式上下文)块级格式上下文。BFC是页面上一个孤立独立的容器，容器中的子元素不会影响外部元素，反之亦然。此外，在BFC中，块框和行框(行框由一行中的所有行内元素组成)将沿其父元素的边界垂直排列。
以上方法都可以创造BFC，但都会带来一些负面影响:
::before是css3的写法，而:before是css2的写法，用来设置对象之前的内容。
:before的兼容性比::before好。
更准确的说法
1和transition是转场，是改变样式值的过程，只有开始和结束；动画也称为关键帧，可以通过与关键帧结合来设置中间帧的状态。
2.带@keyframe的动画可以触发这个过程，不需要触发时间，而转场需要通过hover或者js事件触发；
3.动画可以设置很多属性，比如循环次数，动画结束的状态等。转换只能触发一次；
4.动画可以结合关键帧设置每一帧，但是转场只有两帧；
常规方法
当不需要使用变换属性时
Webkit内核
参考链接:
CSS实现不换行/换行/文本超出隐藏显示省略号
object-fit CSS属性指定可替换元素的内容如何适应高度和宽度已确定的框。这个CSS属性可以实现最好最完美的自动裁剪图片居中的功能。
@import规则必须在除@charset之外的任何其他CSS规则之前。
@不建议导入:
由于浏览器的兼容性，不同的浏览器中有些标签的默认值是不一样的。如果没有CSS初始化，浏览器之间的页面显示往往会有差异。
伪元素和伪类的区别概述
Css继承意味着包装在里面的标签将具有外部标签的样式，即子元素可以继承父元素的属性。
相关链接:
CSS继承，哪些属性可以继承，哪些不可以？
Z-index可以改变元素的堆叠顺序，较大的z-index会叠加在较小的z-index元素上。当z-index值相同时，后者按照文档流的顺序覆盖前者。
Px是pixel的缩写，意思是像素。像素是图片中最小的点，在千千，位图是由数千个这样的点组成的。比如我们经常听到的电脑像素是1024x768，也就是说水平方向有1024个像素，垂直方向有768个像素。注意css中的1px不一定是一个物理像素的像素块，要根据DPR计算出多少个物理像素块。
设备像素比:dpr =物理像素/逻辑像素(px)。比如iPhone6的dpr是2，物理像素是750(x轴)，那么它的逻辑像素就是375。
引用是父元素的字体大小，具有继承的特性。如果自行定义计算字体大小(浏览器默认字体为16px)，则整个页面中的1em不是一个固定值。
与根元素html的字体大小相比，css3的新单元将不依赖于父元素的字体大小，这将像em一样造成混乱。
css3的新单位，视点宽度的缩写，窗口宽度，1vw等于窗口宽度的1%。比如浏览器宽度是1200px，1VW = 1200 px/100 = 12px。
1英寸)=2.54厘米。
手机对角线的长度换算成英寸。
屏幕水平和垂直方向的像素
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为例，下面写的是逐步增强。
首先，建立一个高级浏览器的页面，首先完善所有的功能。然后对不同的浏览器进行测试和修复，保证低级别的浏览器也有基本的功能。低级别的浏览器被认为是“差，但还过得去”，可以稍微调整以适应特定的浏览器。但是因为它们不是我们关注的重点，所以除了修复大的错误之外，其他的差异都会被直接忽略。也就是基于高需求高版本，向后兼容。同样以css为例，优雅降级是这样写的。
渐进增强，开发时间长，成本高，优雅退化，节约成本，开发周期短。