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

CSS அகலப் பண்பு உறுப்பின் உள்ளடக்கப் பகுதியின் அகலத்தை அமைக்க உங்களை அனுமதிக்கிறது, மேலும் உயரப் பண்பு உள்ளடக்கப் பகுதியின் உயரத்தை அமைக்க உங்களை அனுமதிக்கிறது:

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

இந்த பத்திக்கு, அகலம் மற்றும் உயரத்தை மட்டும் அமைப்போம்.

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

முயற்சி "

இரண்டாவது உறுப்பு முதல் இடத்தை விட அதிக இடத்தை எடுத்துக்கொள்கிறது என்பதை எடுத்துக்காட்டு தெளிவாகக் காட்டுகிறது. எங்கள் சூத்திரத்தைப் பயன்படுத்தி கணக்கிட்டால், முதல் பத்தியின் பரிமாணங்கள் 150x100 பிக்சல்கள் மற்றும் இரண்டாவது பத்தியின் பரிமாணங்கள்:

மொத்த உயரம்:	5px	+	10px	+	100px	+	10px	+	5px	= 130px
	மேல் சட்டகம்		மேல் உள்தள்ளல்		உயரம்		குறைந்த உள்தள்ளல்		குறைந்த சட்டகம்

அதாவது 180x130 பிக்சல்கள்.

உறுப்பு வழிதல்

ஒரு உறுப்புக்கான அகலம் மற்றும் உயரத்தை நீங்கள் தீர்மானித்தவுடன், நீங்கள் ஒரு முக்கியமான புள்ளியில் கவனம் செலுத்த வேண்டும் - உறுப்புக்குள் அமைந்துள்ள உள்ளடக்கம் குறிப்பிட்ட தொகுதி அளவை விட அதிகமாக இருக்கலாம். இந்த வழக்கில், சில உள்ளடக்கம் உறுப்புகளின் எல்லைக்கு அப்பால் செல்லும். இந்த விரும்பத்தகாத தருணத்தைத் தவிர்க்க, நீங்கள் CSS வழிதல் பண்புகளைப் பயன்படுத்தலாம். ஒரு தொகுதியின் உள்ளடக்கம் அதன் அளவை விட அதிகமாக இருந்தால் என்ன செய்ய வேண்டும் என்பதை ஓவர்ஃப்ளோ பண்பு உலாவிக்குக் கூறுகிறது. இந்த சொத்து நான்கு மதிப்புகளில் ஒன்றை எடுக்கலாம்:

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

விளாட் மெர்செவிச்

எந்தவொரு தொகுதி உறுப்பும் முட்டைக்கோஸ் இலைகள் ஒன்றையொன்று மிகைப்படுத்துவது போன்ற பண்புகளின் தொகுப்பைக் கொண்டுள்ளது. தொகுதியின் அடிப்படையானது அதன் உள்ளடக்கம் (இது உரை, படம், முதலியன இருக்கலாம்), அகலம் சொத்துக்களால் குறிப்பிடப்படும் அகலம் மற்றும் உயரம் உயரம் ; உள்ளடக்கத்தைச் சுற்றி திணிப்பு உள்ளது, அவை உள்ளடக்கத்திலிருந்து எல்லைகளின் உள் விளிம்பிற்கு வெற்று இடத்தை உருவாக்குகின்றன; பின்னர் எல்லைகள் தாங்களாகவே வந்து (எல்லை) மற்றும் தொகுதி விளிம்புகள் (விளிம்பு), எல்லைகளின் வெளிப்புற விளிம்பில் இருந்து கண்ணுக்கு தெரியாத வெற்று இடம். தொகுதி அகலம் ஒரு சிக்கலான மதிப்பு மற்றும் பல சொத்து மதிப்புகளைக் கொண்டுள்ளது:

• அகலம் - உள்ளடக்க அகலம், அதாவது. தொகுதி உள்ளடக்கங்கள்;
• திணிப்பு-இடது மற்றும் திணிப்பு-வலது - உள்ளடக்கத்தின் இடது மற்றும் வலதுபுறத்தில் விளிம்பு;
• எல்லை-இடது மற்றும் எல்லை-வலது - இடது மற்றும் வலதுபுறத்தில் உள்ள எல்லையின் தடிமன்;
• விளிம்பு-இடது மற்றும் விளிம்பு-வலது - இடது மற்றும் வலது விளிம்பு.

