記事のディレクトリ
CSSボックスモデル
1.コンテンツサイズ
-
通常の状況では、要素の幅/高さを設定し、コンテンツボックスのサイズを指定します
-
コンテンツオーバーフロー：コンテンツが要素のサイズ範囲を超えています。これはオーバーフローと呼ばれます。オーバーフロー部分はデフォルトで引き続き表示されます。オーバーフローを使用してオーバーフロー部分の表示を調整できます。値は次のとおりです。
値 効果 見える デフォルト値であるオーバーフロー部分が表示されます 隠された オーバーフロー部分が非表示 スクロール スクロールバーを強制的に水平および垂直に追加する 自動 オーバーフロー方向に使用可能なスクロールバーを自動的に追加します
2.ボーダー
1.ボーダーの実現
文法：
border:width style color;
ボーダースタイルが必要で、次のように分けられます。
| スタイル値 | 意味 |
|---|---|
| 固体 | しっかりとした境界線 |
| 点在 | 点線の境界線 |
| 破線 | 点線の境界線 |
| ダブル | 二重線の境界線 |
2.シングルボーダー設定
それぞれ特定の方向に境界線を設定します。値：幅スタイルの色。
| 属性 | 効果 |
|---|---|
| ボーダートップ | トップボーダーを設定する |
| ボーダーボトム | 下の境界線を設定します |
| ボーダー左 | 左ボーダーを設定 |
| ボーダー右 | 右の境界線を設定する |
3.ウェブページの三角マークの作成
- 要素の幅と高さを0に設定します
- 4方向に均一に透明な境界線を設定します
- 境界線の表示色を特定の方向に調整します
4.丸みを帯びた境界線
- 属性：border-radiusはコーナー半径を指定します
- 値：ピクセル値またはパーセンテージ
- 価値ルール：
一个值 表示统一设置上右下左
四个值 表示分别设置上右下左
两个值 表示分别设置上下 左右
三个值 表示分别设置上右下，左右保持一致
3.パディング
[1]属性：パディング
[2]機能：要素のコンテンツフレームと境界線の間の距離を調整します
[3]値：
20px; 一个值表示统一设置上右下左
20px 30px; 两个值表示分别设置(上下) (左右)
20px 30px 40px; 三个值表示分别设置上右下，左右保持一致
20px 30px 40px 50px; 表示分别设置上右下左
- 一方向のパディングは、次の1つの値のみを取ることができます。
padding-top
padding-right
padding-bottom
padding-left
4.マージン
[1]属性：マージン
[2]機能：要素間の距離を調整します
[3]特別：
1）マージン：0;デフォルトのマージンをキャンセルします;
2）マージン：0自動;左右の自動マージン、親要素の範囲内で要素の水平方向の
中央揃えを実現します; 3）マージン：-10px ;要素の位置の微調整
[4]一方向の外側マージン：1つの値のみを取る
margin-top
margin-right
margin-bottom
margin-left
-
マージンマージ：
1）垂直方向
1.子要素のmargin-topが親要素に作用します。
解決策：親要素に
上部の境界線を追加する
か、親要素にpadding-top：0.1pxを
設定します。2。設定します。同時に要素間の垂直方向の外側のマージン、そして最終的に大きな値を取ります
2）水平方向
ブロック要素はボックスモデル関連の属性（幅、高さ、パディング、境界線、マージン）を完全にサポートします。
インライン要素はサポートします。ボックスモデル関連の属性を完全にはサポートしておらず、幅はサポートされていません/高さ、上下の余白はサポートされていません
。行の要素の水平方向の余白は重ねて表示されます。 -
デフォルトのマージンを持つ要素：
body,h1,h2,h3,h4,h5,h6,p,ul,ol{ margin:0; padding:0; list-style:none; }
レイアウト
1.標準ストリーム/静的ストリーム
デフォルトのレイアウトは、コードの記述順序とラベルタイプに従って、上から下、左から右の順に表示されます。
2.フローティングレイアウト
主にブロック要素の水平配置を設定するために使用されます
【1】プロパティ
float
【2】価値
左または右に移動できます。要素を左または右にフロートするように設定します
float:left/right;
[3]機能
- 要素設定フロートは元の位置から脱出し、他の要素の端に左または右にドッキングされ、ドキュメント内の場所を占有しなくなります
- 要素がフロートに設定されている場合、それはブロック要素の特性を持ち、幅と高さは手動で調整できます
- 「テキストラップ」：フローティング要素は通常の要素の位置を覆い隠し、通常のコンテンツの表示を覆い隠すことはできません。コンテンツはフローティング要素の周囲に表示されます。
[4]よくある質問
すべての子要素がfloatに設定されているため、親要素の高さが0になり、親要素の背景色と背景画像の表示に影響し、ページレイアウトに影響します。
【5】解決する
- コンテンツが固定されている要素の場合、子要素がすべてフローティングの場合、親要素に固定の高さを指定できます（ナビゲーションバーなど）。
- 親要素の最後に空のブロック要素を追加します。クリアに設定：両方;フロートをクリア
- オーバーフローを設定：親要素に対して非表示。ソリューションの高さは0です。
3.レイアウトの配置
オフセット属性と組み合わせて要素の表示位置を調整します
【1】プロパティ
ポジション
【2】価値
利用可能な相対（相対ポジショニング）/絶対（絶対ポジショニング）/固定（固定ポジショニング）
postion:relative/absolute/fixed/static
[3]オフセット属性
ポジショニング要素を設定すると、offsetプロパティを使用して、距離参照オブジェクトの位置を調整できます。
top 距参照物的顶部
right 距参照物的右侧
bottom 距参照物的底部
left 距参照物的左侧
【4】分類
- 相対ポジショニング
元素设置相对定位,可参照元素在文档中的原始位置进行偏移,不会脱离文档流
- 絶対絶対ポジショニング
1. 绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口进行偏移
2. 绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高
絶対位置を使用する：
「父と息子は必須」：親要素の相対位置、子要素の絶対位置を設定し、配置された親要素のオフセットを参照します。
- 修繕
1. 参照窗口进行定位,不跟随网页滚动而滚动
2. 脱离文档流
【5】積み上げ順
要素がスタックされている場合、z-index属性を使用して、配置された要素の表示位置を調整できます。値が大きいほど、要素は高くなります。
-
属性：z-index
-
値：単位のない値、値が大きいほど高い
-
スタッキング：
- 配置された要素はドキュメント内の通常の要素とスタックされ、配置された要素は常に一番上にあります
- 配置された要素がスタックされるのと同じように、HTMLコードの記述順序に従って、後発者が一番上になります