标签：iter 会同 通配符 答案 处理 frame blog css3 scale
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
CSS合并方法
答案：避免使用@import引入多个css文件，可以使用CSS工具将CSS合并为一个CSS文件，例如使用Sass\Compass等。
盒子模型
答案：参考HTML中第11题。
CSS定位
答案：Position各属性值详解
CSS中的绝对定位与相对定位,注意的是定位的参照：relative参照于自己该出现的位置，而absolute参照于祖先元素中与自己最近的已定位元素(relative或者absolute)直到body元素。
CSS动画原理
答案：挤压与拉伸、预期、舞台布局、顺利动画与关键帧、动作跟随与重叠、慢进慢出、弧形移动
CSS 动画指南： 原理和实战
英文原版
CSS3动画（简单动画的实现，如旋转等）
答案：依靠CSS3中提出的三个属性：transition、transform、animation。
transition：定义了元素在变化过程中是怎么样的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
transform：定义元素的变化结果，包含rotate、scale、skew、translate。
animation：动画定义了动作的每一帧（@keyframes）有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction。
具体可以参考一下三篇文章：
CSS3 Transition
CSS3 Transform
CSS3 Animation
CSS不同选择器的权重(CSS层叠的规则)
答案：首先，找出所有应用到该标签的所有规则。然后按照下面的规则进行应用：1、！important规则最重要，大于其它规则；2、行内样式规则，加1000；3、对于选择器中给定的各个ID属性值，加100；4、对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加10；5、对于选择其中给定的各个元素标签选择器，加1；6、通配符和结合符给予特殊性没有任何贡献；7、如果权值一样，则按照样式规则的先后顺序来应用，顺序靠后的覆盖靠前的规则。记住，CSS中选择器的优先级是先判断高位的数字，如果相等，才会继续判断低位的数字，如果高位分出大小了，就不考虑低位了。
flexbox布局及相关设置
答案：简单描述一下flex的属性，细节可以参考链接文档
容器属性（采用Flex布局的元素，container）：
flex-direction：决定主轴的方向（即项目的排列方向）；row | row-reverse | column | column-reverse;
flex-wrap：设置是否换行；nowrap | wrap | wrap-reverse
flex-flow：flex-direction属性和flex-wrap属性的简写形式，flex-direction || flex-wrap
justify-content：定义了项目在主轴上的对齐方式；flex-start | flex-end | center | space-between | space-around
align-items：定义项目在交叉轴上如何对齐；flex-start | flex-end | center | baseline | stretch
align-content：定义了多根轴线的对齐方式；flex-start | flex-end | center | space-between | space-around | stretch
项目属性（子元素为项目，item）
order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。
flex：flex-grow, flex-shrink 和 flex-basis的简写。
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
块级元素和行内元素的异同
答案：块级元素：header/p/div/form/table/footer....；行内元素：span/a/strong/em/input...
1.块级元素分行，行内元素不分行；
2.块级元素可以包含块级元素和行内元素，行内元素只能包含行内元素，不能包含块级元素；
3.行内元素设置width、height、margin的上下、padding的上下无效；
4.行内元素可以通过设置display：block，渲染为块级元素。
CSS在性能优化方面的实践（比方说选择器的效率等）
答案：网络层面：css压缩与合并、Gzip压缩；加载方式：css文件放在head里、不要用@import；语法结构：尽量用缩写、避免用滤镜、合理使用选择器。
可参考CSS性能优化策略
CSS打包压缩的方法与异同
答案：利用打包工具grunt/gulp。
易于使用：采用代码优于配置策略，Gulp让简单的事情继续简单，复杂的任务变得可管理。
高效：通过利用Node.js强大的流，不需要往磁盘写中间文件，可以更快地完成构建。
高质量：Gulp严格的插件指导方针，确保插件简单并且按你期望的方式工作。
易于学习：通过把API降到最少，你能在很短的时间内学会Gulp。构建工作就像你设想的一样：是一系列流管道。
使用CSS预处理的优缺点（比方说Sass和Compass等）
答案：Css预处理器定义了一种新的语言将Css作为目标生成文件，然后开发者就只要使用这种语言进行编码工作了。预处理器通常可以实现浏览器兼容，变量，结构体等功能，代码更加简洁易于维护。让你用一种编程语言的思维来写CSS样式。但是带来的缺点是需要增加设计工作以及学习熟悉成本。
{ box-sizing: border-box; }这条CSS规则是干嘛的，有什么优点
答案：让CSS布局更加直观：box-sizing
CSS浮动的原理及清除浮动的方法及优缺点
答案：而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。
css-float浮动的深入研究、详解及拓展
那些年我们一起清除过的浮动
css清除浮动各种方法
CSS水平垂直居中的方法
答案：CSS垂直居中总结
base64的原理及优缺点
答案：优缺点如下，原理参考文章
优点可以加密，减少了http请求，图片更新没有上传和清缓存了；
缺点是需要消耗CPU进行编解码、增大了CSS、浏览器兼容方面吧。
从原理上搞定编码-- Base64编码
关于base64编码的原理及实现
小tip: base64:URL背景图片与web页面性能优化
CSS reset和normalize的区别
答案：reset是将浏览器所有的默认样式进行重置、覆盖，normalize是保留原来浏览器的样式并且尽量在不同浏览器里保持一致。
可以参考知乎上的问题Normalize.css 与传统的 CSS Reset 有哪些区别？
link和@import的区别
答案：本质上他们都是为了引入外部css样式的，但是有区别如下：
1.link属于XHTML标签，而@import完全是CSS提供的一种方式。
2.加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
3.兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
4.使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
左右上下margin合并重合的问题
答案：上下margin重合，并选取最大的作为间距。左右margin不合并，间距等于相加。
也可以参考：
CSS 外边距(margin)重叠及防止方法
W3C 8.3.1 Collapsing margins
rem字体大小设置
答案： rem其实就是相对根元素的相对值，具体可参考：
CSS3的REM设置字体大小
CSS3新增的特性
答案：深入了解 CSS3 新特性
列出你所知道可以改变页面布局的属性
答案：position、display、float、width、height、margin、padding、top、left、right、bottom，欢迎继续补充。
多人协作时，怎么避免样式被覆盖
答案：团队之间制定良好的CSS规范，可以参考：web前端代码规范--CSS篇
标签：iter 会同 通配符 答案 处理 frame blog css3 scale
原文地址：https://www.cnblogs.com/LingXiangLi/p/10252848.html
