/*
弹性盒（移动端布局）
1.父元素的属性
display: flex; 我是一个弹性盒 子元素水平排列
flex-direction: column; 子元素垂直排列
justify-content: center; 子元素水平对齐方式
align-items: center; 子元素垂直对齐方式
2.子元素的属性
flex-grow: number;
解决margin-top问题：(第一个块级子元素)
1.父元素加overflow:hidden;
2.父元素加border:1px solid transparent;
3.父元素或者子元素浮动
4.父元素加padding-top:1px;
3）伪类选择器
:link 点击之前
:visited 点击之后
:hover 鼠标悬停
:active 按下
浮动
float:left|right|none(默认值);
浮动后在网页中不占据位置，排除到文档流以外
浮动以后是碰到父元素的边框或者浮动元素的边框就会停止
浮动不会重叠
浮动没有上下浮动
效果：块级元素在同一行显示
元素浮动以后都会转换为跨级元素
清除浮动
1.受影响的元素加clear:left|right|both;
2.浮动元素的父元素加overflow:hidden;
3.浮动元素的后面加空div clear:both;
4.伪对象法
浮动元素的父元素:after{
content: "";
display: block;
clear: both;
}
5.浮动元素的父元素设置高度（父元素高度已知）
定位 position 元素定位
1.static 默认值 静态定位
2.relative 相对定位
相对于自己原位置定位，定位后原位置保留
配合top，bottom，left，right使用
3.absolute 绝对定位
相对于已经定位的父元素定位，如果父元素没有定位，
逐级往上找，最后相对于body定位
定位后原位置不保留
配合top，bottom，left，right使用
建议：给绝对定位的父元素加一个相对定位
4.固定定位 fixed
相对于浏览器窗口定位，定位后原位置不保留
配合top，bottom，left，right使用
5.z-index:number; 堆叠顺序
取值越大越往上
可以取负值,不建议取负值
必须配合position使用
居中问题
1.内容水平居中
text-align:center;
2.一行文字垂直居中
line-height=height
3.盒子水平居中
div{
width:200px;
margin:0 auto;
}
4.子元素在父元素中水平垂直居中
<div class="parent">
<div class="child"></div>
</div>
1)弹性盒法
.parent{
width: 500px;
height: 500px;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
.child{
width: 200px;
height: 200px;
background-color: pink;
}
2）表格法
.parent{
width: 500px;
height: 500px;
background-color: red;
display: table-cell;
vertical-align: middle;
}
.child{
width: 200px;
height: 200px;
background-color: pink;
margin: 0 auto;
}
3)绝对定位法（常用）
.parent{
width: 500px;
height: 500px;
background-color: red;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
csshack
说明：在标准模式中
“-″减号是IE6专有的hack(注意)
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
模板的使用顺序: json数据,定义模板,调用模板,返回html
这个是根据数值范围,求出所有数字
var size = '40-45';
var sizeArr = size.split('-');
for( var i = sizeArr[0]; i<= sizeArr[1] ; i ++ ){
console.log(i);
}