自己前端的一些笔记

/*
弹性盒（移动端布局）
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);
}