Khmer Angkor Academy | សិក្សាបង្កើតគេហទំព័រជាភាសាខ្មែរ

កាលនៅ HTML យើងបានសិក្សាអំពីបណ្ដុំ ដែលវាត្រូវបានចែកជា ២ គឺ

display property ប្រើសំរាប់កំណត់របៀបដែលធាតុមួយត្រូវបានបង្ហាញ និងពីរបៀបដែលវាទាក់ទងជាមួយធាតុផ្សេងទៀត ។

ប្រភេទធាតុមិនមែនមានត្រឹមតែជាដុំ និងក្នុងបន្ទាត់នោះទេ ។ មានតម្លៃជាច្រើនទៀតដែលយើងអាចប្រើ ។

Display: Block (ជាដុំ)

ធាតុក្នុងបន្ទាត់ យើងអាចបម្លែងទៅជាប្រភេទជាដុំបានដោយប្រើ display: block ។

លក្ខណៈសំខាន់របស់ block:

ធាតុជាដុំ យើងអាចបម្លែងទៅជាប្រភេទក្នុងបន្ទាត់បានដោយប្រើ display: inline ។

លក្ខណៈសំខាន់របស់ inline:

មិនចាប់ផ្តើមនៅបន្ទាត់ថ្មីទេ
ទទឹងគឺត្រឹមតែទទឹងនៃមាតិការបស់វា
មិនអាចកំណត់ width និង height បាន
អាចកំណត់ padding និង margin ខាងឆ្វេង-ស្តាំបាន ប៉ុន្តែខាងលើ-ក្រោមមិនមានប្រសិទ្ធភាព

ដើម្បីឲ្យធាតុមួយដែលមានប្រភេទក្នុងបន្ទាត់ ហើយអាចកំណត់ប្រវែងផ្ដេក និងបញ្ឈរបាន យើងត្រូវប្រើ display: inline-block ។

លក្ខណៈសំខាន់របស់ inline-block:

display: none ប្រើសំរាប់លាក់ធាតុទាំងស្រុង ។ ធាតុនឹងមិនត្រូវបានបង្ហាញ និងមិនចាប់ទីតាំងនៅក្នុងទំព័រទេ ។

display: flex ប្រើសំរាប់បង្កើត Flexible Box Layout ។ វាជួយរៀបចំធាតុកូនឲ្យស្រួល និងមានប្រសិទ្ធភាព ។

display: grid ប្រើសំរាប់បង្កើត Grid Layout ។ វាល្អសំរាប់រចនាទម្រង់ពិបាកដែលមានជួរដេក និងជួរឈរ ។

ឧទាហរណ៍ពិតប្រាកដនៃការប្រើ inline-block សំរាប់បង្កើតម៉ឺនុយនាវ៉ាហ្គស័ន:

ឧទាហរណ៍នៃការប្រើ display: flex សំរាប់បង្កើតការរៀបចំកាត:

Display Value	ចាប់ផ្តើមបន្ទាត់ថ្មី	កំណត់ width/height	ការប្រើប្រាស់ទូទៅ
`block`	✓ បាទ	✓ បាទ	ប្រអប់, កថាខណ្ឌ, ផ្នែក
`inline`	✗ ទេ	✗ ទេ	តំណ, អត្ថបទក្នុងបន្ទាត់
`inline-block`	✗ ទេ	✓ បាទ	ប៊ូតុង, ម៉ឺនុយ
`none`	-	-	លាក់ធាតុ
`flex`	✓ បាទ	✓ បាទ	Layout ទំនើប, ការរៀបចំធាតុ
`grid`	✓ បាទ	✓ បាទ	Layout ពិបាក, តារាង

ចំណាំសំខាន់:

display: none vs visibility: hidden: none លុបធាតុពីលំហូរ, hidden លាក់ធាតុប៉ុន្តែនៅចាប់ទីតាំង
ប្រើ inline-block នៅពេលចង់បានលក្ខណៈទាំង inline និង block
ប្រើ flex សំរាប់ layout តាមទិសមួយ (ជួរឬជួរឈរ)
ប្រើ grid សំរាប់ layout ពិបាកដែលមានជួរដេក និងជួរឈរ
ធាតុដែលមាន display: inline មិនទទួលយក vertical margin និង padding ទេ