1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？
（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）
（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分
IE盒模型和W3C标准盒模型的区别：
（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding
（2）IE盒模型：属性width，height包含content、border和padding，指的是content
+padding+border。
2.CSS 选择符有哪些？
（1）id选择器（#myid）
（2）类选择器（.myclassname）
（3）标签选择器（div,h1,p）
（4）后代选择器（h1p）
（5）相邻后代选择器（子）选择器（ul>li）
（6）兄弟选择器（li~a）
（7）相邻兄弟选择器（li+a）
（8）属性选择器（a[rel="external"]）
（9）伪类选择器（a:hover,li:nth-child）
（10）伪元素选择器（::before、::after）
（11）通配符选择器（*）
3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。
在css3中使用单冒号来表示伪类，用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法，在一些浏览器中也可以使用单冒号 来表示伪元素。
伪类一般匹配的是元素的一些特殊状态，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、before等。
4.CSS 中哪些属性可以继承？
每一个属性在定义中都给出了这个属性是否具有继承性，一个具有继承性的属性会在没有指定值的时候，会使用父元素的同属性的值 来作为自己的值。
一般具有继承性的属性有，字体相关的属性，font-size和font-weight等。文本相关的属性，color和text-align等。
表格的一些布局属性、列表属性如list-style等。还有光标属性cursor、元素可见性visibility。
当一个属性不是继承属性的时候，我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。
5.如何居中 div？
一般常见的几种居中的方法有：
<div class="parent">
<div class="child"></div>
</div>//第一种
div.parent {
display: flex;
justify-content: center;
align-items: center;
}//第二种
div.parent { position: relative;
}
div.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 或者 */
div.child {
width: 50px;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -5px;
}
/* 或 */
div.child {
width: 50px;
height: 10px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}//第三种
div.parent {
display: grid;
}
div.child {
justify-self: center;
align-self: center;
}//第四种
div.parent { font-size: 0;
text-align: center;
&::before {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
}
div.parent{
display: inline-block;
vertical-align: middle;
}6.display 有哪些值？说明他们的作用。
block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none 元素不显示，并从文档流中移除。
inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block默认宽度为内容宽度，可以设置宽高，同行显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承display属性的值。
7.css3新增的属性
CSS3 实现圆角（border-radius:8px;），
阴影（box-shadow:10px）,
对文字加特效（text-shadow）,
线性渐变（gradient），
旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转，缩放，定位，倾斜
增加了更多的 css 选择器 多背景 rgba
8.请解释一下 CSS3 的 Flexbox（弹性盒布局模型）
flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex 容器，它的所有子元素都会成为它的项目。
一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。我们可以使用flex-direction来指定主轴的方向。 我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还 可以使用flex-wrap来规定当一行排列不下时的换行方式。
对于容器中的项目，我们可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，
项目的放大比例。还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。
9.CSS经常遇到的浏览器的兼容性有哪些
（1）png24位的图片在iE6浏览器上出现背景 解决方案：做成PNG8，也可以引用一段脚本处理。
（2）浏览器默认的margin和padding不同 解决方案：加一个全局的*{margin:0;padding:0;}来统一。
（3）IE6双边距bug：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或 margin-right，margin值会加倍。 #box{float:left;width:10px;margin:00010px;} 这种情况之下IE会产生20px的距离 解决方案：在float的标签样式控制中加入_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
（4）渐进识别的方式，从总体中逐渐排除局部。 首先，巧妙的使用"\9"这一标记，将IE游览器从所有情况中分离出来。 接着，再次使用"+"将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 .bb{ background-color:#f1ee18;/*所有识别*/ .background-color:#00deff\9;/*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ }
（5）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义 属性；Firefox下，只能使用getAttribute()获取自定义属性 解决方法：统一通过getAttribute()获取自定义属性。
（6）IE下，event对象有x、y属性，但是没有pageX、pageY属性;Firefox下，event对象有 pageX、pageY属性，但是没有x、y属性。 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
（7）Chrome中文界面下默认会将小于12px的文本强制按照12px显示 解决方法： 1.可通过加入CSS属性-webkit-text-size-adjust:none;解决。但是，在chrome 更新到27版本之后就不可以用了。 2.还可以使用-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.75); 收缩的是整个span的大小，这时候，必须要将span转换成块元素，可以使用display：block/inline-block/...；
（8）超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了 解决方法：改变CSS属性的排列顺序L-V-H-A
（9）怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模
式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。
10.简单介绍使用图片 base64 编码的优点和缺点。
base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的 url属性。
使用base64的优点是：
（1）减少一个图片的HTTP请求
使用base64的缺点是：
（1）根据base64的编码原理，编码后的大小会比原文件大小大1/3，如果把大图片编码到html/css中，不仅会造成文件体 积的增加，影响文件的加载速度，还会增加浏览器对html或css文件解析渲染的时间。
（2）使用base64无法直接缓存，要缓存只能缓存包含base64的文件，比如HTML或者CSS，这相比域直接缓存图片的效果要 差很多。
（3）兼容性的问题，ie8以前的浏览器不支持。
一般一些网站的小图标可以使用base64图片来引入。
11.清除浮动的方法有哪些？这些方法有什么缺点？
（1）通过一个空标签，定义CSS代码clear：both 缺点：增加了无意义的标签
（2）使用overflow:hidden属性，这种方法有效的解决了通过添加空标签元素清除浮动而不得不增加无意义代码的弊端
（3）
.div1:after{
content:"";
display:block;
clear:both;}
12.怎么让 Chrome 支持小于 12px 的文字？
在谷歌下css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px。
解决办法：
（1）可以使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit-text-size -adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器 已经不再支持-webkit-text-size-adjust样式，所以要使用时候慎用。
（2）还可以使用css3的transform缩放属性-webkit-transform:scale(0.5);注意-webkit-transform:scale(0. 75);收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/ inline-block/...；
（3）使用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。
13.CSS 优化、提高性能的方法有哪些？
加载性能：
（1）css压缩：将写好的css进行打包压缩，可以减少很多的体积。
（2）css单一样式：当需要下边距和左边距的时候，很多时候选择:margin:top0bottom0;但margin-bottom:bot tom;margin-left:left;执行的效率更高。
（3）减少使用@import,而建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。
选择器性能：
（1）关键选择器（keyselector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到 左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
（2）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹 配它们了）。
（3）避免使用通配规则，如*{}计算次数惊人！只对需要用到的元素进行选择。
（4）尽量少的去对标签进行选择，而是用class。
（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过 三层，更多的使用类来关联每一个标签元素。
（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。
渲染性能：
（1）慎重使用高性能属性：浮动、定位。
（2）尽量减少页面重排、重绘。
（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。
（4）属性值为0时，不加单位。
（5）属性值为浮动小数0.**，可以省略小数点之前的0。
（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
（7）不使用@import前缀，它会影响css的加载速度。
（8）选择器优化嵌套，尽量避免层级过深。
（9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清 楚，再使用。
（10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
（11）不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。webfonts通常体积庞大，而且一些浏 览器在下载webfonts时会阻塞页面渲染损伤性能。
可维护性、健壮性：
（1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。
（2）样式与内容分离：将css代码定义到外部css中。
14.什么是 CSS 预处理器/后处理器？
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成
文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然
后再编译成正常的CSS文件。
预处理器例如：LESS、Sass、Stylus，用来预编译Sass或lesscsssprite，增强了css代码的复用性，还有层级、mixin、
变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
CSS后处理器是对CSS进行处理，并最终生成CSS的预处理器，它属于广义上的CSS预处理器。我们很久以前就在用CSS后
处理器了，最典型的例子是CSS压缩工具（如clean-css），只不过以前没单独拿出来说过。还有最近比较火的Autoprefixer，
以CanIUse上的浏览器支持数据为基础，自动处理兼容性问题。
后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏
览器私有前缀，实现跨浏览器兼容性的问题。
15.使用 rem 布局的优缺点？
优点： 在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，使得在设备上的展现都统一起来了。 而且现在浏览器基本都已经支持rem了，兼容性也非常的好。
缺点：
（1）在奇葩的dpr设备上表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱。 （2）使用iframe引用也会出现问题。
（3）rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚，还是为了看的更多的问
题。
16.如何实现单行／多行文本溢出的省略（...）？
/*单行文本溢出*/
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*多行文本溢出*/
p {
position: relative;
line-height: 1.5em;
/*高度为需要显示的行数*行高，比如这里我们显示两行，则为3*/
height: 3em;
overflow: hidden;
}
p:after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
background-color: #fff;
}17.常见的元素隐藏方式？
- 使用 display:none;隐藏元素，渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
- 使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间，但是不会响应绑定的监听事件。
- 使用 opacity:0;将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
- 通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
- 通过 z-index 负值，来使其他元素遮盖住该元素，以此来实现隐藏。
- 通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
- 通过 transform:scale(0,0)来将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
18.rem em px区别
- px相对长度单位，相对于显示器屏幕分辨率来的
- em相对长度单位，相对于当前对象内文本的字体尺寸来的，值不固定，会继承父级元素字体的大小，未经调整浏览器：16px = 1em。假如父元素为2em，子元素为2em字体实际大小为4em
- rem是css3新增的相对单位，使用rem为元素设置大小时，是相对大小，相对的是html根元素，修改根元素就可以调整所有字体大小，还可以避免字体大小逐层复合的连锁反应，未经调整浏览器：16px = 1rem
19.详细说下BFC
- BFC块级格式上下文，是页面上一个独立的容器，容器内的子元素不会影响到外边的元素，垂直方向边距重叠，计算高度是浮动元素也会计算
- BFC触发：根元素（html），浮动元素（float不为none），绝对定位元素（position为absolute和fixed）,行内块元素（display为inline-block），overflow值不为visible，弹性元素（display为flex）
- 应用场景：设置元素为BFC防止浮动高度塌陷，避免外边距重叠
20.css优先级
21.CSS有⼏种定位⽅式？
22.如何理解层叠上下⽂？
23.清除浮动有哪些⽅法？
- 空div⽅法： <div style="clear:both;"></div>
- Clearfix ⽅法：上⽂使⽤.clearfix类已经提到
- overflow: auto或overflow: hidden⽅法，使⽤BFC
24.你对css sprites的理解，好处是什么？
25.你对媒体查询的理解？
是什么
如何使⽤？
<!-- link元素中的CSS媒体查询 --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- 样式表中的CSS媒体查询 --> <style> @media (max-width: 600px) { .facet_sidebar { display: none; } }</style>
