(第2回) CSSのいくつかの基本を見てください.

このポストでは、CSSのいくつかの基本を要約します.
この部分はカバーされます:

CSSボックスモデル

メディア質問

CSSアニメーションとキーフレーム

ボックスモデル
CSSでは、すべてのHTML要素が箱です.CSSは、これらのボックスのサイズ、位置、およびプロパティ(色、背景、境界線サイズなど)を決定します.
これは、次の画像を理解することができます.

すべてのボックスは、4つのパーツ(または領域)で構成され、それぞれのエッジで定義されます.コンテンツエッジ、パディングエッジ、ボーダーエッジ、およびマージンエッジ.

パディング-コンテンツの周りの領域をクリアします.パディングは透明です.

マージン-境界線の外側の領域をクリアします.マージンも透明です.

位置決め

通常、新しい行から始まるブロック要素.例:見出し、段落、divsなど.

インライン要素-周囲の要素を持つ要素です.例えば、画像、スパンなど.

上で挙げたように、型ごとの要素のデフォルトレイアウトは、ドキュメントの通常の流れと呼ばれます
我々はposition 通常のフローをオーバーライドするCSSのプロパティ.
CSSのオフセットのプロパティ(左、右、上、下)とのペアは、要素を離れてどのように多くのピクセル(または他の単位)を設定するには、通常の流れにある場所から配置する必要があります.
次の値を受け取ります.

position:relative

position:absolute

position:fixed

Read More about positioning.

ボーダー
次のプロパティは、要素への境界線を提供するために使用されます.

border-weight - ボーダーの厚さ

border-style - ソリッド、ドット、ダブル、グローブなど.

border-color - 色を提供するか、デフォルトの黒が適用されます.
そして、あなたはborder Shortプロパティを使用して、以下のようにすべての値を直接設定します.

.class{
    width:100px;
    height:100px;
    border:10px solid #FA1298;
}

チップ
セットbox-sizing to border-box , これはスタイリングを容易にします.

Quoting from MDN
border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

メディア質問
彼らはあなたのサイトを別の画面サイズに敏感にするのに役立ちます.
@ mediaは、一つ以上のメディア質問の結果に基づいてスタイルシートの一部を適用するのに用いられることができます.これにより、メディアクエリがコンテンツが使用されているデバイスに一致する場合のみ、メディアクエリとCSSブロックを指定してドキュメントに適用されます.

(Think it like an if-statement, where the conditions are based on viewport sizes.)

例:

@media screen and (min-width: 900px) {
  div {
    width:100px;
  }
}

More Details Here.

CSSアニメーションとキーフレーム
要素をアニメーション化するには、Animation スタイリングのプロパティ.
アニメーションの実際の外観は@によって定義されますkeyframe ルール.

animation-name keyframe規則の名前を与えます.animation-iteraton-count - 用途infinite エンドレスアニメーション.

animation-timing-function
これはlinear , ease , cubic-bezier() など
Read More about all possible values here.

例:

接続したいですか?
Connect with me here.