html css零碎収集...
3707 ワード
border大法無敵
1.文字を超えた場合の表示方法...
2.white-space:pre//は入力中のスペースを保持し、複数のスペースを入力しても1つのスペースに変換されません.
3.checkboxとradioのデフォルト入力ボックスを削除する方法
4.outline:0 button選択時の枠線をクリア
5.マウスを動かすと大きな機能を実現し、transitionとtransform:scale(2,2)/2倍に拡大
6.border-collpase;//表を単一の枠線に変更
7.box-shadow: 5px 5px 5px #ccc;//数字はx軸オフセット、y軸オフセット、シャドウブラー、色をそれぞれ表します
8.background関連background-attachment:fixed;//スクロールバーに従ってbackground-size:cover;//バックグラウンド領域を完全に上書きbackground-size:contain;//背景領域に合わせる
9.cursor: pointer;//マウスのスタイルを変更するにはcursorを参照してください.
10.box-shadow: 0 0 10px 5px black inset;//最初の2つはxy軸のオフセット量を表し、0に設定すると四辺にシャドウがあり、3番目の値はシャドウのブラー距離を指し、4番目の値はブラーサイズを指し、inset値のシャドウは箱の内部に発生します.
11.paddiing上下距離を値に設定すると、垂直中央transform:translate(-50%、-50%)を実現できます.垂直方向中央(アダプティブ)の実装例:垂直方向中央
12.擬似要素は垂直中央を実現する.xxx:before { content:'' display: inline-block; width: 0; height: 100%; vertical-align: middle; } .中央に配置する要素{display:inline-block;vertical-align:center;}
13.widthとmax-widthの違い:width:500 px;//ブラウザが500 px未満に縮小すると、スクロールバーmax-width:500 pxが表示されます.//ブラウザが500 px未満に縮小するとスクロールバーは表示されません
14.inline-blockのスリットの問題については、親要素font-sizeを0に設定し、子要素font-sizeを設定することでギャップを解消
15.bラベルとstrongラベルの違いは、実現の効果的には同じであるが、bラベルはboldを太くするだけで他の意味はないが、strongラベルは強調に重点を置き、strongに下線にスタイルを変えて内容を強調することができる.
16.font-weight:700と同じfont-weight:bold;
17.フルスクリーンbodyをどのように実現するか、htmlはheight:100%を設定し、フルスクリーンが必要な要素に100%を設定する.
18.hoverプロパティを使用してフォントアイコンを表示する場合は、擬似要素ではなくエンティティラベルを使用して置き換えます.
19.border-radiusが無効な場合、サブエレメントのバックグラウンドがフィレットを覆っている可能性があります.この場合、親エレメントにoverflow:hiddenを付けると解決できます.
20.transition属性によるグラデーション効果:1.初期状態を設定するには、background-color:#FFF;2.transitionの設定:background-color 0.5 s ease 0.2 s;//変更する属性を左から右に順に数秒後に目標値に到達(easeはスロー開始を規定し、その後速くなり、その後スロー終了の遷移効果)0.2 s遅延して実行する.ターゲット属性値をdiv:hover{background-color:#666}linearが同じ速度で開始から終了までの遷移効果(cubic-bezier(0,0,1,1)に等しい)に設定します.easeは、低速開始、その後速くなり、その後、低速終了の遷移効果(cubic−bezier(0.25,0.1,0.25,0.25,1))を規定する.ease−inは、遅い速度で開始される遷移効果(cubic−bezier(0.42,0,1,1)に等しい)を規定する.ease−outは、遅い速度で終了する遷移効果(cubic−bezier(0,0,0.58,1)に等しい)を規定する.ease−in−outは、遅い速度で開始および終了する遷移効果(cubic−bezier(0.42,0,0.58,1)に等しい)を規定する.Cubic-bezier(n,n,n,n)は、cubic-bezier関数で独自の値を定義します.可能な値は0～1です.
21.z-index:-1;1つのレイヤをすべてのレイヤの下でバックグラウンドにする
22.text-alignとfloatは衝突しない
23.opacityを透明度として使用すると、サブ要素もopacityを継承します.解決方法:rgbaを使用します.
24.h 1ラベルの太さをfont-weight:normalに除去する.noneか0//ではなく両方とも無効です
25.aラベルのデフォルト色color:inherit;解決できる
26.rgbaとopacityの違いについて:前者は背景色のみを設定し、ブロックに内容が含まれている場合、内容は透明ではありませんが、opacityは子孫要素に継承でき、子孫も透明になります.
27.user-select: none;ユーザーはテキストを選択できません
28.loading効果
29.flexと絶対位置決めの4つの方向を0に設定し、通常は垂直中央のdialogに使用します.
30.フォームのautofoucusはオートフォーカスを表す
31.いくつかの要求に関するMethod(1)get'/users'あるユーザのデータを取得する(2)get'/users/id'あるユーザのidを取得する(3)post'/users'新規データを取得する(4)patch/put'/users/id'あるユーザのデータを更新する(5)delete'/users'あるユーザのデータを削除する
31.~の使い方w 3 School
32.css往復アニメーションalternate
33.cc:ie互換性browserhacksを解決するためのie
擬似要素擬似クラス大全flexレイアウト
34.osi 7層モデルは、アプリケーション層表現層セッション層伝送層ネットワーク層データリンク層物理層
1.文字を超えた場合の表示方法...
white-space: nowrap; //
overflow: hidden; //
text-overflow: ellipsis; //
2.white-space:pre//は入力中のスペースを保持し、複数のスペースを入力しても1つのスペースに変換されません.
3.checkboxとradioのデフォルト入力ボックスを削除する方法
visibility: hidden;
4.outline:0 button選択時の枠線をクリア
5.マウスを動かすと大きな機能を実現し、transitionとtransform:scale(2,2)/2倍に拡大
6.border-collpase;//表を単一の枠線に変更
7.box-shadow: 5px 5px 5px #ccc;//数字はx軸オフセット、y軸オフセット、シャドウブラー、色をそれぞれ表します
8.background関連background-attachment:fixed;//スクロールバーに従ってbackground-size:cover;//バックグラウンド領域を完全に上書きbackground-size:contain;//背景領域に合わせる
9.cursor: pointer;//マウスのスタイルを変更するにはcursorを参照してください.
10.box-shadow: 0 0 10px 5px black inset;//最初の2つはxy軸のオフセット量を表し、0に設定すると四辺にシャドウがあり、3番目の値はシャドウのブラー距離を指し、4番目の値はブラーサイズを指し、inset値のシャドウは箱の内部に発生します.
11.paddiing上下距離を値に設定すると、垂直中央transform:translate(-50%、-50%)を実現できます.垂直方向中央(アダプティブ)の実装例:垂直方向中央
12.擬似要素は垂直中央を実現する.xxx:before { content:'' display: inline-block; width: 0; height: 100%; vertical-align: middle; } .中央に配置する要素{display:inline-block;vertical-align:center;}
13.widthとmax-widthの違い:width:500 px;//ブラウザが500 px未満に縮小すると、スクロールバーmax-width:500 pxが表示されます.//ブラウザが500 px未満に縮小するとスクロールバーは表示されません
14.inline-blockのスリットの問題については、親要素font-sizeを0に設定し、子要素font-sizeを設定することでギャップを解消
15.bラベルとstrongラベルの違いは、実現の効果的には同じであるが、bラベルはboldを太くするだけで他の意味はないが、strongラベルは強調に重点を置き、strongに下線にスタイルを変えて内容を強調することができる.
16.font-weight:700と同じfont-weight:bold;
17.フルスクリーンbodyをどのように実現するか、htmlはheight:100%を設定し、フルスクリーンが必要な要素に100%を設定する.
18.hoverプロパティを使用してフォントアイコンを表示する場合は、擬似要素ではなくエンティティラベルを使用して置き換えます.
19.border-radiusが無効な場合、サブエレメントのバックグラウンドがフィレットを覆っている可能性があります.この場合、親エレメントにoverflow:hiddenを付けると解決できます.
20.transition属性によるグラデーション効果:1.初期状態を設定するには、background-color:#FFF;2.transitionの設定:background-color 0.5 s ease 0.2 s;//変更する属性を左から右に順に数秒後に目標値に到達(easeはスロー開始を規定し、その後速くなり、その後スロー終了の遷移効果)0.2 s遅延して実行する.ターゲット属性値をdiv:hover{background-color:#666}linearが同じ速度で開始から終了までの遷移効果(cubic-bezier(0,0,1,1)に等しい)に設定します.easeは、低速開始、その後速くなり、その後、低速終了の遷移効果(cubic−bezier(0.25,0.1,0.25,0.25,1))を規定する.ease−inは、遅い速度で開始される遷移効果(cubic−bezier(0.42,0,1,1)に等しい)を規定する.ease−outは、遅い速度で終了する遷移効果(cubic−bezier(0,0,0.58,1)に等しい)を規定する.ease−in−outは、遅い速度で開始および終了する遷移効果(cubic−bezier(0.42,0,0.58,1)に等しい)を規定する.Cubic-bezier(n,n,n,n)は、cubic-bezier関数で独自の値を定義します.可能な値は0～1です.
21.z-index:-1;1つのレイヤをすべてのレイヤの下でバックグラウンドにする
22.text-alignとfloatは衝突しない
23.opacityを透明度として使用すると、サブ要素もopacityを継承します.解決方法:rgbaを使用します.
24.h 1ラベルの太さをfont-weight:normalに除去する.noneか0//ではなく両方とも無効です
25.aラベルのデフォルト色color:inherit;解決できる
26.rgbaとopacityの違いについて:前者は背景色のみを設定し、ブロックに内容が含まれている場合、内容は透明ではありませんが、opacityは子孫要素に継承でき、子孫も透明になります.
27.user-select: none;ユーザーはテキストを選択できません
28.loading効果
.xxx {
width: 100px;
height: 100px;
border: 20px solid green;
border-radius: 50%;
border-top: 20px solid red;
animation: 1s infinite linear round ;
}
@keyframes round {
from{
transform: rotate(0)
}
to{
transform: rotate(360deg)
}
}
29.flexと絶対位置決めの4つの方向を0に設定し、通常は垂直中央のdialogに使用します.
.xxx {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
30.フォームのautofoucusはオートフォーカスを表す
31.いくつかの要求に関するMethod(1)get'/users'あるユーザのデータを取得する(2)get'/users/id'あるユーザのidを取得する(3)post'/users'新規データを取得する(4)patch/put'/users/id'あるユーザのデータを更新する(5)delete'/users'あるユーザのデータを削除する
31.~の使い方w 3 School
32.css往復アニメーションalternate
33.cc:ie互換性browserhacksを解決するためのie
擬似要素擬似クラス大全flexレイアウト
34.osi 7層モデルは、アプリケーション層表現層セッション層伝送層ネットワーク層データリンク層物理層