Box Model

មាតិកា

1. អ្វីៗគឺជា Box
2. Content, Padding, Border, Margin
3. ទម្រង់ខ្លីសម្រាប់ជ្រុងទាំងបួន
4. box-sizing៖ ការកំណត់ដែលអ្នកតែងតែត្រូវការ
5. Width និង Height
6. Property display
7. Margin Collapse
8. ឯកតា
9. ដកឃ្លាទំព័រ Profile
10. សាកល្បងដោយខ្លួនឯង

1. អ្វីៗគឺជា Box

សម្រាប់ browser រាល់ element — paragraph, link, រូបភាព សូម្បីតែពាក្យតែមួយ — គឺជា box ចតុកោណកែង។ Layout នៅក្នុង CSS គឺជាសិល្បៈនៃការកំណត់ទំហំ box ទាំងនោះ ការដកឃ្លារវាងពួកវា និងការដាក់ពួកវាក្បែរគ្នា។

អ្នកអាចមើលឃើញវានៅក្នុង DevTools។ ដាក់ទ្រនិចលើ element ណាមួយក្នុងផ្ទាំង Elements ហើយទំព័រនឹងបន្លិចចតុកោណពណ៌មួយ៖ ខៀវសម្រាប់ content, បៃតងសម្រាប់ padding, ទឹកក្រូចសម្រាប់ margin។ នៅខាងស្តាំនៃផ្ទាំង Styles មានផ្ទាំង Computed ដែលមានដ្យាក្រាមរបស់ box និងការវាស់វែងច្បាស់លាស់របស់វា។ ពេលអ្នក មើលឃើញ box ទាំងនោះ អាថ៌កំបាំង layout ភាគច្រើននឹងរលាយបាត់។

2. Content, Padding, Border, Margin

box នីមួយៗមានស្រទាប់បួន ពីខាងក្នុងទៅខាងក្រៅ៖

┌──────────────────────────────────┐
│             margin               │   space OUTSIDE the border
│   ┌──────────────────────────┐   │
│   │          border          │   │   the edge line
│   │   ┌──────────────────┐   │   │
│   │   │     padding      │   │   │   space INSIDE the border
│   │   │   ┌──────────┐   │   │   │
│   │   │   │ content  │   │   │   │   the text or image
│   │   │   └──────────┘   │   │   │
│   │   └──────────────────┘   │   │
│   └──────────────────────────┘   │
└──────────────────────────────────┘

សំណួរដែលត្រូវសួរ៖ "តើចន្លោះនេះជា ផ្នែកនៃ វត្ថុនោះ ឬនៅ ចន្លោះ វត្ថុនានា?" ប្រសិនបើជាផ្នែកនៃវា — នៅខាងក្នុង button រវាងអត្ថបទ និងគែម — នោះជា padding។ ប្រសិនបើនៅចន្លោះវា និងអ្វីដែលនៅជិតខាង នោះជា margin។

.card {
  padding: 16px;
  border: 1px solid #d6d3d1;
  margin-bottom: 24px;
}

