box-sizing有哪些属性
标准盒子模型
box-sizing:content-box;
width = 内容的宽度
height = 内容的高度
IE盒子模型
box-sizing:border-box;
width = border + padding + 内容的宽度
height = border + padding + 内容的高度
div {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid red;
background: yellow;
}
.content-box {
box-sizing: content-box;
/* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
Content box width: 160px
Content box height: 80px */
}
.border-box {
box-sizing: border-box;
/* Total width: 160px
Total height: 80px
Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}
参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing
清除浮动的几种方法
.clearfix:after {
display: table;
content: " ";
clear: both;
}
.clearfix{
zoom: 1;
}
.box{
overflow: hidden;
}
水平垂直剧中
/* 已知宽高 */
.box {
width:100px;
height:100px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.box {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
/* 未知宽高 HTML5 */
.center {
color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/* flex */
.fatch{
display: flex;
align-items: center;
justify-content: center;
}
.child{
}
flex
任何一个容器都可以指定为 Flex 布局。
display: flex;
行内元素也可以使用 Flex 布局。
display: inline-flex;
容器的属性
-flex-direction
-flex-wrap
-flex-flow
-justify-content
-align-items
-align-content
/* 排列方向 */
flex-direction: row/* 行 */ | row-reverse | column/* 柱 */ | column-reverse;
/* 是否换行 */
flex-wrap: nowrap/* 不换行 */ | wrap/* 换行 */ | wrap-reverse;
/* 排列方式和是否换行的合并写法 */
flex-flow:'' /*<flex-direction> || <flex-wrap>*/;
/*X轴对齐方式*/
justify-content: flex-start | flex-end | center | space-between/* 空间-之间 */ | space-around/* 空间-围绕 */;
/*Y轴对齐方式*/
align-items: flex-start | flex-end | center | baseline | stretch/* 伸展 */;
/* Y轴多行对齐方式 */
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
省略号
white-space: nowrap; /*不让换行*/
overflow:hidden; /*不让溢出*/
text-overfolw: ellipsis; /*溢出省略号*/
CSS3
border-radius 圆角
border-shadow 盒阴影
transform
移动
transform: translate(x轴移动距离, y轴移动距离) // 原点在左上角
旋转
transform: rotate(angle) // 括号内填写旋转角度
缩放
transform: scale(宽度的倍数, 高度的倍数)
倾斜
transform: skew(相对于x轴角度, 相对于y轴角度)
transition
transition: 指定需要变化的属性（例如width）,完成时间, 转速曲线, 延迟执行的时间
@keyframes 和 animation
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
div {
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}
