それを単純化するだけで、BB方法。はい、兄。
フロントエンド開発のCSSが不可欠の基本的なスキルである、です。あなたは場合に、道、これで初めてで、CSSまあと言うかもしれません。私はあなたが話している内容を正確に把握するために、あなたは我々が深くかかわっていないため、CSSが、非常に単純であると考えることができますので。
非常に簡単なコード（実際には非常に単純な）で見てみましょう：
<！DOCTYPE HTML > < HTML LANG = "EN" > < 頭> < メタ文字コード= "UTF-8" > < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > < タイトル>ドキュメント</ タイトル> < スタイル> * { パディング：0 ; マージン：0 ; } 体、 高さ：100％; 幅：100％; } .btn { 表示：インラインブロック。 マージン：100ピクセル; パディング：計6Pxに16px ; 国境：1pxの固体＃446d88 。 背景：＃58A線形勾配（＃77a0bb、＃58A） 。 国境半径：4PX 。 ボックスシャドウ：0 1ピクセル5pxのグレー。 色：白; テキストの影：0 -1px 1pxの＃335166 ; フォントサイズ：20ピクセル; 行の高さ：30px ; } </ スタイル> </ ヘッド> < 身体> < divのクラス= "BTN" > YDB！ </ DIV > </ ボディ> </ HTML >
ここでは、単にブラウザのちょっと素敵で実行して、簡単なボタンのスタイルを記述します。
しかし、しかし、あなたは何が（私と一緒にレイアウトの問題を引っ張らないでください）があると感じていない任意の質問をします。
はい問題であり、私たちは間違っていたが、メンテナンスの問題がありません。
1.私たちは、あまりにも多くの絶対値を使用します（あなたは簡単に絶対値を制御することができますが、それはまた、あなたが簡単に新しいスタイルを実現するために多くのコードを変更できるようにすることができます）
2.一部回相互依存の値は、我々は、（例えば、行の高さなどのメンテナンスの量を低減した後、コードなど）をコードで表現さの関係を取るべきです
のは、2番目の質問を見てみましょう、我々は、例えば、フォントサイズや行の高さをカウントする独自のを信じていない、行の高さの一定割合が1.5倍のフォントサイズです。我々は今、それを修正するよう：
ただ、フォントサイズ、行の高さを変更するには、このような変更の後、それはそれらの間のこの関係を維持します。
私たちは、最初の問題を見て、私たちはこの問題の出現のためにあまりにも多くの絶対的な前提条件を使用するには、私たちの後ろ我々は、ボタンのスタイルを変更すると仮定することです。
あまりにも多くの絶対時間を使用して、我々はボタンのスタイルを変更したら、それは多くのコードを変更します、我々は統一スタイルの変更を取得するための非常に少ない風ボタンを作ることができる限り、コードを変更するにはどのような方法があります。
私たちは、モバイル側を行う際にここで、私は適応を行うには、そのような事を使用したことがありません。それは、私はこの必要性は、それを説明できないと思うものを、ととしてレムレムです。はい、あなたは私たちの主人公は、（実際にはレムも自分のを見ることができる）、EMに従っている、間違っていないです。私はそれを言うまでも持っているもののem。私たちが代わりにEMを使用しての、彼らの前に使用するボタンのスタイルの絶対値を置く場所を考えてみて、その後、我々は単に親要素のフォントサイズを変更する（もちろん、完全に実際の状況を見ては、交換することがないかもしれません）、スタイルの統一を達成することができません事を変えます。次のようにまあ、私たちは、コードを変更します。
HTML { 高さ：100％ 。 幅：100％ ; フォントサイズ：18px ; } .btn { 表示：インラインブロック。 マージン：100ピクセル ; パディング：0.3em 0.89em ; 国境：1pxの固体＃446d88。 背景：＃58A線形勾配（＃77a0bb、＃58A） 。 国境半径：0.22em ; 箱シャドウ：0 1ピクセル5pxのグレー。 色：白 ; テキストの影：0 -1px 1pxの＃335166 ; フォントサイズ：1.11em ; 行の高さ：1.5 ; }
今、私たちは、修正、もちろん、あなたが効果スタイルで、我々はもともと、定義された少し異なる提示していることがわかります。はい、私はそれを認める、私はあなたが希望する場合、主に使用EMを見るために、いくつかは無限小数ではなく、大きな問題となっている大手、考慮に利便性の面で時間値を取ることなく、一瞬の色拍車を見ますこれはあなたが今、始まる標準スタイルとして持つことができます。
今、聞かせてのは、その結果を見て：
まあ、今は結果を見て、その後、親要素のフォントサイズを40ピクセルに変更します。
Zeyangは、全体的なスタイルは変更されず、そして我々は変化を達成するために、コードの最低額を費やしました。
もちろん、あなたにああ、この非常に独特なニーズを冷笑するために誰かがあるでしょう。それは奇妙ですが、私はTucaoに、この需要はないですが、ポイントを説明するために、CSSはあなたの将来のメンテナンスが非常に良好であるように、可能な限りそのDRYても大きな問題です。あなたは、CSSを終了すると、それは良いメンテナンスであれば、あなたは見ることができますか？彼らはどのように見えるか、それらの間の関係は？
進捗状況のビルド、に、さんが拡大しましょう。私たちは、このスタイルは、私たちはこのように書くために最も簡単であることをすべて知っている、赤いボタンと緑のボタンで書かれたベース。
しかし、結果は？
私たちは知っている
赤い部分の問題を。我々は変更する必要があるので、あなたはいつも、直線勾配生成された背景画像を見るように設定CSSの背景には、背景画像は、背景色の上部に常にあります。
次のように改正：
結果を見てください：
その他の問題は、右ではありませんが、このようになってどのように私たちの最初のボタン（説明なし、決意自体ハッハッハ）。
実際には、あなたは、メインカラーは、書かれている＃58aと、光沢のあるボタンや暗い面（すなわち、網掛けの設定）、あるボタンの元の定義のスタイルで私たちを見つけるように拡張の背面に他のボタンのみ明暗バージョンに対応する他の主色を導入するために上記の行を変更する必要があります。
今、私たちは変更を行う、私たちはどのような作品を参照するために、body要素の背景が黒で変更します。
何もありません影非常に奇妙な発見されましたか？はい、でもフォントは非常に奇妙な影。慎重に白い背景にスタイルを比較してください。ていないこのように、私たちは、UIがどのような場合には、全体的なパフォーマンスを持っている必要があります。私たちの原因は境界線の色、影の箱の色、テキストの影の色のみが使用されている固定値は、これが理由でこれを行うことはできませんですので、実際に、私は、あなたが見つけることはありません知っています。あなたが代わりの黒い考えることができるように、我々は、それらの3が淡色表示されていることがわかりました。私たちは（、どんな状況の色である）統一表示を実現したいがあり、透明性が異なるコンテキストで使用されるべきです。
次のように改正：
結果を見てください
私は最初の図につながる、黒の背景に、チャートに簡単だったことを説明したいことの一つが明らかにされていません（実際には、少し、少しのように黒い背景の場合は）、実際には、より良い他の背景色に置き換えます。
、我々はもう少し理解して：
二つのボタンの境界を詳しく見るには、メインカラーである何色のような主要な色、との関係ではありません、我々は境界線の透明度を設定する必要があるため、境界線の色は、何色（それだけにその近くを言うことができる）であります。
しかし、ああ、透明感がなく、ここでは境界線を設定するには、なぜこのような背景の境界線に行くには、以下の行き、その後、透明ディスプレイは、カラーの外枠を一体化しますか？おめでとうの理由は、あなたが言ったようにということです。
私たちは、少し誇張になりまし回します：
何が見えない（バックグラウンドの侵入を忘れてはいけない、することができ、背景色、背景画像であってもよいし、ここでは、アイコンの背景である、勾配が背景画像を表示する方法であることは）私たちは、バックグラウンド侵略だと思うと同じです。
だから我々は国境の変化に伴い、メインの色の変更に到達することができます。
細かいことを、我々は、少なくともここでこのように、このようにする必要があります。しかし、時には我々はこの子を望んでいない、Iフレームは、それが必要な本来の風味で、侵略することはできません。
もちろん、解決することができ、我々は（つまり、侵入がします）、私達はちょうどパディングボックス、ブラウザはパディングを使用するこの方法を設定し、境界ボックスである、上述した背景クリッププロパティのデフォルトの動作を調整することができます（侵入ではない）背景の外縁遮断します。
コードを見てください：
結果を見てください：
この時間は、境界線の本来の風味です。非常に美しいです。