今週はプロジェクトはありません。HTMLデザインモデルを研究しています。あなたの参考のために今週私の学習結果を整理して共有します
HTMLデザインパターン学習ノート
今週、私は主にHTMLのデザインパターンを学びましたが、次のように学習コンテンツを要約します。
1つ。ボックスモデルの学習
CSSにはThe Box Modelと呼ばれる基本設計モデルがあり、要素がボックスとしてどのように解析されるかを定義します。主に、インラインボックスモデル、インラインブロックボックスモデル、ブロックボックスモデル、テーブルボックスモデル、絶対ボックスモデル、フローティングポジショニングボックスモデルなど、6種類のボックスモデル、つまり6種類のボックスモデルを学びました。
ボックスモデルの設計パターンはCSSに組み込まれており、次のプロパティ間の関係を定義します:境界、境界、塗りつぶし、コンテンツ。各属性には、上、右、下、左の4つの部分が含まれます。これらの4つの部分は、同時にまたは別々に設定できます。境界線はサイズと色に分けることができます。私たちはそれを人生で見た箱の厚さと、箱の色が作られていることとして理解できます。境界は、ボックスが他のものからどれだけ遠くまで維持するかです。コンテンツは箱に含まれているものであり、充填ボックスのスペアパーツに材料が埋められています。
1.1インラインボックスモデルインラインボックスモデルはインライン配置の順序で解析され、左から右に水平にソートされ、最も近い端子ブロック先祖の幅を超えると、新しい行に置き換えられます。幅、高さ、オーバーフローは、コンテンツの幅と高さに常に一致するため、インライン要素では機能しません。マージンとラインハイトは、ある特別な方法でインライン要素に適用できます。水平マージンは、配置の順にインライン要素の位置を変更します。マージン左の正の値は、要素をその前に要素から遠ざけ、負の値が近づけます。マージン右の正の値は、要素を次の要素から遠ざけ、負の値はそれを近づけます。マージントップとマージンボトムは、インライン要素では機能しません。境界線は、インライン要素の境界線を特別な方法で設定し、水平の境界は、配置のインライン要素の位置を変えます。左の境界線は左の要素を作り、右の境界は右側の次の要素を作ります。上下の境界線は内側のマージンの外側に表示されますが、列の高さまで伸びたり、垂直方向の要素の位置を変更したりしません。このパターンのテンプレートは、次のように表現できます。
コードをコピーします