フロントエンド開発忘れやすいコンテンツ収録

9629 ワード

先端開発

1.スクロールする場合、ある領域を一定の位置に保つには、スクロールバーのスクロールに伴って変化しないように、その領域にposition:fixedを追加するだけです
2.ブロックレベルの領域を自動的に中央に配置する必要がある場合は、その領域の幅を設定してmargin-left:auto,margin-right:autoを追加するだけです.float属性は追加できません.または、この領域をラベルに直接配置します.
注意:html 5ではcenterはサポートされていませんが、主流のブラウザではhtml 4がサポートされています.01は以前の基準と同じであるため、centerは適切なタイミングで使用することができ、同じcenterラベルに置かれている要素のようにfloat属性を追加することはできません.
3.異なるブラウザに対して、cssスタイルは往々にして違いがあり、css hackで処理することができる.

#demo

{   

    background-color:blue;      /*firefox*/

    background-color:red\9;      /*all ie*/

    background-color:yellow\0;    /*ie8*/

    +background-color:pink;        /*ie7*/

    _background-color:orange;       /*ie6*/

}
:root #test { background-color:purple\9; }  /*ie9*/ @media all and (min-width:0px){ #test {background-color:black\0;} }  /*opera*/ @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  /*chrome and safari*/

/*    css hack         css      */
/*           */
/*                    */

#demo

{
　　*background-color:blue; /*ie7、ie6*/
}

4.importantキーワードは優先度が高く、importantキーワードはほとんどのブラウザでサポートされている(ie 6も一部サポートされている)ため、インタフェースの設計過程で適切に使用することができます.importantは多くの面倒を省くことができます.
5.一部のブラウザでは、デフォルトでフォーム全体にスクロールバーが追加されています.例えばie 7では、スクロールバーを削除するには、スクロールバーを追加するだけです.

html, body {

    overflow: hidden;/*        */

}

6.divを幅に固定したい場合は、ブラウザによって高さが自動的に変化し、設定できます.

.div

{

    width: 120px; 

    height: 100%; /*      */

    position: absolute;/*       */

}

7.文字を長くして省略記号を表示させたい

.testTD

{

    float:left;/*       ;    td     */

    width:300px;

    /*            .          */  

    overflow:hidden;

    text-overflow:ellipsis;       

}

8.テキストの折り返し

p

{

    word-break:    break-all; //              

    /*normal                 。

    break-all            。

    keep-all                   。

    word-break           ，          word-break  

    */

}

文字を改行しないように強制するにはwhite-space:nowrapを追加する必要があります.
white-spaceの他の属性値、
pre:空白はブラウザに保持されます.その動作はHTMLの

タグに似ています.
pre-wrap:空白文字シーケンスは保持されますが、通常は改行されます.
pre-line:空白のシーケンスをマージしますが、改行は保持されます.
9.制限テキストボックス(input type=“text”)整数のみ入力可能
スタイルの追加input

{

    ime-mode:disabled;/*       */

}
  
inputにイベントをバインドする<input type="text" onkeypress="return event.keyCode>=48&&event.keyCode<=57" onpaste="return !clipboardData.getData('text').match(/\D/)"/>
  
ここでonkeypressは制限入力であり、onpasteは不正なデータの貼り付けを制限しているが、IEでしか使用できないので、他のブラウザは代替イベントを探したほうがいい.
10.エレメントスタイルの過度な変化効果を設定するには、transitionプロパティを設定します.
値
説明
transition-property  
遷移効果を設定するCSS属性の名前を指定します.
transition-duration  
移行効果を完了するのに何秒またはミリ秒かかるかを指定します.
transition-timing-function  
速度効果を規定する速度曲線.
transition-delay  
トランジション効果がいつ開始されるかを定義します.
11.ie 8および以前のバージョンでopacityがサポートされていない場合は、cssを使用します.filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30)\0;
  
多くのブラウザで現在サポートされているのは、次のとおりです.opacity:0.3;

【LeetCode】345. 反転文字列の母音文字(Reverse Vowels of a String)

Ergetソース分析(2):グローバルハッシュベースクラスとグローバル非同期関数オブジェクトインタフェース