border មានតម្លៃបី៖ ទទឹង, ស្ទីល, ពណ៌ (1px solid #d6d3d1)។ ស្ទីលផ្សេងទៀតគឺ dashed និង dotted។ border-radius ធ្វើឲ្យជ្រុងមូល ហើយ border-radius: 50% ធ្វើឲ្យរូបភាពការ៉េក្លាយជារង្វង់។

3. ទម្រង់ខ្លីសម្រាប់ជ្រុងទាំងបួន

margin និង padding អាចសរសេរសម្រាប់ជ្រុងនីមួយៗ (margin-top, margin-right, margin-bottom, margin-left) ឬជាទម្រង់ខ្លី (shorthand)។ លំដាប់ទៅ តាមទិសទ្រនិចនាឡិកាចាប់ពីខាងលើ៖ top, right, bottom, left។

padding: 16px;                /* all four sides */
padding: 8px 16px;            /* top & bottom 8, left & right 16 */
padding: 8px 16px 24px;       /* top 8, left & right 16, bottom 24 */
padding: 8px 16px 24px 32px;  /* top, right, bottom, left */

ដើម្បីដាក់ block ឲ្យនៅកណ្តាលតាមផ្ដេក សូមកំណត់ទទឹងឲ្យវា ហើយដាក់ margin ខាងឆ្វេងស្តាំជា auto៖

main {
  max-width: 800px;
  margin: 0 auto;
}

4. box-sizing៖ ការកំណត់ដែលអ្នកតែងតែត្រូវការ

នេះគឺជាអន្ទាក់មួយ។ ប្រសិនបើអ្នកកំណត់ width: 300px និង padding: 20px និង border: 2px solid តើ box មានទទឹងប៉ុន្មាន?

តាមលំនាំដើម (box-sizing: content-box) width អនុវត្តលើ content តែប៉ុណ្ណោះ។ Padding និង border ត្រូវ បូកបន្ថែម៖ 300 + 20 + 20 + 2 + 2 = 344px។ Layout ដែលមាន box 50% ពីរបូក padding នឹងលើសពី container របស់វា ដោយសារហេតុនេះ។

ដំណោះស្រាយគឺ box-sizing: border-box ដែលធ្វើឲ្យ width រួមបញ្ចូលទាំង padding និង border — box 300px មានទទឹង 300px ចប់តែប៉ុណ្ណឹង។ គ្រប់ stylesheet របស់អ្នកជំនាញចាប់ផ្តើមដោយ reset នេះ៖

*,
*::before,
*::after {
  box-sizing: border-box;
}

សូមដាក់វានៅខាងលើបំផុតនៃ style.css ឥឡូវនេះ។ វាជា rule ដំបូងនៅស្ទើរតែគ្រប់គម្រោង រួមទាំង website នេះផងដែរ។

5. Width និង Height

• Block element យកទទឹងទាំងអស់ដែលមានតាមលំនាំដើម។ ជាធម្មតាអ្នកមិនប៉ះ width ទេ ហើយទុកឲ្យវាពេញ container របស់វា។
• Height ជាធម្មតា មិន ត្រូវបានកំណត់ទេ។ box ពង្រីកតាម content របស់វា ដូច្នេះអត្ថបទមិនដែលលើសចេញ។ Height ថេរគឺជាប្រភពទូទៅនៃ layout ដែលខូច។
• max-width មានប្រយោជន៍បំផុត៖ "ទូលាយតាមត្រូវការ ប៉ុន្តែមិនដែលទូលាយជាងនេះឡើយ។" វាអនុញ្ញាតឲ្យ layout រួមតូចនៅលើអេក្រង់តូច។
• min-width, min-height និង max-height ក៏មានដែរ។

img {
  max-width: 100%;
  height: auto;
}

rule តូចនេះលើរូបភាព ការពារវាកុំឲ្យលើស container របស់វា និងរក្សាសមាមាត្ររបស់វា។ វាជាជំហានដំបូងនៃ responsive design ហើយជំពូកទី 11 នឹងត្រឡប់មកវិញ។

ពេល content ធំជាង box របស់វា property overflow សម្រេចថាត្រូវកើតអ្វីឡើង៖ visible (លំនាំដើម ហៀរចេញ), hidden (កាត់ចោល), scroll ឬ auto (បង្ហាញ scrollbar តែពេលចាំបាច់)។

6. Property display

ជំពូកទី 3 បានណែនាំអំពី block និង inline។ Property display គ្រប់គ្រងថា element ជាប្រភេទមួយណា។

ការប្រើទូទៅ៖ ធ្វើឲ្យ link មើលទៅដូច button។ <a> ធម្មតាជា inline ដូច្នេះ padding បញ្ឈររបស់វាមិនរុញអ្វីៗផ្សេងចេញទេ។ សូមកំណត់វាជា inline-block៖

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #b45309;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
}

display: none លាក់ element ពី គ្រប់គ្នា រួមទាំង screen reader ផង។ ដើម្បីលាក់អ្វីមួយតាមរូបភាព ប៉ុន្តែរក្សាទុកសម្រាប់ឧបករណ៍ជំនួយ សូមប្រើបច្ចេកទេស "visually hidden" ជាមួយ position និងទំហំតូចៗ។ Skip link ដែលបានលើកឡើងក្នុងជំពូកទី 4 គឺជាឧទាហរណ៍មួយ។

7. Margin Collapse

Margin ប្រព្រឹត្តតាមរបៀបដែលគួរឲ្យភ្ញាក់ផ្អើល។ ពេល margin បញ្ឈរ ពីរប៉ះគ្នា ពួកវាមិនបូកគ្នាទេ — ពួកវា collapse ទៅជា margin ធំជាង៖

