HTML&CSS基礎-div注意事項



箱を作るときに注意事項があります.
divのwidthプロパティはborderまたはpaddingのサイズを考慮しません.
すなわち,上図ではpadding内側の青い格子だけがwidthである.
そのため、200 pxの箱を作っても、たくさんの充填物をあげれば、実際に見た箱の幅も充填物のように増えます.

ボックスの幅をborderに設定するときに使用するプロパティ。


.box {
box-sizing : border-box;/ボックスの幅には、枠線/
box-sizing : content-box;/箱の幅はパッドの内側/
}
box-sizeプロパティが付与されている場合は、borderの実際のボックスの幅に設定します.

CSSファイルを作成するためのデフォルトのプロパティ。

div {
  box-sizing : border-box;
}
body {
  margin : 0;
}
html {
  line-height : 1.15; /*기본 행간 높이*/
}
したがって、これらの設定を最初にすると、CSSの上部に良いコードがリストされます.
HTMLを堅持すればするほど、CSSの上部に書かれたコードが多くなるそうです.