CSS Relative

9.一つの問題は、携帯電話の端点がinputをクリックしてキーボードを弾き出すと、ウィンドウ全体の高さがキーボードの高さを差し引くようになり、ページの下部のスタイルが乱れ、jsでページ全体の高さを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属性を表にする利点がなく、新しい未知の問題が発生し、使用を推奨せず、理解するだけ)