CSS Relative

9.遇到过一个问题就是，当手机端点击input弹出键盘，整个视窗的高度就会变为减去键盘的高度，页面底部样式会乱，当时解决方法是用js获取整个页面高度赋值给body，等于说在不同的设备下写死不同的body高度值，底部就不会乱了
$("body").css("height",parseInt($(".wrap").height())+parseInt($(".icon-main").height()));
10.如果想改变 placeholder里的文字，需要用c伪类
::-webkit-input-placeholder{
color:#ccc
}

一.css制作不同方向的三角形边框

.borderBox {

position: relative;
margin-top: rem(22);
margin-left: rem(20);
width: rem(630);
border: 1px solid #DCD2C5;
border-radius: rem(8);

}

本例是向上三角形边框(其他方向可以通过修改diamond中的 rotate(45deg)值，如（ rotate(135deg)向右等）)

.tipsAngle{

position:absolute;
top:-rem(12);
left: rem(328);
display: block;
width: rem(20);
height: rem(20);
font-size: 0;
background: #F9F5EC;
border-left: 1px solid #DCD2C5;
border-top: 1px solid #DCD2C5;

}

.diamond是用来设置兼容不同浏览器的三角形边框设置，跟tipsAngle样式在一个标签中一起使用
具体使用的html如下：
<div className="borderBox">
  <div className="tipsAngle diamond"></div>
</div>

.diamond{

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(
    M11=0.7071067811865475,
    M12=-0.7071067811865477,
    M21=0.7071067811865477,
    M22=0.7071067811865475,
    SizingMethod='auto expand'
);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform:rotate(45deg);

}

:root .diamond{filter:none\9;}

制作实心三角形：

向上三角形

.arrow-up {

position: absolute;
left: rem(52);
top: -rem(22);
width: 0px;
height: 0px;
border-left: rem(30) solid transparent;
border-right: rem(30) solid transparent;
border-bottom: rem(30) solid #F3EEE3;
font-size: 0px;
line-height: 0px;
}

向下箭头 ，类似

.arrow-down {

width: 0px; 
height: 0px;
border-left: 30px solid transparent; 
border-right: 30px solid transparent; 
border-top: 30px solid blue; 
font-size: 0px;   
line-height: 0px; 
}

div.arrow-left {

width: 0px; 
height: 0px; 
border-bottom: 30px solid transparent;  
border-top: 30px solid transparent; 
border-right: 40px solid green; 
font-size: 0px; 
line-height: 0px;
}

div.arrow-right {

 width: 0px; 
 height: 0px;
 border-top: 30px solid transparent; 
 border-bottom: 30px solid transparent; 
 border-left: 60px solid black; 
font-size: 0px; 
line-height: 0px; 
}

二.css清除浮动

1.父级div定义高度；（不推荐使用，只建议高度固定的布局使用）。
**2.结尾处加空的div标签clear:both; **(添加一个空的div，利用的clear:both清除浮动，让父级自动获取高度)。
3.父级div定义伪类:after和zoom; (推荐使用，建议定义公共类，以减少代码)

clearfloat:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0;
}
clearfloat:{zoom:1;}

4.父级定义overflow:hidden;( 必须定义width或zoom:1,同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度)。
优点：简单、代码少、浏览器支持少；缺点：不能和position配合使用，因为超出部分会被隐藏

5.父级div定义overflow:auto()；（必须定义width或zoom:1,同时不能定义height，使用overflow:auto时，浏览器会自动检查）

6.父级div也一起浮动；（没有优点，会产生新的浮动问题，不推荐使用，只做了解）

7.父级div定义display:table(原理：将div属性变成表格，没有优点，会产生新的未知问题，不推荐使用，只做了解)