h2 { margin-bottom: 24px; }
p  { margin-top: 16px; }

គម្លាតរវាង heading និង paragraph នោះគឺ 24px មិនមែន 40px ទេ។ រឿងនេះកើតឡើងតែតាមបញ្ឈររវាង block element ក្នុង normal flow ប៉ុណ្ណោះ៖ padding, border និង margin ផ្ដេកមិនដែល collapse ទេ ហើយ margin នៅក្នុង flex ឬ grid container ក៏មិន collapse ដែរ។

លទ្ធផលជាក់ស្តែង៖ កុំប្រយុទ្ធជាមួយវា។ សូមប្រើការដកឃ្លាឲ្យស្របគ្នាក្នុងទិសដៅតែមួយ — ឧទាហរណ៍ ប្រើតែ margin-bottom — ហើយការភ្ញាក់ផ្អើលនឹងបាត់ទៅ។

8. ឯកតា

ប្រវែងក្នុង CSS មានឯកតាច្រើនប្រភេទ។ ការដឹងថាត្រូវប្រើមួយណាគឺជាពាក់កណ្តាលនៃជំនាញ។

មនុស្សជាច្រើនបង្កើនទំហំ font លំនាំដើមរបស់ browser ដើម្បីងាយអាន។ ប្រសិនបើអ្នកកំណត់ទំហំអត្ថបទជា px អ្នកកំពុងបដិសេធជម្រើសរបស់ពួកគេ ចំណែកទំហំជា rem តាមការជ្រើសរើសនោះ។ ទម្លាប់ល្អគឺ rem សម្រាប់អក្សរ និងការដកឃ្លា, px សម្រាប់ border, % ឬ max-width សម្រាប់ layout។ ដូច្នេះ 1.25rem គឺ 20px តាមលំនាំដើម ប៉ុន្តែ 25px ប្រសិនបើអ្នកអានស្នើសុំអក្សរធំជាង។

9. ដកឃ្លាទំព័រ Profile

សូមធ្វើបច្ចុប្បន្នភាព style.css ជាមួយមូលដ្ឋានគ្រឹះនៃ box model៖

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

header,
main,
footer {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1rem;
}

section {
  margin-bottom: 2rem;
}

.card {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

nav ul {
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}

input,
textarea {
  display: block;
  width: 100%;
  max-width: 28rem;
  padding: 0.5rem;
  margin-bottom: 1rem;
}

th,
td {
  padding: 0.5rem 1rem;
  text-align: left;
}

សូម reload ហើយ inspect .card នៅក្នុង DevTools ដើម្បីមើលដ្យាក្រាម box ត្រូវនឹងលេខ។

10. សាកល្បងដោយខ្លួនឯង

1. អាន box។ ជ្រើស .card នៅក្នុង DevTools ហើយបើកផ្ទាំង Computed។ តើ padding, border និងទទឹងសរុបជាប៉ុន្មាន?
2. ធ្វើឲ្យខូច រួចជួសជុល។ លុប rule box-sizing ដាក់ width: 100% និង padding: 1rem ទៅ .card។ តើវាលើសចេញទេ? ដាក់ rule ត្រឡប់មកវិញ។
3. ធ្វើ button។ ប្តូរ link មួយទៅជា button ដោយប្រើ class .button ខាងលើ។ ប្តូរ display ទៅ inline ហើយកត់សម្គាល់ថាអ្វីខូច។
4. Margin collapse។ ដាក់ margin-bottom: 40px ទៅ <h2> និង margin-top: 40px ទៅ <p> បន្ទាប់។ វាស់គម្លាតនៅក្នុង DevTools។ ហេតុអ្វី 40 មិនមែន 80?
5. សាកល្បងឯកតា។ ប្តូរទំហំ font លំនាំដើមរបស់ browser (Chrome៖ Settings → Appearance → Font size)។ តើអ្វីផ្លាស់ប្តូរនៅក្នុងទំព័រដែលប្រើ rem និងទំព័រដែលប្រើ px?
6. Layout កណ្តាល។ ដាក់ max-width និង margin: 0 auto ទៅ page wrapper ហើយបង្រួមបង្អួច។ តើពេលណាវាឈប់នៅកណ្តាល?

បន្ទាប់ទៀត យើងនឹងធ្វើឲ្យវាស្អាត៖ font, ពណ៌, contrast, background និង dark mode។