HTML詳細シリアル化(7)
コラムリンクlink
次のコラムで紹介します
このコラムはフロントエンドを独学で学ぶ旅であり、コードは純粋に手作業で作成され、ダークホースコースに従って学習し、私自身の理解をいくつか加え、コードとメモに適切な変更を加えました
。皆さんのお役に立てれば幸いです。同時に、私を監督し、私が書いたコードに提案を与え、お互いに学び合ってください。
始める
構造体擬似クラスセレクター
効果
構造的関係に基づいて要素を検索する
| キーワード | 意味 |
|---|---|
| E:第一子 | 最初の E 要素を見つける |
| E:最後の子 | 最後の E 要素を見つける |
| E:n番目の子（N） | N 番目の要素を検索します (最初の要素の N 値は 1) |
:nth-child（公式）
効果
構造的関係に基づいて複数の要素を検索する
例
偶数 2n
奇数 2n-1、2n+
1 5 の倍数
5n after 5 n+5
before 5-n+5
擬似要素セレクター
効果
装飾コンテンツを配置する仮想要素（擬似要素）を作成
E::before E要素の前に擬似要素を追加
E::after E要素の末尾に擬似要素を追加
知らせ：
content: "" 属性を設定する必要があります。これは、擬似要素のコンテンツを設定するために使用されます。コンテンツがない場合は、引用符を空白のままにすることができます。擬似要素が記述されていない場合、失敗します
。
擬似要素のデフォルトはインライン表示モードで、
重みはラベルセレクタと同じです。
Pxクック
Pixel Chef は、PSD ファイルのテキスト、色、距離の自動インテリジェント認識をサポートするカットアウト デザイン ツール ソフトウェアです
開発パネル (自動インテリジェント認識)
デザイン パネル (サイズと色の手動測定)
## ボックス モデル構成
効果
Web ページをレイアウトし、ボックスとコンテンツを配置します
ボックスモデル - 重要なコンポーネント
コンテンツ領域-幅と高さ
内側マージン-パディング (コンテンツとボックスの端の間に表示されます)
境界線-境界線
外マージン-マージン (ボックスの外側に表示されます)
ボックスモデル - 境界線
属性名
ボーダー(BD)
属性値
境界線の太さと線のスタイルの色 (順序に依存しません)
一般的な線のスタイル
| キーワード | 意味 |
|---|---|
| 固体 | 実線 |
| 破線 | 点線 |
| 点在 | 点線 |
一方向の境界線を設定する
属性名
境界位置名詞 (bd+位置名詞の頭文字)
属性値
境界線の太さ、線のスタイルの色 (順序に依存しません)
ボックスモデル - パディング
効果
コンテンツとボックスの端の間の距離を設定します
属性名
パディング/パディング位置 名詞
ボックスモデル - サイズの計算
デフォルト
ボックスのサイズ = コンテンツのサイズ + 境界線のサイズ + パディングのサイズ
結論は
ボックスに枠線/パディングを追加すると、ボックスが大きくなります
解決
手動減算を実行してボーダー/パディングのサイズを削減します
内部減算モード: box-sizing:border-box
ボックスモデル - マージン
効果
2 つのボックス間の距離
属性名
マージン
クリアのデフォルトスタイル
例
デフォルトの内余白と外余白
ボックスモデル - 要素のオーバーフロー
効果
オーバーフロー要素の内容を制御する同様のメソッド
属性名
オーバーフロー
属性値
| キーワード | 意味 |
|---|---|
| 隠れた | 隠して終了 |
| スクロール | オーバーフロースクロール (オーバーフローの有無に関係なくスクロールバーの位置を表示します) |
| 自動 | オーバーフロースクロール（オーバーフロー発生時のみスクロールバーが表示されます） |
## アウターマージンの問題 - マージ現象
シーン
兄弟要素を垂直に配置すると、上下のマージンがマージされます
現象
2 つのマージンのうち大きい方の値を適用します。
マージン問題 - コラプス問題
シーン
親子ラベルの場合、子の上部マージンを追加すると折りたたまれる問題が発生します。
現象
親も一緒に下に移動します
解決
サブセットのマージンをキャンセルし、親セットのパディング
親セットのオーバーフロー: 非表示の
親セットのボーダートップ
インライン要素 - 内側と外側のマージンの問題
シーン
インライン要素にマージンとパディングを追加しても、要素の垂直位置は変更できません
解決
インライン要素に line-height を追加すると、垂直位置が変更される可能性があります
ボックスモデル - 角が丸い
効果
要素の外側の境界線を丸い角に設定します
属性名
境界半径
属性値
数値+ピクセル/パーセンテージ(最大値は50%)
知らせ
属性値は角の半径です
多値
座ってから時計回りの割り当てと呼ばれ、反対の角度と同じ値を持つ対応する角度はありません
一般的な用途 - 真円形
正方形のボックスの角丸属性値を幅の半分/高さの 50% に設定します。
一般的な用途 - カプセルの形状
長方形のボックスに、ボックスの高さの半分の角の丸いプロパティ値を与えます。
ボックスモデル - シャドウ
効果
要素に影効果を設定する
属性名
ボックスシャドウ
属性値
X オフセット Y オフセット ブラー半径 半径拡大 カラー 内側/外側シャドウ
知らせ：
X 軸オフセットと Y 軸オフセットを記述する必要があります。
デフォルトは外側のシャドウで、内側のシャドウはインセットを追加する必要があります
標準ストリーム
ドキュメント フローとも呼ばれ、ページ内のタグのデフォルトのレイアウト ルールを指します。
例
ブロック要素は 1 行を占め、インライン要素は複数の行を表示できます。
浮く
効果
ブロック要素を水平方向に整列させる
属性名: float
属性値
| キーワード | 意味 |
|---|---|
| 左 | 左揃え |
| 右 | 右揃え |
特徴
インラインブロック表示モードの特性を備えた上揃え
フローティングボックスはラベルから外れます