一，动画与过渡的区别
(transition)过渡，做一些简单的效果，比如鼠标进入(:hover)出现阴影，被点击（:active）的时候按钮背景颜色变化等.一般是单段动画，一般需要交互触发。若没有设置过渡时间，则默认过渡时间为0，如瞬间移动等。
(animation )动画，能做多段动画，根据关键帧（@keyframes），可以根据设置的关键百分比（时间）设置多段效果，进而控制每一段时间内的动画效果。
二，实现元素垂直（水平）居中
1.设置子元素为display:inline/display:inline-block,利用父级line-height等于父级高度设置（水平居中设置text-align: center）。（只能单行）
2.为父级和子元素设置position（relative/absolute/fixed），给子元素添加top(left)定位（设置的大小一般为calc(50% - x),50%是父级的宽（高）的一半，x为子元素的宽（高）的一半），即可（只能单行）。
3.特殊布局，如父级设置display:flex.
3.默认margin:0 auto,或者margin:auto 0;
三，清除浮动
1.给父级添加伪元素:after;伪元素的样式为{content: ""; display: table; clear:both;}
2.在父级最后添加一个标签（一半为div），class为 clearfix。clearfix的样式为{clear:both;}
四，怪异盒模型与标准盒模型
W3C标准 为 标准盒模型。
IE（浏览器）标准盒子模型 为 怪异盒模型。
两者区别在与， 标准盒模型的宽高不会将 border和padding的值计算进去，即是
一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)，
而怪异盒模型是宽高把 border和padding的值计算进去，即是
一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
可以这么设置
-
当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
-
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
或者解决怪异盒模型在HTML页面声明 <!DOCTYPE html>即可（解决IE8及更早版本不兼容问题）。
扫一扫
6233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
