css3 总结02

盒子尺寸###

.border-box{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border-sizing: border-box;
}
//默认为content-box

变形###

//顺时针旋转
transform: rotate(30deg);
//沿着x,y轴旋转
transform: skew(30deg, 30deg);
//平移(多个书写没有逗号)
transform: translateX(30px) translateY(30px);
//放大
transform: scale(1.5);

firefox:-moz-;chrome,safari:-webkit-;opear:-o-;ie>=9, -ms-;

弹性盒模型###

过去,如果要使一个列表水平排列,就要用浮动;而弹性盒模型可以实现更多功能

  • box-orient : 设置或检索弹性盒模型对象的子元素的排列方式。###

//子元素水平排列 box-orient:horizontal;

css3 总结02

//子元素垂直排列 box-orient:vertical;

css3 总结02

  • box-pack : 设置或检索弹性盒模型对象的子元素的对齐方式。###

//横向排列时子元素从起始位置对齐 box-pack:start;

css3 总结02

//横向排列时子元素居中对齐 box-pack:center;

css3 总结02

//横向排列时子元素从结束位置对齐 box-pack:end;

css3 总结02

//横向排列时子元素两端对齐 box-pack:justify;

css3 总结02

//纵向排列时子元素从起始位置对齐 box-pack:start;

css3 总结02

//纵向排列时子元素居中对齐 box-pack:center;

css3 总结02

//纵向排列时子元素从结束位置对齐 box-pack:end;

css3 总结02

//纵向排列时子元素两端对齐 box-pack:justify;

css3 总结02

  • box-align: 设置或检索弹性盒模型对象的子元素的对齐方式。###

//横向排列时子元素从起始位置对齐 box-align:start;

css3 总结02

//横向排列时子元素居中对齐 box-align:center;

css3 总结02

//横向排列时子元素从结束位置对齐 box-align:end;

css3 总结02

//横向排列时子元素基线对齐 box-align:baseline;

css3 总结02

//横向排列时子元素自适应父元素 box-align:stretch;

css3 总结02

//纵向排列时子元素从起始位置对齐 box-align:start;

css3 总结02

//纵向排列时子元素居中对齐 box-align:center;

css3 总结02

//纵向排列时子元素从结束位置对齐 box-align:end;

css3 总结02

//纵向排列时子元素基线对齐 box-align:baseline;

css3 总结02

//纵向排列时子元素自适应父元素 box-align:stretch;

css3 总结02

上一篇:【多线程】死锁与Java栈跟踪工具


下一篇:[HDOJ5439]Aggregated Counting(乱搞)