[Learn CSS] Box Model

1817 ワード
テキストリンク
原文(英語):https://web.dev/learn/css/box-model/
学習内容を韓国語で記録したが、原語を翻訳しないときに分かりやすい部分.
  • border-radiusを適用して、円形のように見え、普通のテキストでさえCSSで表されるすべてがboxになります.
  • CSS要素は、表示値やその内部内容物などによって異なる性質を有する.

    • 内部要因(contents)はボックスのサイズに影響します。

    p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}
    このコードを記述すると、widthで入力された100 pxではなく、142 pxの幅がマークされます.

    extrinsic sizing

  • 寸法(width)を直接指定すると
    • になります.
  • の外部寸法を使用すると、内容がボックスの範囲(オーバーフロー)
    • を超える.

    intrinsic sizing

  • ブラウザにおけるコンテンツのサイズに基づいて、内部でサイズ(幅)を独自に決定する(上のコードでは、幅:min-指定コンテンツの最小幅)
    • .
  • 本機を使用してスラリーを塗布し、内容物は箱に
    • を適合する.

    box modelは4つの部分に分かれています.
  • contentbox:content(コンテンツ)が存在する位置.このコンテンツは、親(box)のサイズを決定します.
  • paddingbox:contentboxをパッケージします.このときpaddingはboxの内部を意味する.箱があふれている場合:autoまたはスクロールされている場合、この部分にもスクロールバーがあります.
  • bordbox:paddingboxで包みます.border edgeは私たちが見ることができるboxの最大範囲です.
  • 枠線:box外部.このセクションではoutlineやbox-shadowなどのプロパティを使用します.これらの要因はboxのサイズに影響を及ぼさない.
    • Boxモデルをよりよく使用するには、ブラウザで発生したことを理解する必要があります.
    各
  • タグにはブラウザに内蔵されたスタイルがあり、では表示値がblock、
  • がlist-item、inlineなどを表す.
  • inline要素はblock marginを有するが、他の要素はそうは考えない.inline-blockはinline要素の大部分の特徴を持っているが、他の要素はblock marginを考慮する.inline、inline-block要素はコンテンツと同じサイズです.
  • block要素は、残りのインラインスペースを埋めます.
  • ディボルト、すべての要素はbox-size:content-boxです.これはwidthとheightを決定する際にcontent-boxにこれらの値が適用されることを意味する.paddingまたはborder値は別々です.(実際にborder edgeまでのボックス幅は指定した値より大きくなります.)
  • box-size:border-box、css幅はborder、paddingを含むborder-boxに適しています.
    • TIL(40) BST
    Java Collections(extends,implements)の理解