html中input和relative,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如下：

.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属性变成表格，没有优点，会产生新的未知问题，不推荐使用，只做了解)