சில பண்புகள் விடுபட்டிருக்கலாம், இதில் அகலம் பாதிக்கப்படாது. ஒட்டுமொத்த அகலம் படத்தில் காட்டப்பட்டுள்ளது. 1 கருப்பு புள்ளியிடப்பட்ட கோடாக.

அரிசி. 1. தொகுதி அகலம்

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

பின்வரும் நடை ஒரு அடுக்குக்காக எழுதப்பட்டது என்று வைத்துக் கொள்வோம்.

அகலம்: 300px; /* அடுக்கு அகலம் */ விளிம்பு: 7px; /* திணிப்பு மதிப்பு */ பார்டர்: 4px திட கருப்பு; /* பார்டர் விருப்பங்கள் */ திணிப்பு: 10px; /* உரையைச் சுற்றியுள்ள ஓரங்கள் */

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

அகலம் = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

அகலத்தின் உருவாக்கம் கொண்ட தொகுதி மாதிரியானது நிறைய சிரமங்களைக் கொண்டுள்ளது என்பதை கவனத்தில் கொள்ள வேண்டும். நீங்கள் ஒரு குறிப்பிட்ட தொகுதி அகலத்தை அமைக்க வேண்டும் போது நீங்கள் தொடர்ந்து கணக்கீடுகள் செய்ய வேண்டும். இணைக்கும்போது சிக்கல்களும் தொடங்குகின்றன வெவ்வேறு அலகுகள்அளவீடுகள், குறிப்பாக சதவீதம் மற்றும் பிக்சல்கள். உள்ளடக்க அகலம் 90% ஆக அமைக்கப்பட்டுள்ளது என்று வைத்துக்கொள்வோம், பிக்சல்களில் குறிப்பிடப்பட்டுள்ள விளிம்புகள் மற்றும் பார்டர்களைச் சேர்த்தால், சதவீதங்கள் நேரடியாக பிக்சல்களாக மொழிபெயர்க்கப்படாததால், தொகுதியின் மொத்த அகலத்தைக் கணக்கிட முடியாது. இது வலைப்பக்கத்தின் அகலத்தை விட பிளாக்கின் மொத்த அகலத்தை அதிகரிக்கலாம், இதன் விளைவாக கிடைமட்ட உருள் பட்டை உருவாகலாம். இந்த சூழ்நிலையிலிருந்து இரண்டு வழிகள் உள்ளன - பிளாக் மாடல் அல்காரிதத்தை மாற்றவும் மற்றும் உள்ளமை அடுக்குகளைப் பயன்படுத்தவும்.

பிளாக் மாதிரி அல்காரிதம்

குறிப்பிட்டுள்ளபடி, தொகுதி அகலம் உள்ளடக்கத்தின் அகலம் மற்றும் விளிம்புகள், எல்லைகள் மற்றும் திணிப்பு ஆகியவற்றின் மதிப்புகளிலிருந்து உருவாகிறது. உலாவியில் இன்டர்நெட் எக்ஸ்புளோரர்அல்காரிதம் தானாகவே மாறுகிறது மற்றும் முழு தொகுதியின் அகலமும் அகலத்திற்கு சமமாக அமைக்கப்படும். மற்ற உலாவிகள் அல்காரிதத்தை அவ்வளவு எளிதில் மாற்றாது, மேலும், பொருந்தக்கூடிய பயன்முறை தீயது என்பதை நீங்கள் அறிவீர்கள். CSS3 எங்களுக்கு கைக்குள் வரும் ஒரு அற்புதமான பெட்டி அளவு சொத்து உள்ளது. பார்டர்-பாக்ஸாக அமைக்கும் போது, ​​அகலம் விளிம்புகள் மற்றும் பார்டர்களை சேர்க்கத் தொடங்குகிறது, ஆனால் திணிப்பு அல்ல. இவ்வாறு, பார்டர்-பாக்ஸ் மதிப்புடன் பாக்ஸ்-சைஸிங்கை இணைப்பதன் மூலம், அகலத்தை சதவீதமாக அமைத்து, பிளாக்கின் அகலம் மாறும் என்று பயப்படாமல் பார்டர் மற்றும் பேடிங்கைப் பாதுகாப்பாகக் குறிப்பிடலாம். துரதிர்ஷ்டவசமாக, இந்தச் சொத்தில் ஒரு சிறிய சிக்கல் உள்ளது, பொதுவாக உலாவிகளைப் போலவே - எல்லா உலாவிகளும் இதைப் புரிந்து கொள்ளவில்லை. உலாவிகள் குறைந்தபட்சம் உலாவி சார்ந்த பண்புகளை ஆதரிப்பதில் நான் மகிழ்ச்சியடைகிறேன். அட்டவணையில் 1 உலாவி ஆதரவைக் காட்டுகிறது.

மேசை 1. பெட்டி-அளவிலான சொத்துக்கான உலாவி ஆதரவு

உலாவி	இன்டர்நெட் எக்ஸ்புளோரர்	குரோம்	ஓபரா	சஃபாரி	பயர்பாக்ஸ்
பதிப்பு	8.0+	2.0+	7.0+	3.0+	1.0+
சொத்து	பெட்டி அளவு	-வெப்கிட்-பாக்ஸ்-அளவு	பெட்டி அளவு	-வெப்கிட்-பாக்ஸ்-அளவு	-moz-box-அளவு

அட்டவணையில் இருந்து நீங்கள் பார்க்க முடியும் என, பண்புகளில் குழப்பம் மற்றும் ஊசலாட்டம் உள்ளது, எனவே நீங்கள் ஒரு கலப்பினத்தை உருவாக்கி மூன்று பண்புகளையும் குறிக்க வேண்டும் (எடுத்துக்காட்டு 1).

எடுத்துக்காட்டு 1: தொகுதி அகலம்

HTML5 CSS3 IE Cr Op Sa Fx

இந்த எடுத்துக்காட்டு அட்டவணையில் பட்டியலிடப்பட்டுள்ள அனைத்து உலாவிகளிலும் வேலை செய்யும். 1, இருப்பினும் -moz மற்றும் -webkit உடன் தொடங்கும் தரமற்ற பண்புகளின் பயன்பாடு காரணமாக CSS3 இல் செல்லுபடியாகாது. திணிப்பு மதிப்புகள் உட்பட தொகுதி அகலம் 100% ஆகும். பெட்டி-அளவு சொத்து இல்லாமல், உலாவியில் கிடைமட்ட உருள்ப்பட்டி தோன்றும்.

உள்ளமைக்கப்பட்ட அடுக்குகள்

IE இன் பழைய பதிப்புகளில் இது வேலை செய்யாது என்பதைத் தவிர, பெட்டி அளவிலான சொத்தைப் பயன்படுத்துவது அனைவருக்கும் நல்லது. நீங்கள் IE7 மற்றும் IE6 ஆகியவற்றின் அடிப்படையில் ஒரு வலைத்தளத்தை வடிவமைக்கிறீர்கள் என்றால், பழைய நிரூபிக்கப்பட்ட அடுக்குகளின் கூடு கட்டும் முறை உங்களுக்கு ஏற்றது. யோசனை எளிதானது - வெளிப்புற தொகுதி உறுப்புக்கு, தேவையான அகலம் மட்டுமே அமைக்கப்பட்டுள்ளது, மேலும் உள்ளமைக்கப்பட்ட தொகுதிக்கு, மற்ற அனைத்தும் அமைக்கப்பட்டுள்ளன - விளிம்புகள், எல்லைகள் மற்றும் திணிப்பு. ஒரு தொகுதியின் இயல்புநிலை அகலமானது அதன் பெற்றோரின் கிடைக்கும் அகலத்திற்குச் சமமாக இருப்பதால், தொகுதிகள் ஏதோவொரு வகையில் ஒன்றுடன் ஒன்று ஒன்றுடன் ஒன்று சேரும், ஆனால் இணைந்த உறுப்பின் உண்மையான அகலம் தெளிவாக வரையறுக்கப்படும். எடுத்துக்காட்டு 2 உள்ளமை அடுக்குகளின் பயன்பாட்டைக் காட்டுகிறது.

எடுத்துக்காட்டு 2: உள்ளமைக்கப்பட்ட அடுக்குகள்

HTML5 CSS 2.1 IE Cr Op Sa Fx

விளைவாக இந்த உதாரணம்படம் காட்டப்பட்டுள்ளது. 2.

அரிசி. 2. சதவீதத்தில் தொகுதி அகலம்

உள்ளமைக்கப்பட்ட அடுக்குகளின் நன்மை, உள்தள்ளல்களின் பயன்பாடு (பாக்ஸ்-அளவித்தல் அவற்றை கணக்கில் எடுத்துக்கொள்ளாது), முறையின் பல்துறை மற்றும் விரும்பினால், பின்னணி ஒன்று அல்லது மற்றொரு அடுக்கில் சேர்க்கப்படலாம். இது ஓரளவு மாறுகிறது தோற்றம்கூறுகள், பின்னணி படங்களைச் சேர்க்கும்போது இது குறிப்பாக உண்மை. முறையின் குறைபாடுகளில், ஒரு கூடுதல் தொகுதியைச் சேர்ப்பதை ஒருவர் கவனிக்க முடியும், இது குறியீடு கட்டமைப்பை சிக்கலாக்குகிறது, குறிப்பாக முறை அடிக்கடி பயன்படுத்தப்பட்டால். ஆனால் பலன்களுடன் ஒப்பிடும்போது இது ஒரு சிறிய விஷயமாகக் கருதப்படலாம்.

விளக்கம்

தொகுதி-நிலை அல்லது மாற்றக்கூடிய உறுப்புகளின் அகலத்தை அமைக்கிறது (எடுத்துக்காட்டாக, குறிச்சொல் ) உறுப்பு, திணிப்பு அல்லது ஓரங்களைச் சுற்றியுள்ள எல்லைகளின் தடிமன் அகலத்தில் இல்லை.

உலாவிகள் அகலங்களை ஒரே வழியில் கையாளாது; காட்சி முடிவு பயன்படுத்தப்படும் உலாவியைப் பொறுத்தது.. அட்டவணையில் 1 வழங்கப்படுகிறது சாத்தியமான விருப்பங்கள் மற்றும் விளைவாக அகலம்.

மேசை 1. உலாவிகளில் அகல நடவடிக்கை

	இன்டர்நெட் எக்ஸ்புளோரர்	Opera 10+, Firefox, Chrome, Safari	ஓபரா 9
குறிப்பிடப்படவில்லை (பொருந்தக்கூடிய முறை)	உள்ளடக்கம் குறிப்பிட்ட அகலத்தை விட அதிகமாக இருந்தால், உள்ளடக்கத்திற்கு ஏற்றவாறு தொகுதி அளவு மாற்றப்படும். இல்லையெனில், தொகுதியின் அகலம் அகல மதிப்புக்கு சமமாக இருக்கும்.	எல்லா சந்தர்ப்பங்களிலும், உலாவி CSS விவரக்குறிப்பின் படி செயல்படுகிறது. அதாவது, அகலம், திணிப்பு, விளிம்பு மற்றும் எல்லை ஆகிய மதிப்புகளைச் சேர்ப்பதன் மூலம் தொகுதியின் அகலம் பெறப்படுகிறது. தொகுதியின் உள்ளடக்கங்கள், அவை குறிப்பிட்ட அளவுகளுடன் பொருந்தவில்லை என்றால், தொகுதியின் மேல் காட்டப்படும்.	அகலம் அகல மதிப்புக்கு சமம்.
இடைநிலை HTML
கடுமையான HTML	அகலம், திணிப்பு, விளிம்பு மற்றும் எல்லை ஆகியவற்றின் மதிப்புகளைச் சேர்ப்பதன் மூலம் அகலம் உருவாகிறது. தொகுதியின் உள்ளடக்கங்கள் குறிப்பிட்ட பரிமாணங்களுக்கு பொருந்தவில்லை என்றால், அவை மேலே காட்டப்படும்.		அகலம் அகல மதிப்பு மற்றும் திணிப்பு, விளிம்பு மற்றும் எல்லைக்கு சமமாக இருக்கும். தொகுதியின் உள்ளடக்கங்கள் குறிப்பிட்ட பரிமாணங்களுக்கு பொருந்தவில்லை என்றால், அவை மேலே காட்டப்படும்.
HTML 5
XHTML

தொடரியல்

அகலம்: மதிப்பு | வட்டி | ஆட்டோ | மரபுரிமையாக

மதிப்புகள்

CSS இல் ஏற்றுக்கொள்ளப்பட்ட எந்த நீள அலகுகளும் மதிப்புகளாக ஏற்றுக்கொள்ளப்படுகின்றன - எடுத்துக்காட்டாக, பிக்சல்கள் (px), அங்குலங்கள் (in), புள்ளிகள் (pt), முதலியன. சதவீதக் குறியீட்டைப் பயன்படுத்தும் போது, ​​உறுப்புகளின் அகலம் அதன் அகலத்தைப் பொறுத்து கணக்கிடப்படுகிறது. தாய் உறுப்பு. பெற்றோர் வெளிப்படையாகக் குறிப்பிடப்படவில்லை என்றால், உலாவி சாளரம் அது செயல்படும்.

உறுப்பு வகை மற்றும் உள்ளடக்கத்தின் அடிப்படையில் தானாக அகலத்தை அமைக்கிறது. மரபுரிமை பெற்றோரின் மதிப்பைப் பெறுகிறது.

HTML5 CSS2.1 IE Cr Op Sa Fx

இந்த எடுத்துக்காட்டின் முடிவு, சஃபாரி உலாவியில் தோன்றும், படம். 1.

அரிசி. 1. தொகுதி அகலம்

பொருள் மாதிரி

document.getElementById("elementID ").style.width

உலாவிகள்

இன்டர்நெட் எக்ஸ்புளோரர் 6 ஆனது அகலத்தை நிமிட அகலம் என தவறாக வரையறுக்கிறது. க்விர்க் பயன்முறையில், இன்டர்நெட் எக்ஸ்புளோரர் பதிப்புகள் 8.0 வரை மற்றும் அதில் திணிப்பு, விளிம்பு அல்லது பார்டர் மதிப்புகளைச் சேர்க்காமல் ஒரு தனிமத்தின் அகலத்தை தவறாகக் கணக்கிடுகிறது.

இன்டர்நெட் எக்ஸ்புளோரர் பதிப்புகள் மற்றும் 7.0 உட்பட, மரபுரிமை மதிப்பை ஆதரிக்காது.

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

இந்த இடுகை ஆரம்பநிலையாளர்களுக்கானது, ஆனால் சாதகர்கள் கூட இங்கே சுவாரஸ்யமான ஒன்றைக் காணலாம். எனவே வணிகத்தில் இறங்குவோம்!

இது எப்போதும் நினைவில் கொள்ளத்தக்கது

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

அடிப்படைக் கொள்கைகள் பின்வருமாறு: உள்தள்ளலுக்கு நாங்கள் திணிப்பு மற்றும் விளிம்பை மட்டுமே பயன்படுத்துகிறோம் (தேவையைப் பொறுத்து) - தனி 20 பிக்சல் டிவியை உருவாக்குவது அவசியமில்லை, நாங்கள் கூடு கட்டுவதை குறைந்தபட்சமாக கட்டுப்படுத்துகிறோம், நிலையுடன் அதை மிகைப்படுத்த மாட்டோம் : தொடர்புடைய மற்றும் அடுத்தடுத்த பிளாக் ஆஃப்செட்கள் (தவறாகப் பயன்படுத்தினால், முழு குறியீட்டையும் அரை மணிநேரம் திருத்தலாம்), விரும்பிய விளைவை அடைய z-index ஐ தீவிரமாகப் பயன்படுத்துகிறோம்.

அடிக்கடி கேட்கப்படும் கேள்விகள்

- டிவ்களை ஒன்றன் பின் ஒன்றாக வைப்பது எப்படி?இதற்காக நாம் சொத்தை - மிதவை: இடது (அல்லது வலது, தேவையைப் பொறுத்து) பயன்படுத்துகிறோம், இதனால் அத்தகைய மாற்றுகளுக்குப் பிறகு அடுத்த பிரிவு அவற்றின் கீழ் நிற்கிறது, அதை தெளிவான சொத்தை அமைக்கிறோம் (எடுத்துக்காட்டாக தெளிவானது: இடது).

- ஒரு பகுதியை மையப்படுத்துவது எப்படி?ஒரு தீர்வு போல் தெரிகிறது பின்வரும் வழியில்- விளிம்பு-இடது மற்றும் விளிம்பு-வலது தானாக அமைக்கவும் (அல்லது இன்னும் எளிமையானது - விளிம்பு: 0 ஆட்டோ;)

- ஒரு div இல் உள்ள கூறுகளை செங்குத்தாக நிலைநிறுத்துவது எப்படி?இது உறுப்பைப் பொறுத்தது, எடுத்துக்காட்டாக, உரைக்கு, vertical-align:middle ஐ மட்டும் குறிப்பிடுவது போதுமானது, ஆனால் ஒரு படத்திற்கு நீங்கள் வரி-உயரம்:Npx ஐக் குறிப்பிட வேண்டும்.

- விளிம்பு அல்லது திணிப்பு பயன்படுத்தி உள்தள்ளல்?அடிப்படையில், விளிம்பு தொகுதிகளுக்கு இடையே உள்தள்ளலுக்கு உதவுகிறது; இது ஒரு "வெளிப்புற" உள்தள்ளல் ஆகும், ஏனெனில் திணிப்பு என்பது "உள்நோக்கிய" உள்தள்ளல் மற்றும் எடுத்துக்காட்டாக, உரையைச் சுற்றி உள்தள்ளலை ஒழுங்கமைக்க பெரும்பாலும் பயன்படுத்தப்படுகிறது. இது ஒரு எளிய விஷயமாகத் தெரிகிறது, ஆனால் சில சமயங்களில் நீங்கள் நெருப்புப் பூச்சி போன்ற கற்களைக் காணலாம், அதை இங்கே குறிப்பிடுவதைத் தவிர்க்க முடியவில்லை.

- விளிம்பு அல்லது நிலையைப் பயன்படுத்தி தொகுதியை மாற்றவும்: கிடைமட்ட மற்றும் செங்குத்து ஆஃப்செட்களுடன் இணைந்து உறவினர்?நிச்சயமாக, இந்த சந்தர்ப்பங்களில் நீங்கள் விளிம்பைப் பயன்படுத்த வேண்டும். உண்மை, மற்ற இடங்களைப் போலவே, இது அனைத்தும் குறிப்பிட்ட வழக்கைப் பொறுத்தது, ஆனால் பொதுவாக நீங்கள் இன்னும் விளிம்பைப் பயன்படுத்த வேண்டும்.

- பிளாக்கின் உள்ளடக்கங்களுக்கு ஏற்றவாறு ஒரு div நீட்டிப்பது எப்படி?இதைச் செய்ய, நீங்கள் உயரத்தைக் குறிப்பிட வேண்டும்: ஆட்டோ;

ஒரு div ஐ அதன் பெற்றோரின் உயரத்திற்கு நீட்டுவது எப்படி, அது அதன் உள்ளே அமைந்துள்ள div இன் உள்ளடக்கத்தின் உயரத்திற்கு, முதல் divக்கு அடுத்ததாக நீட்டுகிறது? உள்ளடக்கத்தை உயரத்திற்கு அமைக்கவும்: தானியங்கு, மற்ற இரண்டு divகள் உயரம்: 100% மற்றும் காட்சி: அட்டவணை;

- எப்படி ஒரு டிவியை கண்ணுக்கு தெரியாததாக்குவது?காட்சி சொத்தை கையாளுவதன் மூலம். கண்ணுக்குத் தெரியாமல் இருக்க, எதுவுமில்லை என அமைக்கவும்.

- நிலையான உயரத்துடன் ஒரு div இல் உள்ளடக்கத்தை உருட்டுவது எப்படி?நாங்கள் ஓவர்ஃப்ளோ: பண்புகளில் உருட்டவும்.

- "a" குறிச்சொல்லை ஒரு div (block) ஆக (உதாரணமாக) காட்டுவது எப்படி?பண்புகளில், உயரம் மற்றும் அகலத்தை அமைத்து, காட்சி: தொகுதி;

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

குறிச்சொற்கள்: ஃபாக், டிவி, லேஅவுட், டுடோரியல்

அடுத்த திட்டத்தை அமைக்கும் போது (அல்லது ஒரு தளவமைப்பு கட்டத்தை வடிவமைக்கும் போது), பலர் ஒரு இக்கட்டான சூழ்நிலையை எதிர்கொண்டனர் - நிலையான தளவமைப்பு அகலம் அல்லது உலாவி சாளரத்தின் அளவிற்கு ஏற்ப "ரப்பர்" கட்டத்தைப் பயன்படுத்துகின்றனர்.

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

நிலையான தளவமைப்பு கட்டம் அகலம்

தளவமைப்பு 960-980 பிக்சல்களின் கிடைமட்ட பரிமாணத்திற்கு கட்டாயப்படுத்தப்படுகிறது (இதனால் அனைத்தும் பெரும்பாலான சாதனங்களில் பெரும்பாலான தீர்மானங்களில் சேர்க்கப்பட்டுள்ளது), இது பெரிய கிடைமட்ட சாளர அளவுகளுடன் எப்படியோ குளிர்ச்சியாக இருக்கும் - பயனுள்ள பக்க உள்ளடக்கத்தின் மெல்லிய செங்குத்து துண்டு மற்றும் பெரிய பயனற்ற புலங்கள் பக்கங்களில் பயன்படுத்தப்படாத இடம்.

சாளரத்தின் அகலம் முழுவதும் "ரப்பர்" தளவமைப்பு கட்டம்

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

நான் ஒரு எளிய தீர்வை முன்வைக்க விரும்புகிறேன் - குறைந்தபட்ச கிடைமட்ட அளவை பிக்சல்களில் ஒரு நிலையான மதிப்புக்கு வரம்பிடவும், மேலும் அதிகபட்ச உறவை சாளர அகலத்தின் சதவீதமாக மாற்றவும். இது மிகவும் அற்பமான தீர்வு எளிய வழிகளில் CSS விவரக்குறிப்பின் மேலும் 2 பதிப்புகள்.

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

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

தளவமைப்பு கொள்கலனை உருவாக்கவும்:
...
நாங்கள் அதை எளிய பாணி குறியீட்டால் அலங்கரிக்கிறோம்:
div.page-container (குறைந்த அகலம்: 960px; அதிகபட்ச அகலம்: 75%; விளிம்பு: 0 தானியங்கு; திணிப்பு: 0; )
இருப்பினும், மிகப் பெரிய கிடைமட்ட சாளர அளவுகளுடன், வரி நீளத்தில் சிக்கல்கள் மீண்டும் தோன்றுவதால் இந்த தீர்வு சிலருக்கு போதுமானதாக இல்லை. இதை சமமான எளிய கூடுதல் நுட்பத்துடன் தீர்க்க முடியும்: ஏற்கனவே விவரிக்கப்பட்டுள்ளவற்றிற்குள் கூடுதல் வெளிப்புற கொள்கலனை உருவாக்குதல் மற்றும் அதன் அதிகபட்ச அகலத்தை ஒரு நிலையான மதிப்புக்கு வரம்பிடுதல் (புறநிலையாக, 1400-1600 பிக்சல்கள் வரம்பில் உள்ள மதிப்புகள் என்று எனக்குத் தோன்றுகிறது. மிகவும் பொருத்தமானது). மீண்டும் நாம் மட்டுமே பயன்படுத்துகிறோம் CSS கருவிகள் 2.0 இந்தத் தீர்வு, முதல் கருத்தில் முன்மொழியப்பட்ட அசல் கொள்கலனுக்கான சதவீதமாக அகலத்தைச் சேர்ப்பதற்குப் பதிலாக, பதிப்பு 9 வரை, ஒரே நேரத்தில் மதிப்புகளின் குறிப்பைப் புரிந்து கொள்ளாத IE இல் வேலை செய்யும்.

HTML ஐச் சேர்த்தல்:
...

CSS ஐ சிறிது மாற்றவும்:
div.page-container (அதிகபட்ச அகலம்: 75%; குறைந்தபட்ச அகலம்: 960px; விளிம்பு: 0 தானியங்கு; திணிப்பு: 0; ) div.page-container-inner (min-width: 960px; max-width: 1600px; விளிம்பு : 0 ஆட்டோ; திணிப்பு: 0;)
நீங்கள் பார்க்க முடியும் என, தீர்வு மிகவும் எளிமையானது மற்றும் மிகவும் உலகளாவியது; இது எந்த தொகுதி கூறுகளுக்கும் பயன்படுத்தப்படலாம்.