Box Model/Sizing

1115 ワード

html内のすべての要素は最終的にcssで箱で表現されます.

content:幅、高さ
padding:内側の余白、すなわちコンテンツとborderの間の空間を表す
border:枠線の太さ/スタイル/色を教えてください-border:1 px solid 0000;このように
->枠をくれないなら!border:処理不要
->border-top/border-bottom形式では、特定の部分しか処理できません.
->border-radius:~pxこれはフレームのエッジを丸くする役割です
->参考までに円の形にするにはborder-radius 50をあげるだけ(正方形に準じて)
->border-top-left-radius/border-bottom-righ-radiusのような方法も特定のエッジにのみ適用できます!
余白:余白、要素、要素の間隔を表します.
->同様に、marging-bottomは、シャーシの下部(または他端)の外側距離を調整することもできます.
速記タイプ:右上下左(時計回り)
padding: 10px 20px 30px 40px; これでまるまる4つ書ける
->左の余白と右の余白を等しくしたい場合は、右の余白を書くだけで、左の余白は右に沿って歩きます.
->上の空白を下の空白と同じようにしたいなら、上の空白だけを書いて、下の空白も上の空白について行きます.
Box Sizing:
ボックスサイズ範囲のプロパティを指定します.デフォルトはcontent-boxです.
そうすると内容箱とダウンジャケットが分かれていて….要するに、指定サイズは複雑で困難になります.
ボックスの幅と高さを指定する際に、所望の大きさで直感的に指定するために、
box-sizing: border-box;これで便利です.
これはboxサイズ基準をcontent、padding、borderを含む数にすることを意味します!(枠線を含む)
普通はcssの一番上に書いてあります.
* { /*전체적용 하겠다는 뜻*/
	box-sizing:border box;
}
このように発表してから始めたほうがいいです.