[Easy] ๐ท๏ธ Box Model
Defaultโ
Box Model ๅจ CSS ็ถไธญๆฏ่ขซ็จไพ่จ่ซๅฆไฝ่จญ่จไฝๅฑ็่ก่ชใไปๆฌ่บซๅฏไปฅ็่งฃ็บไธๅๅ
่ฃน HTML ๅ
็ด ็็ๅญ๏ผไธญ้ๆๅๅไธป่ฆ็ๅฑฌๆง :
- content : ไธป่ฆ็จๆผ้กฏ็คบๅ ็ด ็ๅ งๅฎน๏ผ่ญฌๅฆๆๅญใ
- padding : ๅ ็ด ็ๅ งๅฎนๅๅ ็ด ้็็่ท้ข
- margin : ๅ ็ด ๅฐๅคๅ ถไปๅ ็ด ็่ท้ข
- border : ๅ ็ด ๆฌ่บซ็้็ท
box-sizingโ
ๆฑบๅฎ Box Model ไฝฟ็จ็้กๅ๏ผๆ้ ้ box-sizing ้ๅ่ชๆณใ
ๆๆๆฏๆ๏ผ็ถๅ
็ด ่จ็ฎๅฏฌๅบฆๅ้ซๅบฆๆ๏ผpadding, border ้ๅ
ฉๅๅฑฌๆงๆฏๆก็จๅฐๅ
งๅกซๅ
้ๆฏๅฐๅคๆดๅ
ใ
ๅ
ถ้ ่จญๅผ็บ content-box๏ผๆก็จๅฐๅคๆดๅ
๏ผๅจ้ๅๆขไปถไธ๏ผ้คไบๅ
็ด ่ชๅทฑ็ๅฏฌ้ซๅค๏ผ้กๅค็ padding, border ้ฝ่ฆๅ ๅ
ฅ่จ็ฎใๅฆไธ :
div {
width: 100px;
padding: 10px;
border: 1px solid #000;
}
้ๅ div ็ๅฏฌๅบฆ่จ็ฎๆฏ 100px(width) + 20px(ๅทฆๅณ padding) + 2px(ๅทฆๅณ border) = 122pxใ
border-boxโ
้กฏ็ถไธ่ฟฐ้็จฎๆนๅผไธฆไธๅฏ้ ๏ผๆไฝฟๅ็ซฏ้็ผๆ๏ผ่ขซ่ฟซ้่ฆไธ็ด่จ็ฎๅ
็ด ๅฏฌ้ซ๏ผ็บไบๆนๅ้็ผ้ซ้ฉ๏ผ่ช็ถๅพๆนๆกๅฆไธๆจกๅผ๏ผๅณ border-boxใ
ๅฆไธไพ๏ผๅจๆจฃๅผๅๅงๅๆๅฐๅ
จ้ซๅ
็ด box-sizing ็ๅผ่จญ็บ border-box :
* {
box-sizing: border-box; // global style
}
ๅฆๆญคไธไพ๏ผๅฐฑๆๆนๆกๅฐๅ
งๅกซๅ
็ๅฝขๅผ๏ผๅ
็ด ็ๅฏฌ้ซ่จญ่จๆด็บ็ด่ฆบ๏ผไธๅฟ
็บไบ padding ๆ border ๅปๅขๆธๆธๅญใ
ๅฐๆฏไพ้กโ
ๅ่จญๆไปฅไธ็ธๅ็ๆจฃๅผ่จญๅฎ๏ผ
.box {
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid #000;
margin: 20px;
}
content-box๏ผ้ ่จญๅผ๏ผโ
- ๅฏฆ้ไฝ็จๅฏฌๅบฆ =
100px(width)+20px(ๅทฆๅณ padding)+10px(ๅทฆๅณ border)=130px - ๅฏฆ้ไฝ็จ้ซๅบฆ =
100px(height)+20px(ไธไธ padding)+10px(ไธไธ border)=130px - content ๅๅ =
100px ร 100px - ๆณจๆ๏ผ
marginไธ่จๅ ฅๅ ็ด ๅฏฌๅบฆ๏ผไฝๆๅฝฑ้ฟ่ๅ ถไปๅ ็ด ็่ท้ข
border-boxโ
- ๅฏฆ้ไฝ็จๅฏฌๅบฆ =
100px๏ผpadding ๅ border ๅๅ งๆ ๅฃ๏ผ - ๅฏฆ้ไฝ็จ้ซๅบฆ =
100px - content ๅๅ =
100px-20px(ๅทฆๅณ padding)-10px(ๅทฆๅณ border)=70px ร 70px - ๆณจๆ๏ผ
marginๅๆจฃไธ่จๅ ฅๅ ็ด ๅฏฌๅบฆ
่ฆ่ฆบๅๅฐๆฏโ
content-box:
โโโโโโโโโโโโ margin (20px) โโโโโโโโโโโโ
โ โโโโโโโโโ border (5px) โโโโโโโโโโโ โ
โ โ โโโโโ padding (10px) โโโโโโโ โ โ
โ โ โ โ โ โ
โ โ โ content (100ร100) โ โ โ
โ โ โ โ โ โ
โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
็ธฝๅฏฌๅบฆ๏ผ130px๏ผไธๅซ margin๏ผ
border-box:
โโโโโโโโโโโโ margin (20px) โโโโโโโโโโโโ
โ โโโโโโโโโ border (5px) โโโโโโโโโโโ โ
โ โ โโโโโ padding (10px) โโโโโโโ โ โ
โ โ โ โ โ โ
โ โ โ content (70ร70) โ โ โ
โ โ โ โ โ โ
โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
็ธฝๅฏฌๅบฆ๏ผ100px๏ผไธๅซ margin๏ผ
ๅธธ่ฆ้ท้ฑโ
1. margin ็่็โ
็ก่ซๆฏ content-box ๆ border-box๏ผmargin ้ฝไธๆ่ขซ่จๅ
ฅๅ
็ด ็ๅฏฌ้ซ๏ผๅ
ฉ็จฎๆจกๅผๅชๅฝฑ้ฟ padding ๅ border ็่จ็ฎๆนๅผใ
.box {
box-sizing: border-box;
width: 100px;
padding: 10px;
border: 5px solid;
margin: 20px; /* ไธ่จๅ
ฅ width */
}
/* ๅ
็ด ๅฏฆ้ไฝ็จๅฏฌๅบฆไปๆฏ 100px๏ผไฝ่ๅ
ถไปๅ
็ด ็่ท้ขๆๅค 20px */
2. ็พๅๆฏๅฏฌๅบฆโ
็ถไฝฟ็จ็พๅๆฏๅฏฌๅบฆๆ๏ผ่จ็ฎๆนๅผไนๆๅๅฐ box-sizing ๅฝฑ้ฟ๏ผ
.parent {
width: 200px;
}
.child {
width: 50%; /* ็นผๆฟ็ถๅ
็ด ็ 50% = 100px */
padding: 10px;
border: 5px solid;
}
/* content-box: ๅฏฆ้ไฝ็จ 130px๏ผๅฏ่ฝ่ถ
ๅบ็ถๅ
็ด ๏ผ */
/* border-box: ๅฏฆ้ไฝ็จ 100px๏ผๅๅฅฝๆฏ็ถๅ
็ด ็ 50%๏ผ */
3. inline ๅ ็ด โ
box-sizing ๅฐ inline ๅ
็ด ไธ่ตทไฝ็จ๏ผๅ ็บ inline ๅ
็ด ็ width ๅ height ่จญๅฎๆฌ่บซๅฐฑ็กๆใ
span {
display: inline;
width: 100px; /* ็กๆ */
box-sizing: border-box; /* ไน็กๆ */
}
4. min-width / max-widthโ
min-width ๅ max-width ๅๆจฃๅๅฐ box-sizing ๅฝฑ้ฟ๏ผ
.box {
box-sizing: border-box;
min-width: 100px; /* ๅ
ๅซ padding ๅ border */
padding: 10px;
border: 5px solid;
}
/* content ๆๅฐๅฏฌๅบฆ = 100 - 20 - 10 = 70px */