divやcssレイアウトの基礎知識の共有

CSS と div はどちらもページ レイアウトと切り離せない言語コードであり、この記事では主に div と css レイアウトの基本的な知識を皆さんに共有します。

1 p+css レイアウト?
キーワード: ボックスの位置
マージン
パディング
フロート
位置
何を学びましたか?本質的には、ボックスを配置する方法を学ぶだけです (p)

2 ボックスモデル?
width:幅
height:高さ
border:ボーダー
margin:外マージン
padding:内マージン
機能:コンテンツを配置する位置を考える

2.1マージン外マージン

ルール:ボーダーマージン パディング:4辺(上、下、左、右)
border-left
border-right
border-top
border-bottom

2.2 マージンの単純なメモ:
本文にはデフォルトのマージンがあります: chrome 8px
上下のボックスのマージンが設定されている場合、2 つのボックス間の距離は大きい方のマージンに基づきます (マージンの縮小)
ボックスは中央に配置されます: margin: 10px auto;

3 パディング内側マージン
機能: ボックス内のコンテンツの配置を調整するために使用されます
注: パディングを設定した後、外側のボックスは全体として拡大されますか?影響: ウェブページ全体のレイアウトに影響します
ボックスの合計幅: 300(幅) + パディング左/右(10+10) + ボーダー左/右(5+5) = 330

4 ブロック-レベル要素とインライン要素
ブロックレベル要素: p h1 p li などは 1 行のみを占める場合に幅と高さを設定できます。
インライン要素: span i a img などは通常 1 行で表示されます。幅と高さは設定できません。
インライン要素をブロックレベル要素に変換します。幅と高さのルールをサポートします。

レイアウト、マージン、パディング、フロート、位置はすべて位置に関連します。ボックスを適切な位置に配置します

5 float float

通常のフロー: 位置決めやフローティングなどの特別な CSS を使用しません。 要素の自然な並べ替えルールであるルールです
Float: 通常のフローの外で、要素は左右に移動できます
float :left
float:right
機能: ボックスの左右のレイアウトを作成します

フローティングによって引き起こされる問題: 次の要素のレイアウトに影響を与える可能性があります
解決策: フローティング要素の後に必ずフロートをクリアしてください

float:左右のレイアウト
margin: ボックス間の距離を調整します
パディング
position: 固定位置機能の配置 - 要素をどこにでも配置できます 位置

6 相対配置
postion: 相対
参照オブジェクト: この配置は誰によるものですか?位置決めが使用される前に、その初期位置
位置を変更するには、オフセットが必要です
左: 100px
noによると、位置決め前の位置は右に100pxオフセットされます

7 絶対位置決め
position:absolute
参考object: 1 親要素は位置決め属性を持っています 2 と位置決め属性を持つ最も近い親が見つかります レベル
オフセット: 左上右下

参照オブジェクトを見つける順序: 位置決めがある場合は、最初に親要素を見つけます。属性 (位置) をオフセットする参照オブジェクトとして使用します。
それが見つからない場合は、位置属性を持つ要素が見つかるまで外側のレイヤーを 1 つずつ検索します。次に、最も外側の HTML
要素をオフセットする参照オブジェクトとして使用します

8 固定位置
参照オブジェクト: ブラウザーの表示領域

9 演習

10. 要素を選択するメソッド id ==> # class ==> . タグセレクター ==> タグ名

10.1 隣接セレクター ==> + 要素の後ろにある隣接要素を選択

10.2 複数要素セレクター ==>、同じ属性を持つ複数の要素があります(多くのコードが繰り返され、抽出して公開することができます)

10.3 子孫セレクター ==> スペース、アプリケーション シナリオ: 条件を満たす子孫要素を選択します

10.4 子要素セレクター ==>gt;、アプリケーションシナリオ: 条件を満たす子要素を選択します

注: 子要素は次のレベルの要素のみを選択できます。 機能: これらはすべて要素を選択するために使用されます。 => 要素 [属性 = 属性値] アプリケーション シナリオ: 特定の属性を選択します。要素

name
name = value

name ^= val

name $= val
は、フィルタリング条件

11、疑似クラス、疑似要素

1 p+css レイアウト

