常见面试题

1、animation与transition(过渡)的区别：

       相同点：都是随着时间改变元素的属性值

       不同点：

             transition需要触发一个时间(hover事件或click事件等)才会随时间改变其css属性值；

             animation则在不需要触发任何事件的情况下，也可以随时间改变其css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值

2、CSS的层叠性

是指样式的优先级，当产生冲突时以优先级高的为准；

权重相同是取后面定义的样式；

id选择器>(伪)类选择器>元素符号选择器。

3、CSS的继承属性

可继承：

color、font-size、font-weight、font-style、font-family、font-variant、line-height、

list-style、border-collapse、text-decoration、text-transform、text-align、text-indent、

letter-spacing、word-spacing

4、link和import的区别

差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式；

差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显；

差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题；

差别4：使用dom(document o bject model文档对象模型 )控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的；

5、BEC布局规则

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个元素的margin box的左边， 与包含块border box的左边相接触
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
• BFC的区域不会与float box重叠。
• 计算BFC的高度时，浮动元素也参与计算

6、高度塌陷解决办法：

1.给父级元素设置高度

               -- 优点：从根本解决问题

               -- 缺点：无法做到自适应

 2.给父级添加overflow:hidden

     原理：设置了文本溢出属性触发了BFC（块级格式化上下文）     规则：浮动元素也参与高度计算

     -- 优点：简单

     -- 缺点：如果子级元素有超过父级容器的部分将会被隐藏   破坏正常的网页布局

 3.在最后一个子级元素添加一个任意标签（div），给这个标签设置clear:both

     -- 属性 clear:left/right/none/both

     -- 原理：清除上方预留出来的空间

     -- 优点：解决高度塌陷并且自适应

    -- 缺点：会生成多余结构代码，代码冗余，结构错乱，并且样式容易冲突

 4. 万能清除法（难理解 会用即可）

     -- 原理：清除上方预留出来的空间

     -- 方法：在父级元素上添加clear-fix

                   clear-fix::after{
                           content:"";

                            width:100%;(可加可不加)

                            height:0;(可加可不加)

                            display:block;

                           clear:both;

                           overflow:hidden;

                           visibility:hidden;}