CSS选择器的优先级是多少？ link和@import有什么区别？ 是否有隐藏页面元素的方法(CSS )？ empxrem有什么区别？ 如何水平居中块级元素？ CSS有几种定位方式吗？ 如何理解z-index？ 如何理解层叠上下文？ 有什么方法可以清除浮动？ 了解css-sprites了解媒体查询了解盒模型了解标准盒模型和奇怪盒模型有什么区别？ 谈谈对BFC(blockformattingcontext )的理解吧？ 为什么人们要用翻译来改变位置呢？ 伪类和伪元素有什么区别？ 你对flex的理解是什么？ 关于CSS的动画和迁移问题CSS选择器的优先级是什么？ CSS选择器的优先级是：内联ID选择器类选择器标签选择器
在具体计算级别，优先级由a、b、c和d的值决定。 其中，值的计算规则如下：
a的值为1假设存在内联样式，否则A=0； b的值与ID选择器显示的次数相同。 c的值等于类选择器、属性选择器和伪类出现的总数； d的值等于标签选择器和伪元素出现的总数。 例如，在以下选择器中，如果不存在内联样式，不存在所有A=0，id选择器B=0，存在一个类选择器C=1和三个标签选择器D=3，则最终计算结果为{ 0，0，1，3
ul ol li .red {.}如果遵循此计算方法，则以下计算结果为： { 0，1，0，0 }
#red{ .}我们比较优先级的方式是从a到d比较值的大小，从左到右依次减小a、b、c、d的权重。 在确定优先级时，从左到右逐个进行比较，直到比较最大值为止。
例如，与第一示例性b相比，第二示例性b是10，因而无需下一比较而具有高第二选择器的优先级。
link和@import有什么区别？ link是XHTML标记，但@import由CSS提供。 页面加载后，link也会同时加载，@import引用的CSS将等待页面加载。 import必须是IE 5或更高版本才能识别，但link是XHTML标记，没有兼容性问题。 link方式的风格权重高于@import的权重。 使用dom控制样式时的区别。 使用javascript控制dom并更改样式时，@import有时由dom控制，因此只能使用link标记。 如何隐藏页面元素(CSS )？ opacity:0 :本质上使元素的透明度为0，以便隐藏可见，但仍然占用空间并允许交互。 visibility :隐藏：与前面的方法效果相同，占用空间，但不能相互作用。 overflow :隐藏：它只隐藏元素溢出的部分，但占用空间，无法交互。 display:none :它完全隐藏了元素，当元素小于文档流时(即不占用空间、不交互、不影响布局)。 z-index:-9999 :原理是将层次放在底部，看起来像是隐藏和隐藏。 transform : scale (0，0 ) )平面变换，将元素缩放为0，但仍然占用空间，但不能相互作用。 虽然也有以绝对对齐方式将元素移动到可视区域之外，或在clip-path中进行修剪的操作，但由于Hack太大，因此不予提及。
expxrem有什么区别？ px:绝对单位，页面以准确的像素显示。 相对于单位，参考点是父节点的字体大小，如果您定义并自行计算字体大小(浏览器的默认字体为16px )，则整个页面上1em不是固定值。 rem :相对单位，可以理解为“root em”。 根据根节点的html字体大小进行计算。 向CSS3添加新属性。 chrome/firefox/IE9是否支持块级元素的水平居中对齐方法？ 使用Hack的话，水平中心的方法非常多，所以只介绍主流的、奇怪的参照扩展阅读。 margin :0自动方法：
. center{width:200px； height:200px； margin :0自动； border :1 px固态黑； }div class='center '水平中心/div flex布局，当前主流方法：
. center {display:flex； justify-content:center； //align-items3360center水平居中； //垂直居中} divclass=' center ' divclass=' flex _ div '2/divdivclass=' flex _ div '1/div/div table方法：
. center{display:table； margin :0自动； border :1 px固态黑； }也有}div class='center '水平中心/div位置(margin|transform )等方法，但不举例。 没有必要是重点。 CSS有几种定位方式吗？ 静态：常规文档流的定位。 在这种情况下，top、right、bottom、left和z索引属性无效，块级元素从上到下垂直排列，行级元素从左到右排列。 relative :相对位置，在这种情况下，【相对】是相对于普通文档流的位置。 absolute :将祖先元素定位到最近的非静态的偏移。 确定元素的位置。 例如
一个绝对定位元素它的父级，和祖先级元素都为relative，它会相对他的父级而产生偏移。fixed：指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，比如那种回到顶部的按钮一般都是用的这个定位方式。sticky：粘性定位，特性近似于relative和fixed的合体，其在实际应用中的近似效果就时IOS通讯录滚动的时候的【顶屁股】。 如何理解z-index?CSS中的z-index属性控制重叠元素的垂直叠加顺序，默认元素的z-index为0，我们可以修改z-index来控制元素的图层位置，而且z-index只能影响设置了position值的元素；
我们可以把视图上的元素认为是一摞书的层叠，而人眼是俯视的视角，设置z-index的位置，就如同设置一本书在这摞书中的位置。
如何理解层叠上下文？是什么？
层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
如何产生？
触发一下条件则会产生层叠上下文:
根元素(HTML).一个z-index值不为auto的flex项目(flex item),即：父元素 display:flex|inline-flex,z-index值不为auto的 绝对/相对定位。opacity 属性值小于1的元素(参考 the specification for opacity)transform 属性值不为 none 的元素mix-blend-mode 属性值部位normal的元素filter值不为none的元素perspective值不为none的元素isolation 属性被设置为 inolate 的元素position:fixed在 will-change中指定了任意CSS属性，即便你没有直接指定这些属性的值-webkit-overflow-scrolling 属性被设置touch 的元素 清除浮动有那些方法？ 空div方法：<div style="clear:both;"><div>Clearfix方法： 上文使用.clearfix类已经提到overflow：auto或overflow:hidden方法，使用BFC 在flex已经成为布局主流之后，浮动这种东西越来越少见了，毕竟它的副作用太大你对css sprites的理解，好处是什么？
雪碧图也叫CSS精灵，是以CSS图像合成技术，开发人员往往将小图标合并在一起之后的图片称为雪碧图。
如何操作？
使用工具(PS之类的)将多张图片打包成一张雪碧图，并为其生成合适的CSS。每张图片都有相应的CSS类。该类定义了background-image、background-position和background-size属性。使用图片时，将相应的类添加到你的元素中。
好处：
减少加载多张图片的HTTP请求数(一张雪碧图只需要一个请求)提前加载资源不足：
CSS Sprite维护成本较高，如果页面背景有少许改动，一般就要改这张合并的图片加载速度优势在http2开启后荡然无存，HTTP2多路复用，多张图片也可以重复利用一个连接通道搞定。 你对媒体查询的理解?是什么?
媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身，非常适合web页面应对不同型号的设备而做出对应的响应适配。
如何使用？
媒体查询包含一个可选的媒体类型和满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为 true 和 false。 如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true，那么媒体查询内的样式将会生效。
<link rel="stylesheet" media="(max-width : 800px)" rel="external nofollow" href="example.css" /><style>@media (max-width:600px){.facet_sidebar{display:none;}}</style> 你对盒模型的理解？是什么？
当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的CSS基础框盒模型(CSS basic box model)，将所有元素表示为一个个的矩形的盒子(box)。CSS决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸。。。）。
盒模型由content(内容)、padding(内边距)、border(边框)、margin(外边距) 组成。
标准盒模型和怪异盒模型有什么区别？在W3C标准下，我们定义元素的width值即为盒模型中的content的宽度值，height值即为盒模型中的content的高度值。
因此，标准盒模型下：
元素的宽度=margin-left + border-left + padding-left + width + padding-right + border-right + margin-right而IE怪异盒模型(IE8以下)width的宽度并不是content的宽度，而是border-left+padding-left+content的宽度值+padding-right+border-right之和，height同理
虽然现代浏览器默认使用W3C的标准盒模型，但是不少情况下怪异盒模型更好用，于是W3C在css3中加入box-sizing。
box-sizing: content-box;//标准盒模型box-sizing: border-box;//怪异盒模型box-sizing: padding-box;//火狐的私有模型，没人用 谈谈对BFC的理解是什么？
书面解释：BFC(Block Formatting Context)这几个英文的拆解
Box：CSS布局的基本单位，Box是CSS布局的对象和基本单位，直观点来说，就是一个页面是由很多个Box组成的，实际就是上个问题说的盒模型Formatting context ：块级上下文格式化，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。简而言之，它是一块独立的区域，让处于BFC内部的元素与外部的元素互相隔离
如何形成？
BFC触发条件:
根元素，即HTML元素position：fixed/absolutefloat不为noneoverflow不为visibledisplay的值为inline-block、table-cell、table-caption作用是什么？
防止margin发生重叠
两栏布局，防止文字环绕等
防止元素塌陷
为什么有时候人们用translate来改变位置而不是定位？translate()是transform的一个值。改变transform或opacity不会触发浏览器重新布局(reflow)或重绘(repaint),只会触发复合(compositions)。而改变绝对定位会触发重新布局，进而触发重绘和复合。transform使浏览器为元素创建一个GPU图层，但改变绝对定位会使用到CPU。因此translate()更高效，可以缩短平滑的绘制时间。
而translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发生这种情况。
伪类和伪元素的区别时什么？是什么?
伪类(pseudo-class) 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，爱笑的芒果希望样式在特定状态下猜被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
区别
其实上文已经表达清除两者的区别了，伪类是通过在元素选择器上加入伪类改变元素状态，而伪元素通过对元素的操作进行对元素的改变。
我们通过p::before对这段文本添加了额外的元素，通过p:first-child改变了文本的样式。
你对flex的理解？web应用有不同设备尺寸和分辨率，这时需要响应式界面设计来满足复杂的布局需求，Flex弹性盒模型的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对齐的场景时，就要优先考虑弹性盒布局
关于CSS的动画与过渡问题说不明白，哈哈哈哈哈。。。。