基础-必会知识（下）
2 基础-必会知识（下）
2.1 请问有哪些CSS浏览器兼容问题以及解决方案？
【考点映射】
-
CSS浏览器兼容问题
-
兼容问题解决方案
【频率】★★★
【难度】☆
【参考答案】
目前，浏览器厂商众多，Chrome，Frirefox，Safari，Edge，IE6……对于同一段CSS代码，不同厂商、甚至同一厂商不同版本的解析效果极大可能不一致，其根本原因是浏览器内核不同，这就导致了页面显示效果不统一，产生了CSS兼容性问题
目前对兼容问题的解决方案：
-
浏览器CSS样式初始化
*{
margin: 0;
padding: 0;
}
-
浏览器私有属性
可直接在某个属性中额外添加浏览器私有写法，确保浏览器能识别该属性值，有两种开发思路，分别是渐近增强和优雅降级
渐进增强：先写某些特殊浏览器能识别的私有属性，再写通用写法确保大部分浏览器能正常显示
.transition {
-webkit-transform:rotate(-3deg); /*Chrome/Safari*/
-moz-transform:rotate(-3deg); /*Firefox*/
-ms-transform:rotate(-3deg); /*IE*/
-o-transform:rotate(-3deg); /*Opera*/
transform:rotate(-3deg);
}
优雅降级：先确保大部分浏览器能正常显示，再写某些特殊浏览器能识别的私有属性
.transition {
transform:rotate(-3deg);
-webkit-transform:rotate(-3deg); /*Chrome/Safari*/
-moz-transform:rotate(-3deg); /*Firefox*/
-ms-transform:rotate(-3deg); /*IE*/
-o-transform:rotate(-3deg); /*Opera*/
}
-
CSS hack语法（一般情况下，尽量避免使用CSS hack，过多滥用会造成html文档混乱，不易管理与维护）
-
条件hack，IE浏览器专有的hack方式，微软官方推荐
<!--[if IE]> 这段文字只在IE浏览器显示 <![endif]--> <!--[if gte IE 6]> 这段文字只在IE6以上(包括)版本IE浏览器显示 <![endif]-->
.test {
color: red; /* All browsers */
*color: blue; /* IE7，IE6 */
_color: skyblue; /* IE6 */
}
*html /* *前缀只对IE6生效*/
*+html /* *+前缀只对IE7生效*/
@media screen\9{...} /*只对IE6/7生效*/
@media \0screen {body { background: red; }} /*只对IE8有效*/
@media \0screen\,screen\9{body { background: blue; }} /*只对IE6/7/8有效*/
@media screen\0 {body { background: green; }} /*只对IE8/9/10有效*/
@media screen and (min-width:0\0) {body { background: gray; }} /*只对IE9/10有效*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} /*只对IE10有效*/
-
自动化插件
在解析CSS文件时，插件会自动添加浏览器前缀至CSS代码中，如Autoprefixer
2.2 请问Flex的常见写法：flex:1表达什么含义？
【考点映射】
-
Flex缩写
-
Flex实际应用
【频率】★★★★
【难度】☆
【参考答案】
虽说Flex具有众多属性，但在实际开发常简写为：flex：1，再结合display：flex，就能轻松打造出自适应布局，这也是Flex布局最大的优势。实际上flex为：flex-grow flex-shrink flex-basic三者的缩写。
flex-grow：定义在分配多余空间时，盒子的放大比例，默认为0，即存在剩余空间，也不放大
flex-shrink：定义在分配多余空间时，盒子的缩小比例（多余空间可能是负值），默认为1，即空间不足将缩小
flex-basis：定义在分配多余空间之前，盒子占据的主轴空间（可理解为基准值），通常根据该属性计算多余空间，默认为auto，即盒子自身大小
flex取值不同，空间分配计算值不同，有以下几种常见情况：
|
|
flex-grow |
flex-shrink |
flex-basis |
|
|
flex: 2 3 23px |
2 |
3 |
23px |
当flex有三个值时，则依次分配给flex-grow、flex-shrink、flex-basic |
|
flex: none |
0 |
0 |
auto |
当 flex 为none时，则计算值为0 0 auto |
|
flex: auto |
1 |
1 |
auto |
当 flex 为auto时，则计算值为1 1 auto |
|
flex: 1 |
1 |
1 |
0% |
当 flex 为一个非负数字，该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0% |
|
flex: 0% |
1 |
1 |
0% |
当 flex 为一个长度或百分比，该数字为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1 |
|
flex: 23px |
1 |
1 |
23px |
|
|
flex: 2 3 |
2 |
3 |
0% |
当 |
剩余60%内容，订阅专栏后可继续查看/也可单篇购买
前端岗位面试求职攻略及真题解析~~
