CSS float プロパティ
フローティングを説明するために、実際の例を使用できます。
すべてのコンテナーに float: left を追加します。その後、要素は左から右に配置されます。
すべてのコンテナに float: right を追加すると、要素は右から左に配置されます
フローティング属性の使用
1. 機能: Web ページ内の要素の位置 (ボックスがデフォルトで上下に配置されている場合、水平に変更できます) 2. 属性
: float は xx を float/float にします
3. 属性値: 左、右、なし (デフォルト値、フローティングではありません)
4. フローティングの特性
- フローティングは要素の水平方向の動きのみを制御できます
- フローティングは要素をドキュメント フローから外します。初期位置は存在しません。通常の Web ページ レイアウトの破壊
- フローティングを停止するためのフローティング条件
- 発生 親の格納ボックスがフローティングを停止します
- フローティング属性を持つ前の要素に触れると、フローティングが停止します
- 子要素が親要素よりも幅が広い場合、最後の子要素は
十分なスペースが見つかるまで
下に
移動します神の視点からは見えない文書の流れ
ボックスモデルの構成
ボックス モデルは CSS レイアウトの基礎であり、Web ページ要素の表示方法と要素間の関係を指定します。CSS では、すべての要素がボックスのような形状と平面スペースを持つことができる、つまり、すべての要素に境界線、境界線、パディング、およびコンテンツ領域が含まれていると定義されています. これが標準のボックス モデルです.
マージンプロパティ
2.マージンの使い方
ボーダー: 要素の外側の空白領域であるマージンは、マージンと呼ばれます。属性値は負の数または単語 auto にすることができます. 属性値が auto の場合, デフォルトでは margin-left:auto; と margin-right:auto のみがサポートされます. auto は当面サポートされません.
個別の設定:
margin-left: 左の境界線 margin-right: 右の境界線
margin-top: 上の境界線 margin-bottom: 下の境界線
マージンを短縮する方法は 4 つあります。
4 つの値: 右上、左下 {margin:0px 0px 0px 40px;}
3 つの値: 上、左、右、下 {margin:10px 20px 30px ;}
2 つの値: 上、下、左、右 {margin: 10px 20px ;}
1 つの値: 4 方向のマージン: 2px; /*要素の周囲のパディングを 2px として定義*/
説明: margin: 0 auto; 幅のあるブロック要素ボックスの水平センタリングを実現できます
マージン関連の問題と解決策:
1.マージントップの分析
現象: デフォルトでは、包含構造で、子要素に margin-top を追加した後、親要素が追従します。解決：
A. border-top を追加: 最も近い親要素に透明な 1px の実線; 透明な上部境界線
B. 親要素に overflow:hidden を追加 (overflow hidden)
C\ 親要素または子要素に float を追加する
2.マージンの上下の間隔が重なる問題
現象: 上下に 2 つの並列構造がある場合、上のボックスに margin-bottom を追加し、下のボックスに margin-top を同時に追加すると、このときに解析する必要がある垂直方向の間隔は合計になります。 2 つのうち、ブラウザが解析する場合は、最大値に従って解析されます。
解決策: A. 下のボックスに親要素を追加し、overflow:hidden; の宣言を追加します。
パディング プロパティ
1. パディング（内側の間隔）の使用方法 現在のコンテナに対してギャップが内側にあると分析する場合、パディングが使用されます。
パディング: ページ上の要素のコンテンツと要素の端 (境界線) の間の距離を設定するパディング。フィラーとも呼ばれます。
使用法：
一方向の塗りつぶしは個別に設定できます。個別に設定できます。
上方向 padding-top:10px; 右方向 padding-right:10px;
下方向 padding-bottom:10px; 左方向 padding-left:10px;
パディングを短縮する 4 つの方法:
4 つの値: 右上、左下 {padding:0px 0px 0px 40px;}
3 つの値: 上、左、下 {パディング: 10px 20px 30px ;}
2 つの値: 上、下、左、右 {パディング: 10px 20px ;}
1 つの値: 4 方向のパディング: 2px; /* 要素の周りのパディングを 2px として定義します*/
注: パディング値は要素の元のサイズに追加されます. 要素のサイズを変更しない場合は、要素の幅または高さから追加されたパディング属性値を差し引く必要があります.
ボックスモデルでパディングを使用する方法
1.パディング機能：主に親要素と子要素間の位置距離を設定
2.パディング属性値：値と単位（ピクセル px）
3.パディング設定位置
- 親要素に追加（間隔すべての子要素間は同じです): 現在のボックスの幅と高さを拡張します. 初期レイアウトを破壊しないために, ボックスの幅と高さから対応するパディング値を差し引く必要があります- Add On
sub - レベル要素 (各サブレベル要素の間隔を制御):
4. 内側マージンのパディング属性値の数
- 1 つのパディング属性値: 上、下、左、および右
- 2 つの属性値のパディング: 上, down, left, and right
- padding 3 属性値: top, left, right, bottom
- padding 4 つの属性値: top, right, bottom, left
5. 属性値の方向設定 (時計回り)
- padding-top
- padding- right
- padding-bottom
- padding-left
6. 内側と外側のマージンについて 負の値を設定すると問題がありますか?
- 内側のマージンは許可されません
- 外側のマージンは OK です
境界プロパティ
それを分解して書く：
ボーダー幅: ボーダー幅:
枠の色: 枠の色:
ボーダースタイル: ボーダースタイル: solid (実線)/dashed (点線) dot (点線) double (二重線)
略記:
境界線: 30px 実線の青; パラメータの順序は自由に変更できます
単一ボーダー設定: 上ボーダー border-top: 30px 青の実線; 下ボーダー-下 左ボーダー-左 右ボーダー-右
変な箱モデル
IE box model (weird box model) このモードでは、ブラウザーの width 属性はコンテンツの幅ではなく、コンテンツの幅、パディング、ボーダーの合計、つまり、奇妙なモードのボックス モデルです。 、ボックス (内容) 幅 + 内余白パディング + ボーダー ボーダー幅 = 設定した幅 (高さも同じ)
box-sizing プロパティ
CSS3 はボックス モデル タイプを指定します
box-sizing 属性はボックス モデルのタイプを指定でき、content-box はボックス モデルを W3C (標準ボックス モデル) として指定し、border-box は IE ボックス モデル (奇妙なボックス モデル) を指定します。
box-sizing: content-box;//要素のコンテンツ ボックスにそれぞれ幅と高さが適用されます。幅と高さの外側に要素のパディングと境界線を描画します。
box-sizing: border-box;// 要素に設定された幅と高さによって、要素の境界ボックスが決まります。つまり、要素に指定されたパディングと境界線は、設定された幅と高さの範囲内で描画されます。この解析モードでパディングまたはボーダーを追加しても、ボックスが大きくなりません。