箱型
widthおよびheightプロパティ(margin、padding、border、box-sizeなど)を含むボックス型に関連するすべてのプロパティ.継承されません.
① Content
要素のテキストや画像など、実際のコンテンツが存在する領域.幅と高さが占める空間.
paddingもborderもwidthには含まれていません.
もしそうならwidth 50 px,height 20 px,padding 5 px,border 10 px,marify 2 px
総幅は80 px(50+2 x 5+2 x 10+2 x 2)、総高さは50 px(20+2 x 5+2 x 10+2 x 2)であった.
1.width/hightプロパティ
widthプロパティとheightプロパティを使用して、要素の幅と高さを指定します.エレメントの幅と高さをコンテンツ領域に指定します.
幅と高さを明示的に指定するには、サイズ単位pxと%を使用します.
これはbox-size(幅と高さにpaddingとborderのプロパティが含まれているかどうかを決定する)のデフォルト値がcontent-boxであるためです.
widthとheightに指定したコンテンツ領域が実際のコンテンツより小さい場合、コンテンツ領域はオーバーフローします.
このとき,
overflow: hidden;を指定してオーバーフローしたコンテンツを隠すことができる.② Padding
枠線の内側にある要素の内側の空白領域.
→マーチンも同じ!!
③ Margin
境界外にある要素の外部空白領域.marginのプロパティ値はmargin領域の厚さを表します.
既定では透明であり、背景色を指定することはできません.
<head>
<style>
div {
border: 5px solid red;
width: 600px;
margin: 0 auto; /* 마진을 auto로 지정해주면 해당 요소를 브라우저 중앙에 위치시킬 수 있다 */
}
</style>
</head><head>
<style>
div {
border: 5px solid red;
max-width: 600px; /* 요소 너비의 최대값 지정 */
margin: auto;
}
</style>
</head>④ Border
枠線Boorderのプロパティ値は、枠線の厚さを表します.
1. border-style
枠線のスタイルを指定します.
border-styleプロパティ値を参照
アトリビュート値の数に応じて、4つの方向(上部、右側、下部、左側)を指定できます.
2. border-width
枠線の厚さを指定します.
アトリビュート値の数に応じて、4つの方向(上部、右側、下部、左側)を指定できます.
border-widthはborder-styleと一緒に使用する必要があります.
→また、px値に設定することもできます.
3. border-color
枠線の色を指定します.
アトリビュート値の数に応じて、4つの方向(上部、右側、下部、左側)を指定できます.
border-colorはborder-styleと一緒に使用する必要があります.
4. border-radius
境界エッジの円表示を指定します.
単位(px,emなど)と%を用いて属性値の長さを表す.
head>
<style>
.border-rounded {
/* 4 꼭지점에 대해 Radius 지정 */
border-radius: 5px;
}
.border-circle {
border-radius: 50%;
}
.border-football {
/* top-left & bottom-right | top-right & bottom-left */
border-radius: 15px 75px;
}
</style>
</head>5. border
// 형식 (border-width, style, color를 한번에 설정하기 위한 shorthand 속성)
border: border-width border-syle border-color;⑤大文字と小文字の属性
box-寸法初期化方法↓
/* 첫번째 방법 */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* 두번째 방법 */
html {
box-sizing: border-box;
}🎁 リファレンスとソース
Reference
この問題について(箱型), 我々は、より多くの情報をここで見つけました https://velog.io/@0jiiino/박스-모델テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol