CSS Box Model

CSS பெட்டி மாதிரி

CSS பெட்டி மாதிரி

CSS இல், "பெட்டி மாதிரி" என்ற சொல் வலை வடிவமைப்பு மற்றும் இடவசதி பற்றி பேசும் போது பயன்படுத்தப்படுகிறது.

CSS பெட்டி மாதிரி அடிப்படையில் ஒவ்வொரு HTML உறுப்பையும் சுற்றி ஒரு பெட்டியாகும்.

ஒவ்வொரு பெட்டியும் நான்கு பகுதிகளைக் கொண்டுள்ளது: உள்ளடக்கம், பேடிங், எல்லைகள் மற்றும் விளிம்புகள்.

கீழே உள்ள படம் CSS பெட்டி மாதிரியை விளக்குகிறது:

விளிம்பு (Margin)
எல்லை (Border)
பேடிங் (Padding)
உள்ளடக்கம் (Content)
உள்ளடக்கம்
(உரை மற்றும் படங்கள்)

வெவ்வேறு பகுதிகளின் விளக்கம் (உள்ளே இருந்து வெளிப்புற பகுதி வரை):

பெட்டி மாதிரி உறுப்புகளைச் சுற்றி எல்லையைச் சேர்ப்பதற்கும், உறுப்புகளுக்கு இடையே உள்ள இடத்தை வரையறுப்பதற்கும் அனுமதிக்கிறது.

எடுத்துக்காட்டு

பெட்டி மாதிரியின் ஆர்ப்பாட்டம்:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
பெட்டி மாதிரி எடுத்துக்காட்டு

ஒரு உறுப்பின் அகலம் மற்றும் உயரம்

அனைத்து உலாவிகளிலும் ஒரு உறுப்பின் அகலம் மற்றும் உயரத்தை சரியாக அமைக்க, பெட்டி மாதிரி எவ்வாறு செயல்படுகிறது என்பதை நீங்கள் அறிந்து கொள்ள வேண்டும்.

⚠️ முக்கியமானது:

CSS உடன் ஒரு உறுப்பின் width மற்றும் height பண்புகளை அமைக்கும் போது, நீங்கள் உள்ளடக்கப் பகுதியின் அகலம் மற்றும் உயரத்தை மட்டுமே அமைக்கிறீர்கள். ஒரு உறுப்பின் மொத்த அகலம் மற்றும் உயரத்தைக் கணக்கிட, நீங்கள் பேடிங் மற்றும் எல்லைகளையும் சேர்க்க வேண்டும்.

எடுத்துக்காட்டு

இந்த <div> உறுப்புக்கு மொத்த அகலம் 350px மற்றும் மொத்த உயரம் 80px இருக்கும்:

div {
  width: 320px;
  height: 50px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
கணக்கீடு எடுத்துக்காட்டு

கணக்கீடு இங்கே உள்ளது:

மொத்த அகல கணக்கீடு:

320px (உள்ளடக்கப் பகுதியின் அகலம்) + 20px (இடது பேடிங் + வலது பேடிங்) + 10px (இடது எல்லை + வலது எல்லை) = 350px

மொத்த உயர கணக்கீடு:

50px (உள்ளடக்கப் பகுதியின் உயரம்) + 20px (மேல் பேடிங் + கீழ் பேடிங்) + 10px (மேல் எல்லை + கீழ் எல்லை) = 80px

ஒரு உறுப்பின் மொத்த அகலம் இவ்வாறு கணக்கிடப்பட வேண்டும்:

மொத்த உறுப்பு அகலம் = அகலம் + இடது பேடிங் + வலது பேடிங் + இடது எல்லை + வலது எல்லை

ஒரு உறுப்பின் மொத்த உயரம் இவ்வாறு கணக்கிடப்பட வேண்டும்:

மொத்த உறுப்பு உயரம் = உயரம் + மேல் பேடிங் + கீழ் பேடிங் + மேல் எல்லை + கீழ் எல்லை

📝 குறிப்பு:

margin பண்பும் பக்கத்தில் பெட்டி எடுக்கும் மொத்த இடத்தைப் பாதிக்கிறது, ஆனால் விளிம்பு பெட்டியின் உண்மையான அளவில் சேர்க்கப்படவில்லை. பெட்டியின் மொத்த அகலம் மற்றும் உயரம் எல்லையில் நிற்கிறது.

பயிற்சி

❓ 300px அகலம், 20px பேடிங், மற்றும் 10px பச்சை எல்லையை அமைக்க சரியான மதிப்புகளை இழுத்து விடவும்.

div {
  width: ;
  padding: ;
  border:  solid green;
}
300px, 20%, 10px
✗ தவறு! பேடிங் 20% அல்ல, 20px ஆக இருக்க வேண்டும்
300%, 20px, 10px
✗ தவறு! அகலம் 300% அல்ல, 300px ஆக இருக்க வேண்டும்
300px, 20px, 10px
✓ சரி! width: 300px; padding: 20px; border: 10px solid green; சரியான தொடரியல்
300px, 20px, 10%
✗ தவறு! எல்லை 10% அல்ல, 10px ஆக இருக்க வேண்டும்

பெட்டி மாதிரி சுருக்கம்

பகுதி விளக்கம் CSS பண்பு எடுத்துக்காட்டு
உள்ளடக்கம் உரை மற்றும் படங்கள் தோன்றும் பகுதி width, height width: 300px;
பேடிங் உள்ளடக்கத்தைச் சுற்றி ஒளிபுகு இடம் padding padding: 20px;
எல்லை பேடிங் மற்றும் உள்ளடக்கத்தைச் சுற்றி border border: 5px solid black;
விளிம்பு எல்லைக்கு வெளியே ஒளிபுகு இடம் margin margin: 10px;