ホームページ > 記事 > ウェブフロントエンド > css02
1. ボックスモデル: ボックスモデル、① オブジェクトの実際の幅 = 左右の外側マージン + 左右の境界線 + 左右の内側マージン + 幅 ② オブジェクトの実際の高さ = 上下の外側マージン +上下の境界線 + 上下の内側の余白 + 高さ
2. マージン: マージン: 値: ①上(上) 右(右) 下(下) 左(左); ②値: 4方向で同じ; ③上/下(上/下) 左/右(左) /right): 上下に一貫性、左右に一貫性; ④auto: 左右の水平中央、上下は無効 (前提条件は幅を設定することです);
3. マージンの結合: 2 つの垂直マージンが結合して 1 つのマージンを形成し、値が大きい方がメインになります。4. マージン オーバーフロー: 親子要素。子要素の上下のマージンを設定します。これは親要素に影響します (親要素には境界線がなく、最初の子要素が設定されるときに発生します)。解決策: ① 親要素の上下の境界線を設定します。 ② 子要素の外側の余白を置き換えるために親要素の内側の余白を設定します。 ③ 空のテーブルを最初の子要素として親要素に追加します。
5. パディング: パディング: 値: ①上 (上) 右 (右) 下 (下) 左 (左); ② 値: 4 つの方向で同じ; ③ 上/下 (上/下) 左/右 (左) /right): 上下の一貫性、左右の一貫性 * インライン要素のパディングは他の要素に影響しません。6. 背景: ①背景色: 背景色; ②背景画像: 背景画像: URL (相対パス); ③背景タイル: 背景-繰り返し: デフォルト、水平方向と垂直方向の両方にタイルします。タイリングなし; c、リピート-x: 水平タイリング; d、リピート-y: 垂直タイリング; ④ 背景サイズ: 背景サイズ: 値/パーセンテージ; b、カバー: 背景画像を完全に拡大します。 : 背景画像は片側に拡大されます。 ⑤ 背景固定: 背景添付: a. スクロール: 固定、背景はスクロール バーによって変更されません。位置: x (値は正の右オフセット/水平キーワード) y (値は正の下方向オフセット/垂直キーワード) ⑦スプライト図: 必要な画像をスプライト図の左上隅に移動します。 ⑧背景合成: 背景: カラー url() 添付ファイルを繰り返します。位置;
7. グラデーション: ① 線形グラデーション: 背景画像: 線形グラデーション (角度 (方向、キーワードまたは角度)、カラーポイント 1 (色、色の位置の変更)、カラーポイント 2...); ② 放射状グラデーション: 背景-image:radial-gradient ([位置のサイズ](円の中心位置の半径)、color-point1(色の位置/比率)、color-point2...) ③繰り返し線形グラデーション:background-image:repeat-linear -gradient (angle, color-point); * color-point: 位置は相対 % ではなく、絶対値 (px) である必要があります。
8. バージョンの互換性: 値の勾配関数の前に互換性のあるプレフィックスを追加します。 ①Firefox: Firefox、-webkit-; ③Opera: Open、-o-;