ប្រវែង
អំពីប្រវែងធាតុ (Element Dimensions)
ប្រវែងធាតុនៅក្នុង CSS មានពីរប្រភេទសំខាន់:
- ប្រវែងផ្ដេក (Width) - កំណត់ទទឹងធាតុ
- ប្រវែងបញ្ឈរ (Height) - កំណត់កម្ពស់ធាតុ
ប្រវែងអាចកំណត់ដោយប្រើខ្នាតផ្សេងៗគ្នា ដូចជា px, %, em, rem, vw, vh ។
ប្រវែងផ្ដេក (Width)
ដើម្បីកំណត់ទទឹងធាតុ អ្នកអាចប្រើ properties ទាំងនេះ:
width- កំណត់ប្រវែងផ្ដេកជាក់លាក់min-width- កំណត់ប្រវែងផ្ដេកអប្បបរមា (តូចបំផុត)max-width- កំណត់ប្រវែងផ្ដេកអតិបរមា (ធំបំផុត)
Width Property
Min-Width និង Max-Width
ប្រើ min-width និង max-width ដើម្បីគ្រប់គ្រងទទឹងធាតុឲ្យមានភាពបត់បែន:
ចំណាំ: max-width ប្រើច្រើនដើម្បីធ្វើឲ្យធាតុមិនធំពេកនៅលើអេក្រង់ធំ។
ប្រវែងបញ្ឈរ (Height)
ដើម្បីកំណត់កម្ពស់ធាតុ អ្នកអាចប្រើ properties ទាំងនេះ:
height- កំណត់ប្រវែងបញ្ឈរជាក់លាក់min-height- កំណត់ប្រវែងបញ្ឈរអប្បបរមា (ទាបបំផុត)max-height- កំណត់ប្រវែងបញ្ឈរអតិបរមា (ខ្ពស់បំផុត)
Height Property
Min-Height និង Max-Height
ប្រើ min-height និង max-height ដើម្បីគ្រប់គ្រងកម្ពស់ធាតុ:
ព័ត៌មាន: ប្រសិនបើមាតិកាលើសពី max-height អ្នកគួរប្រើ overflow property ដើម្បីគ្រប់គ្រងការបង្ហាញ។
តម្លៃពិសេស (Special Values)
Auto
តម្លៃ auto អនុញ្ញាតឲ្យ browser គណនាប្រវែងដោយស្វ័យប្រវត្តិ:
100% និងភាគរយផ្សេង
ប្រើភាគរយដើម្បីកំណត់ប្រវែងទំនាក់ទំនងទៅនឹងធាតុមាតា:
Viewport Units (vw, vh)
ប្រើ viewport units ដើម្បីកំណត់ប្រវែងទំនាក់ទំនងទៅនឹងទំហំអេក្រង់:
vw- 1vw = 1% នៃទទឹង viewportvh- 1vh = 1% នៃកម្ពស់ viewportvmin- 1vmin = 1% នៃប្រវែងតូចបំផុត (width ឬ height)vmax- 1vmax = 1% នៃប្រវែងធំបំផុត (width ឬ height)
Box Sizing
box-sizing property កំណត់របៀបគណនាទំហំធាតុ:
content-box- គណនាតែមាតិកា (លំនាំដើម)border-box- គណនាមាតិកា + padding + border
ការអនុវត្តល្អ: ប្រើ box-sizing: border-box សំរាប់គម្រោងភាគច្រើន ដើម្បីងាយស្រួលគណនាទំហំ។
ឧទាហរណ៍ជាក់ស្តែង (Practical Examples)
1. Card Layout ដែលមានទំហំកំណត់
2. Hero Section ពេញអេក្រង់
3. Responsive Container
4. Fixed Sidebar
ការអនុវត្តល្អបំផុត (Best Practices)
1. ប្រើ box-sizing: border-box
កំណត់ box-sizing: border-box សំរាប់ធាតុទាំងអស់ដើម្បីងាយស្រួលគណនាទំហំ:
* {
box-sizing: border-box;
}2. ប្រើ max-width ជំនួស width សំរាប់ responsive design
max-width អនុញ្ញាតឲ្យធាតុបង្រួមនៅលើអេក្រង់តូច។
3. កុំកំណត់ height ជាធម្មតា
ប្រើ min-height ជំនួស height ដើម្បីឲ្យធាតុអាចពង្រីកតាមមាតិកា។
4. ប្រើ viewport units សំរាប់ការរចនាពេញអេក្រង់
vw និង vh មានប្រយោជន៍សំរាប់បង្កើត hero sections និង modals។
5. គិតអំពី overflow
នៅពេលកំណត់ max-height ត្រូវកំណត់ overflow property ផងដែរ។
6. ប្រើ min-width និង max-width ជាមួយគ្នា
នេះធានាថាធាតុមានភាពបត់បែនប៉ុន្តែនៅក្នុងដែនកំណត់។