HTMLデザインパターンで毎日の学習メモを整理します

今週はプロジェクトはありません。HTMLデザインモデルを研究しています。あなたの参考のために今週私の学習結果を整理して共有します

HTMLデザインパターン学習ノート

今週、私は主にHTMLのデザインパターンを学びましたが、次のように学習コンテンツを要約します。

1つ。ボックスモデルの学習

CSSにはThe Box Modelと呼ばれる基本設計モデルがあり、要素がボックスとしてどのように解析されるかを定義します。主に、インラインボックスモデル、インラインブロックボックスモデル、ブロックボックスモデル、テーブルボックスモデル、絶対ボックスモデル、フローティングポジショニングボックスモデルなど、6種類のボックスモデル、つまり6種類のボックスモデルを学びました。

ボックスモデルの設計パターンはCSSに組み込まれており、次のプロパティ間の関係を定義します：境界、境界、塗りつぶし、コンテンツ。各属性には、上、右、下、左の4つの部分が含まれます。これらの4つの部分は、同時にまたは別々に設定できます。境界線はサイズと色に分けることができます。私たちはそれを人生で見た箱の厚さと、箱の色が作られていることとして理解できます。境界は、ボックスが他のものからどれだけ遠くまで維持するかです。コンテンツは箱に含まれているものであり、充填ボックスのスペアパーツに材料が埋められています。

インラインボックスモデルはインライン配置の順序で解析され、左から右に水平にソートされ、最も近い端子ブロック先祖の幅を超えると、新しい行に置き換えられます。幅、高さ、オーバーフローは、コンテンツの幅と高さに常に一致するため、インライン要素では機能しません。マージンとラインハイトは、ある特別な方法でインライン要素に適用できます。水平マージンは、配置の順にインライン要素の位置を変更します。マージン左の正の値は、要素をその前に要素から遠ざけ、負の値が近づけます。マージン右の正の値は、要素を次の要素から遠ざけ、負の値はそれを近づけます。マージントップとマージンボトムは、インライン要素では機能しません。境界線は、インライン要素の境界線を特別な方法で設定し、水平の境界は、配置のインライン要素の位置を変えます。左の境界線は左の要素を作り、右の境界は右側の次の要素を作ります。上下の境界線は内側のマージンの外側に表示されますが、列の高さまで伸びたり、垂直方向の要素の位置を変更したりしません。このパターンのテンプレートは、次のように表現できます。