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;}