Jassif Team Institution

CSS உயரம், அகலம் மற்றும் அதிகபட்ச அகலம்

CSS height மற்றும் width பண்புகள் ஒரு உறுப்பின் உயரம் மற்றும் அகலத்தை அமைக்கப் பயன்படுகின்றன.

CSS max-width பண்பு ஒரு உறுப்பின் அதிகபட்ச அகலத்தை அமைக்கப் பயன்படுகிறது.

CSS உயரம் மற்றும் அகலத்தை அமைத்தல்

height மற்றும் width பண்புகள் ஒரு உறுப்பின் உயரம் மற்றும் அகலத்தை அமைக்கப் பயன்படுகின்றன.

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

CSS உயரம் மற்றும் அகலம் மதிப்புகள்

height மற்றும் width பண்புகளுக்கு பின்வரும் மதிப்புகள் இருக்கலாம்:

• auto - இது இயல்புநிலை. உலாவி உயரம் மற்றும் அகலத்தைக் கணக்கிடுகிறது
• length - px, cm, em, போன்றவற்றில் உயரம் அல்லது அகலத்தை வரையறுக்கிறது
• % - கொண்டிருக்கும் தொகுதியின் சதவீதத்தில் உயரம் அல்லது அகலத்தை வரையறுக்கிறது
• initial - உயரம் அல்லது அகலத்தை அதன் இயல்புநிலை மதிப்பிற்கு அமைக்கிறது
• inherit - உயரம் அல்லது அகலம் அதன் பெற்றோர் மதிப்பிலிருந்து மரபுரிமையாகப் பெறப்படும்

CSS உயரம் மற்றும் அகலம் எடுத்துக்காட்டுகள்

இந்த உறுப்புக்கு 200 பிக்சல்கள் உயரம் மற்றும் 50% அகலம் உள்ளது

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

இந்த உறுப்புக்கு 100 பிக்சல்கள் உயரம் மற்றும் 500 பிக்சல்கள் அகலம் உள்ளது

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

CSS max-width பயன்பாடு

max-width பண்பு ஒரு உறுப்பின் அதிகபட்ச அனுமதிக்கப்பட்ட அகலத்தை அமைக்கிறது. இது ஒரு உறுப்பின் அகலம் max-width பண்பு மதிப்பை விட பெரியதாக இருப்பதைத் தடுக்கிறது.

max-width பண்புக்கு பின்வரும் மதிப்புகள் இருக்கலாம்:

• length - px, cm, போன்றவற்றில் அதிகபட்ச அகலத்தை வரையறுக்கிறது
• % - கொண்டிருக்கும் தொகுதியின் சதவீதத்தில் அதிகபட்ச அகலத்தை வரையறுக்கிறது
• none - இது இயல்புநிலை. அதிகபட்ச அகலம் இல்லை என்று பொருள்

உலாவி சாளரம் உறுப்பின் அகலத்தை விட சிறியதாக இருக்கும் போது width பண்புடன் ஒரு சிக்கல் ஏற்படலாம். உலாவி பக்கத்திற்கு ஒரு கிடைமட்ட ஸ்க்ரோல்பாரைச் சேர்க்கிறது. எனவே, max-width ஐப் பயன்படுத்துவது சிறிய சாளரங்களில் உலாவியின் கையாளுதலை மேம்படுத்தும்.

CSS max-width எடுத்துக்காட்டுகள்

600px அகலத்தை விட சிறியதாக இருக்க உலாவி சாளரத்தை இழுக்க, கீழே உள்ள இரண்டு div க்கும் இடையிலான வித்தியாசத்தைப் பார்க்கவும்!

.div1 {
  max-width: 500px;
  background-color: powderblue;
}

.div2 {
  width: 500px;
  background-color: powderblue;
}

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

ஒரு <div> உறுப்பு width மற்றும் max-width பண்புகளுடன்:

.div1 {
  width: 100%;
  max-width: 900px;
  background-color: powderblue;
}

முயற்சிக்கவும் - எடுத்துக்காட்டுகள்

உறுப்புகளின் உயரம் மற்றும் அகலத்தை அமைக்கவும்

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

சதவீத மதிப்பைப் பயன்படுத்தி படத்தின் உயரம் மற்றும் அகலத்தை அமைக்கவும்

சதவீத மதிப்பைப் பயன்படுத்தி படத்தின் உயரம் மற்றும் அகலத்தை எவ்வாறு அமைப்பது என்பதை இந்த எடுத்துக்காட்டு நிரூபிக்கிறது.

ஒரு உறுப்பின் குறைந்தபட்ச அகலம் மற்றும் அதிகபட்ச அகலத்தை அமைக்கவும்

பிக்சல் மதிப்பைப் பயன்படுத்தி ஒரு உறுப்பின் குறைந்தபட்ச அகலம் மற்றும் அதிகபட்ச அகலத்தை எவ்வாறு அமைப்பது என்பதை இந்த எடுத்துக்காட்டு நிரூபிக்கிறது.

ஒரு உறுப்பின் குறைந்தபட்ச உயரம் மற்றும் அதிகபட்ச உயரத்தை அமைக்கவும்

பிக்சல் மதிப்பைப் பயன்படுத்தி ஒரு உறுப்பின் குறைந்தபட்ச உயரம் மற்றும் அதிகபட்ச உயரத்தை எவ்வாறு அமைப்பது என்பதை இந்த எடுத்துக்காட்டு நிரூபிக்கிறது.

பயிற்சி

div {
  : ;
  height: 100px;
}

அனைத்து CSS பரிமாண பண்புகள்