உள்ளடக்கம்
- மேலே உள்ள மென்மையான பொருட்கள்
- நேர்த்தியாக பேக் செய்யப்பட்ட டி-ஷர்ட்கள்
- இடைவெளிகளை நிரப்பும் சாக்ஸ்
- பான் பயணம்
இது நள்ளிரவு, அதுவும் div உங்கள் தளத்தில் இன்னும் குழந்தையின் பொம்மை மார்பு போல் தெரிகிறது. எல்லா உறுப்புகளும் குழப்பமான குழப்பம், ஒவ்வொரு முறையும் நீங்கள் CSS உடன் விளையாடுகிறீர்கள் காட்சி சொத்து, அவை தங்களை முற்றிலும் வேறுபட்ட முட்டாள்தனமாக மறுசீரமைக்கின்றன.
நீங்கள் என்னை விரும்பினால், உங்கள் மூச்சின் கீழ் முணுமுணுத்து, உங்கள் விசைப்பலகை மூலம் தொடர்ந்து ஆக்ரோஷமாக மாறுவதன் மூலம் இதை நீங்கள் தீர்க்கலாம். அந்த மூலோபாயம் இதற்கு முன்பு எனக்கு வேலை செய்திருந்தாலும், புரிந்துகொள்ள ஒரு சிறந்த வழியைக் கண்டுபிடிக்க நான் சமீபத்தில் புறப்பட்டேன் காட்சி சொத்து.
இது அடிப்படைகளை மாற்றிவிடும் காட்சி நான் முதலில் நினைத்ததை விட மிகவும் எளிமையானவை. உண்மையில், அவர்கள் ஒரு சூட்கேஸைக் கட்டுவது போன்ற அதே கொள்கைகளைப் பயன்படுத்துகிறார்கள். நான் மறைக்கப் போகிறேன் காட்சி: தொகுதி, இன்லைன்-தொகுதி மற்றும் கோட்டில். இதற்கு முன்பு நீங்கள் ஒரு சூட்கேஸை ஒழுங்கான முறையில் ஏற்பாடு செய்திருந்தால், இணையாக இருப்பதைக் காண்பீர்கள். உங்கள் ஆடைகள் அனைத்தையும் இடையூறு விளைவிக்கும் நபராக நீங்கள் இருந்தால் - சரி, நான் உங்களுக்காக செய்யக்கூடியது மட்டுமே.
எங்கள் சூட்கேஸில் மூன்று வகையான ஆடைகள் இருக்கும்:
- ஒரு காலர் சட்டை போல சுவையானது
- உருட்டக்கூடிய டி-ஷர்ட்கள்
- சாக்ஸ் அல்லது உள்ளாடைகள் இடைவெளிகளில் அடைக்கப்படலாம்
குறிப்புக்கு, நாங்கள் HTML இல் சூட்கேஸை மாதிரியாகக் கொண்டிருந்தால், இது இப்படி இருக்கும்:
div class = 'suitcase'> div class = 'సున్నితమైన'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
மேலே உள்ள மென்மையான பொருட்கள்
காட்சி: தொகுதி பெரும்பாலான HTML உறுப்புகளுக்கான இயல்புநிலை. அதாவது உறுப்பு அதன் கொள்கலனில் முழு கிடைமட்ட இடத்தையும் ஆக்கிரமித்துள்ளது div. இது மற்ற உடன்பிறப்பு உறுப்புகளுக்கு அடுத்ததாக இருந்தால், அது ஒரு புதிய வரியைத் தொடங்கும், மேலும் அதன் வரியில் மற்ற கூறுகளை அனுமதிக்காது. இது உங்கள் சூட்கேஸின் மேற்புறத்தில் நீங்கள் வைத்திருக்கும் மென்மையான பொருட்களுக்கு ஒத்ததாகும். இவை காலர் சட்டைகள் போன்ற மென்மையான அல்லது ஸ்மார்ட் கட்டுரைகள். அவை சுருக்கப்படுவதை நீங்கள் விரும்பவில்லை, எனவே அவை மற்ற ஆடைகளுக்கு எதிராகத் தள்ளப்படுவதில்லை என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
இது கடினமான பகுதிகளில் ஒன்றைக் கொண்டுவருகிறது காட்சி: தொகுதி. சூட்கேஸின் முழு அகலத்தையும் காலர் சட்டை எவ்வாறு ஆக்கிரமிக்கவில்லை என்பதைக் கவனியுங்கள்? மற்ற உருப்படிகள் அதன் நிலைக்கு உயரும் என்று அர்த்தமல்ல. இந்த சட்டை சூட்கேஸின் அகலத்தில் 60 சதவீதம் என்று சொல்லலாம்; இது மற்ற கூறுகளை மேல் மட்டத்தில் சேருவதைத் தடுக்கும்.
அதனால்தான் படத்தில் ஆரஞ்சு எல்லை உள்ளது. அ காட்சி: தொகுதி முழு கிடைமட்ட இடத்தையும் ஆக்கிரமிக்கவில்லை என்றால் உறுப்பு தானாகவே அதைச் சுற்றி ஒரு விளிம்பைச் சேர்க்கும்.
நேர்த்தியாக பேக் செய்யப்பட்ட டி-ஷர்ட்கள்
உங்கள் சூட்கேஸில் பெரும்பாலானவை உங்கள் பயணத்திற்கான மீதமுள்ள ஆடைகளால் நிரம்பியுள்ளன. எளிமைக்காக, இதை வெறும் டி-ஷர்ட்களாக குறைக்கப் போகிறோம். மடிப்பு அல்லது உருட்டல் மிகவும் திறமையானதா என்று இணையத்தில் ஒரு பெரிய விவாதம் உள்ளது. நான் ஒரு மடிப்பு நபர்.
எப்படியிருந்தாலும், பெரும்பாலான பொருட்களைப் பொருத்துவதற்கு, உங்கள் டி-ஷர்ட்களை அருகருகே வரிசைப்படுத்துகிறீர்கள். இதுதான் சரியாக காட்சி: இன்லைன்-தொகுதி என்பது பொருள். இந்த கூறுகள் ஒருவருக்கொருவர் ஒரே வரியில் உட்கார்ந்து கொள்ளலாம், அதே போல் அடுத்தது காட்சி: இன்லைன் கூறுகள்.
போலல்லாமல் காட்சி: இன்லைன் கூறுகள், ஒரு இன்லைன்-தொகுதி உறுப்பு அதன் வரிசையில் பொருந்தவில்லை என்றால் அடுத்த வரிக்கு நகரும் div மற்றவற்றுடன் இன்லைன்-தொகுதி கூறுகள். அடுத்த வரிசையில் ஒரு டி-ஷர்ட் கசிவைப் பெற, நீங்கள் அதை பாதியாக வெட்டி மீதமுள்ள பாதியைப் பயன்படுத்தி புதிய வரிசையைத் தொடங்க வேண்டும். இன்லைன்-தொகுதி உறுப்புகள் ஒரு வரியில் பொருந்தவில்லை என்றால் அவை பாதியாகப் பிரிக்க அனுமதிக்கப்படாது.
இடைவெளிகளை நிரப்பும் சாக்ஸ்
அசல் HTML ஐ மீண்டும் சரிபார்க்கவும், ஒரு சாக்ஸ் இருப்பதை நீங்கள் கவனிப்பீர்கள் div> எட்டு டி-ஷர்ட்களுக்கு இடையில். ஆனால் வலதுபுறத்தில் சூட்கேஸின் கிடைமட்ட காட்சியைப் பாருங்கள். ஒரு சாக்ஸ் இருந்தால் div>, இது எவ்வாறு நடுத்தர வரிசையை முடித்து கீழ் வரிசையை தொடங்க முடியும்? இதன் நோக்கம் காட்சி: இன்லைன்!
ஒரு கோட்டில் உறுப்பு அகலத்தை மீறினால் அடுத்த வரியில் அது வெளியேறும் div (இந்த வழியில் இது வேறுபட்டது இன்லைன்-தொகுதி அல்லது தொகுதி). எங்கள் சாக்ஸ் என்பதால் div இடைவெளிகளில் இடையூறாக நிரப்பப்பட்ட சாக்ஸ் நிரம்பியுள்ளது, இது நடுத்தர வரிசையின் வலது பக்கத்தில் உள்ள இடைவெளியை எளிதில் நிரப்ப ஆரம்பித்து, கீழ் வரிசையைத் தொடங்குவதற்கு மேல் சிந்தலாம்.
இது நடக்க எந்த சாக்ஸ் பாதியாக வெட்டப்பட வேண்டியதில்லை. இதனால்தான் அவர்கள் ஆக முடியும் கோட்டில், டி-ஷர்ட்கள் மட்டுமே இருக்க முடியும் இன்லைன்-தொகுதி. நடுத்தர வரிசையில் உள்ள டி-ஷர்ட்கள் அகலத்தின் 60 சதவீதத்தை மட்டுமே எடுத்துக் கொண்டால், சாக்ஸ் div> மீதமுள்ள வரிசையில் முழு இடத்தையும் நிரப்ப மேலே நகரும்.
பான் பயணம்
இது எங்கள் சூட்கேஸின் இறுதி CSS ஆகும்:
.delicate {display: block; அகலம்: 60%; } .tshirt {காட்சி: இன்லைன்-தொகுதி; அகலம்: 20%; } .சாக்ஸ் {காட்சி: இன்லைன்; }
காட்சியின் வெவ்வேறு பயன்பாடுகளை விளக்குவதற்கு ஒரு ஜோடி மாற்று காட்சிகள் இங்கே. மேலே உள்ள சுவையாக இருந்தால் காட்சி: இன்லைன்-தொகுதி, அவை டி-ஷர்ட்டுகளுடன் சரியாக பொருந்தும். சில டி-ஷர்ட்டுகள் மேல் வரி வரை நகரும், மீதமுள்ளவை அதற்கேற்ப சரிசெய்யப்படும். காலர் சட்டையின் இடது மற்றும் வலதுபுறத்தில் வசதியான இடையகம் இருக்காது.
ஒவ்வொரு டி-ஷர்ட்டும் இருந்தால் காட்சி-தொகுதி, நீங்கள் ஒருவருக்கொருவர் மேல் ஒரு பெரிய சட்டை அடுக்குகளை வைத்திருப்பீர்கள், ஒரு வரியில் ஒன்று. சாக்ஸ் இருந்தால் காட்சி: இன்லைன்-தொகுதி, அவை அனைத்தும் இரண்டு வரிசைகளுக்கு இடையில் பாய்வதை விட கீழ் வரிசையில் அமர்ந்திருக்கும். சில டி-ஷர்ட்கள் மற்றொரு வரிசையில் தள்ளப்பட்டு, நான்காவது கோட்டை உருவாக்கும். டி-ஷர்ட்களின் நடுத்தர வரிசையின் வலதுபுறத்தில் ஒரு இடைவெளி இருக்கும்.
நான் இங்கே கோடிட்டுக் காட்டிய முறையுடன், அழகாக நிரம்பிய சூட்கேஸுடன் முடிவடைகிறோம், இது கிடைக்கக்கூடிய இடத்தை சிறப்பாகப் பயன்படுத்துகிறது.
இந்த கட்டுரை முதலில் தோன்றியது நிகர இதழ் வெளியீடு 289; அதை இங்கே வாங்கவும்!