キーワード: ボックスの位置

マージン

パディング

フロート
位置
何を学びましたか?本質的には、ボックスを配置する方法を学ぶだけです (p)

2 ボックスモデル?
width:幅
height:高さ

border:ボーダー

margin:外マージン
padding:内マージン
機能:コンテンツを配置する位置を考える

2.1マージン外マージン

ルール:ボーダーマージンパディング:4辺(上、下、左、右)

ボーダー左

ボーダー右

ボーダー上

ボーダー下

2.2 マージンに関する簡単な注意点:
本文にはデフォルトのマージンがあります: chrome 8px
上下のボックスのマージンが設定されている場合、2 つのボックス間の距離は大きい方のマージンに基づきます (マージンの縮小)
ボックスは中央に配置されます: margin: 10px auto;

3 パディング内側マージン
機能: ボックス内のコンテンツの配置を調整するために使用されます
注: パディングを設定した後、外側のボックスは全体として拡大されますか?影響: ウェブページ全体のレイアウトに影響します
ボックスの合計幅: 300(幅) + パディング左/右(10+10) + ボーダー左/右(5+5) = 330

4 ブロック-レベル要素とインライン要素
ブロックレベル要素: p h1 p li などは 1 行のみを占める場合に幅と高さを設定できます。
インライン要素: span i a img などは通常 1 行で表示されます。幅と高さは設定できません。
インライン要素をブロックレベル要素に変換します。幅と高さのサポート

ルール: p+css レイアウト、マージン、パディング、フロート、位置はすべて位置に関連します。ボックスを適切な位置に配置します

5 float float

通常のフロー: 位置決めやフローティングなどの特別な CSS を使用しません。 要素の自然な並べ替え規則であるルールです
フロート: 通常のフローの外で、要素は左右に移動できます
float:left
float:right
機能: ボックスの左右のレイアウトを作成します

フローティングによって引き起こされる問題: 次の要素のレイアウトに影響を与える可能性があります
解決策: フローティングされた要素の後のフロートを必ずクリアしてください

float: 左右のレイアウト
margin: ボックス間の距離を調整します
パディング
position: 固定位置機能の配置 - 要素をどこにでも配置できます 位置

6 相対配置
postion: 相対
参照オブジェクト: 誰がこれを行ったかによる位置決めを使用する前に、その初期位置
位置を変更するには、オフセットが必要です
左: 100px
いいえによると、位置決め前の位置は右に100pxオフセットされます

7 絶対位置決め
position:absolute
参照オブジェクト: 1 親要素は位置属性 2 を持ち、位置属性を持つ最も近い親が見つかります。 レベル
オフセット: 左上右下

参照オブジェクトを見つける順序: 親要素がある場合は、最初に見つけます。位置決め属性 (position) は、この親要素をオフセットする参照オブジェクトとして使用します。
それが見つからない場合は、position 属性を持つ要素が見つかるまで、外側のレイヤーが 1 つずつ検索されます。要素を追加すると、最も外側の HTML
要素がオフセットする参照オブジェクトとして使用されます

8 固定位置
参照オブジェクト: ブラウザの表示領域

9 演習

10. 要素を選択するメソッド id ==> # class ==> . タグセレクター ==> タグ名

10.1 隣接セレクター ==> + 要素の後ろにある隣接要素を選択

10.2 複数要素セレクター ==>、同じ属性 (多くのコードが繰り返され、抽出して公開することができます)

10.3 子孫セレクター ==> スペース、適用シナリオ: 条件を満たす子孫要素を選択します

10.4 子要素セレクター ==>gt; , アプリケーションシナリオ: 条件を満たす子要素を選択します

注: 子要素は次のレベルの要素のみを選択できます。 機能: これらはすべて 10.5 属性を選択するために使用されます。 selector ==> 要素 [属性 = 属性値] アプリケーション シナリオ: 要素

name
name = value

name ^= val

name $= val
は、フィルタリング条件として理解できます

関連する推奨事項:

CSSの3カラムレイアウト方法6つの例

CSSの使用位置：スティッキーレイアウト例を詳しく解説

CSS Webページのレイアウト例をいくつか

以上がdivやcssレイアウトの基礎知識の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。