Салыстырмалы Қызметі - бұл не? Толық сипаттама

Ұя HTML - ұзақ процесс, қатаң, бірақ өте шығармашылық. АТ жұмыспен қамтылған адамдардың көпшілігі үшін, веб-беттер орналасу қызықсыз күнделікті көрінуі мүмкін болғанына қарамастан, мұндай жағдайда үшін призвание бар мамандар, сапалы тапсырманы жүзеге асыруға ғана емес, сонымен қатар материалдық рахат процесінің алуға.

Егер сіз тәжірибелі кодер айналды бұрын Алайда, әрбір жаңадан түрлі нұсқаулар мен HTML тілі де техникалық сипаттамаларын зерделеу көп уақыт жұмсайды, және оның одақтасы туралы - CSS. дәл туралы қандай CSS, Бұл не және не «финты құлақ» Сіз алуға мүмкіндік береді, сондай-ақ оның жоғарғы қасиеттері бір - өзара орналасуы - бүгін біз сөйлесемін.

CSS не?

CSS Қысқарту «ашылмалы мәнер парақтары» ретінде орыс тіліне жазылуы және аударуға болады. бір жағынан, ол айқын көрінеді, және сөздер, және екінші жағынан - - Бұл өте оғаш естіледі жалпы мағынасы дереу түсіріледі емес. қарапайым бастайық - стилі. Бұл технология сіз, бетте сіз тек бір рет тіркеу және шексіз рет санын пайдалана аласыз көрінісін қатысты белгілі бір сипаттамаларын объектілерді тіркеуге мүмкіндік береді.

ресми аудармасы «үстел» кездейсоқ дерлік пайда сөз - іс жүзінде неғұрлым қолайлы жерде сөз «тізімдерін» немесе «тізімдерін» пайдалануға болар еді, алайда Бастапқы аударма авторлары CSS тізімін астам ұқсайды деп шештік, және біз кім мұндай оларды көріңіз қазір.

Соңында, сөз «Каскад». факт әрбір элемент аралас немесе тіпті қабаттасуы мүмкін бірнеше стильдер бола аламыз. Мұндай жағдайларда, браузер ережелер жиынтығы жүгінуге бар, олардың бірі, бірнеше стильдер болып шықты блок, пайда болуын құрайды мақсатында, мысалы, қатысты ұстанымын меншік және басқа да бар - Қызметі Абсолютті. Шын мәнінде, мұндай қақтығыстар шыдамды болуы мүмкін емес, бірақ үлкен жобаларға осындай шатасуы жиі жүреді.

бәрі атауы анық кезде Сондықтан қазір, қызметінің қарапайым мысал қарастырайық. Сіздің сайт белгілі бір жолмен әзірленген батырмаларының үлкен саны, болуы тиіс делік. Олар мұндай мөлшері, көлеңке, ашықтығы, түсі ретінде қасиеттері бар. Әрине, сіз әрбір түймені жасау, осы параметрлерді көрсетіңіз, бірақ CSS пайдалану әлдеқайда оңай болады. Іс жүзінде, сіз жоғарыда қасиеттері барлық мәндерін көрсетеді белгілі бір класс, сипаттау қажет, содан кейін, оның орнына ұзақ тізім, әр түйменің тег, содан кейін ғана браузер өзі қалаған түсті осы элементтерді түс және оларға тиісті береді, сыныбының атын көрсету қажет болады «ГЛОССА».

Қызметі меншік нені?

Біз қазір бұл бүкіл мақаланы басталды, ол үшін, мүлiктiк жағдайын тікелей өтіңіз. Егер сіз ағылшын тілінде таныс, немесе жақсы түйсігі бар болса, онда сіз қазірдің өзінде анық болуы тиіс - бұл мүліктік элементінің орнын үшін жауапты болып табылады. Шын мәнінде, ол, бірақ оның орнына нақты орнын анықтау тәсілі, бұл сипатты ол бір немесе көрші немесе тұтастай бетке арқылы қатысты басқа элементті орналастырылуға тиіс қалай браузерді айтады.

Қандай құндылықтарды Қызметі меншік болады?

Біздің мүліктік бірнеше түрлі мәндерін қабылдай алады, тек бес бар. Мұнда әрбір қысқаша сипаттамасы болып табылады:

• Қызметі иеленеді. Бұл функция ата-ана болып элементтің жағдайына деректерді көшіруге мүмкіндік береді. Сіз Салыстырмалы көрсетілген Лауазымы бар DIV болса IMG қалдыруға мән, сондай-ақ салыстырмалы орнатылады мысалы, содан кейін оған енген.
• Қызметі Статикалық. кез келген неғұрлым көрсетілмесе Бұл мән автоматты түрде барлық элементтеріне беріледі. элементтері коды аталған орынға сай және олардың орнын өзгерту мүмкіндік беретін, «оборки» түрлі үшін қол жетімді емес.
• Қызметі Абсолютті. Осы құны бойынша позиция меншік жиі ол «құбылмалы» элементін жасау үшін қажет болған жағдайларда қолданылады. меншік элементтің берілген мәнімен беттің басқа компоненттері үшін «көзге көрінбейтін» болып табылады. Біздің абсолютті элемент жоқ болса, сондай Яғни, олар орналасқан. Ол өзі әрқашан қарамастан қаншалықты сарп болды беттің, жерде болады.
• Бекітілген Қызметі. көптеген жолдармен, бұл мән абсолютті элемент ата-міндетті, ал Алайда, тіркелген оны алдында элементтердің қалған елемей, браузер экранның жоғарғы сол жақ бұрышында ғана координаттарын пайдаланады, алдыңғы ұқсас болып табылады.
• Соңында, өзара орналасуы. Бұл түрі құндылықтар ортақ «резеңке» деп аталатын таңба Бейімді жасау үшін пайдалы болуы мүмкін, ол басқа позициялау элементі қатысты мүмкіндік береді. Осы қасиеті бар, элемент бетінде өз ұстанымын өзгерту мүмкіндігін жоғалтпай, басқа «итеріп» болады.

Лауазымы жұмыс істеу әр түрлі браузерлерде

Емес, барлық браузерлер бірдей үйлесімді болып табылады. Лауазымы қабылданады кез келген шұңқырдан жоқ Интернет серфинг үшін ең баламалы бағдарламалар мәні мүлдем дұрыс болып табылады, ал «созылмалы арнайы» Internet Explorer нұсқасына байланысты, мүлікті қарастырады.

Мысалы, қазірдің өзінде браузер IE6 «жерленген» пайдалана отырып, сіз Fixed мәні пайдалануға және мұра ете алмайды - «есек», олар жай ғана оны елемейді. Алайда, жағдайды жетінші нұсқасы жақсарту бастады, және Бекітілген болғанына қарамастан қазірдің өзінде сүйікті мұрагер, өңделген «басқа браузерлерді жүктеп алу үшін браузерді,» тек өзінің сегізінші өмірге жетті.

байқаушылар қалған тыныш ортасында 90-шы жылдардың жарияланған, оның 4-вариация қасиеттерін қолдау алды опера қоспағанда бірінші нұсқасы, бар Position өңдеуге.

Javascript жылы Лауазымы жұмыс істеу

Шын мәнінде, JavaScript жылы Лауазымы мүлікпен жұмыс істеу тарихы, біз тек әділеттілік үшін енгізілді отыр. Бұл сипат атауы кез келген арнайы таңбаларды ие емес, өйткені, кез келген өзгерістер жоқ JS пайдалануға болады, мысалы, Салыстырмалы DIV орналастыру үшін, осындай жолды қамтуы тиіс: div.style.position = 'салыстырмалы.

Көріп отырғандарыңыздай, бұл өте қарапайым.

Неге Салыстырмалы еңбегі ерекше назар орналастырыңыз?

«Стилі лауазымы: салыстырмалы» мәнін пайдалана отырып, қоршаған элементтеріне сыпайы айтқанда, «түкіріп», мүліктік құндылықтар Лауазымы ең ал дұрыс пайдалану экранның бүкіл мазмұнын қатты «қисық шығады» мүмкін, себебі, әрқашан, тұтастай алғанда бүкіл бетінде туралы есте сақтау керек .

оның қолдану автоматты түрде барлық мазмұн беттерін әсер етеді, өйткені Сонымен қатар, осы сипат тек, сіз оңай бекітілген жобалау бейімдеу айырбастауға мүмкіндік береді. Сонда біз әлі күнге дейін осы мәнді пайдаланып мысалдар мен қателерді қарастыру уақыт бар, және сіз тәжірибеде оның материалдық маңыздылығын көресіз.

Кезде, салыстырмалы орналастыру пайдалану керек?

беттердің HTML дәстүрлі макетке Сонымен қатар, Лауазымы Салыстырмалы жиі қызықты эффектілерді жасау үшін пайдаланылады. Егер элемент біртіндеп оның аумағынан тыс барды, керісінше, бетте «келді» немесе келсе, Мысалы, ол осы сипат сіз осы «трюк» іске асыру көмектесе аласыз дәл болып табылады.

Бұл «фокустар» Егер белгілі бір айнымалы құнының циклдік өзгеруі реттеуге мүмкіндік береді CSS3 қасиеттері арқылы, сіз прогрессивті қолдану мақсат болса, JavaScript арқылы жүзеге асырылып, немесе.

Сонымен қатар, ықтимал кейбір жағдайларда «гибридті» мәндерін Қызметі Салыстырмалы құру. CSS емес, бірақ сол уақытта сіз орынға тәрізді бірдеңе орнатуға мүмкіндік береді: абсолютті және салыстырмалы, бірақ кейбір айлалар көмегімен, бұл әсерге қол жеткізу үшін әлі де мүмкін. Бұл тәсіл, сіз сияқты нәрсе кешенін жасау керек жағдайларда пайдалы болуы мүмкін қалқымалы немесе қалқымалы мәзірде. мысалдар ескере отырып, біз осындай құрылымын сипаттамасы береді «гибридтік».

салыстырмалы рейтингін пайдалану мысалдары

Лауазымы Салыстырмалы - бұл өте оңай, бірақ сіз қызықты эффектілерді жүзеге асыруға мүмкіндік береді икемді құралы. пайдасыз коды үлгіні жазу үшін уақыт және орын босқа емес мақсатында, біз сіздің сайт немесе арнайы беттерді безендіруге болады бірнеше ауызша алгоритмдер, ұсыну.

«Таусылып» желісі бастайық. Сіз бұл экранның сол жақ шетінен, өйткені «туристік» болады және баяу оң жағында оны жылжыту элементі қажеттілігі бар делік. Мұндай «тетігін» іске асыру үшін ұстанымын орнатуға тиіс: салыстырмалы; сол жақ: -100px, -100 - блок енін құрайтын пиксель шамамен саны. Бұл стиль «бастапқы жағдайы» оны орналастыру, сіз экранның тыс бірлігін жасыру үшін мүмкіндік береді. Енді сіз, себебі ол браузер терезесінің ені минус элементінің ені тең бола бермейді, сондай-ақ бірлігіне сипат мәнін қалдырды сайын бірнеше миллисекунд артады сценарийді пайдалануға болады. нәтижесі сол жақ шетіне шығып бірлігі болып табылады, экран бойымен прокат және оның оң қолында «тұрақта тұрған».

Тағы бір мысал, сіз «салыстырмалы-абсолютті» элементтерін жасауға мүмкіндік береді. Мысалы, сіз Қызметі салыстырмалы бар, тағы бір ішіндегі абсолютті енгізуге болады. Нәтижесінде, біз абсолютті жазылған Көлемін ие емес «салыстырмалы» блогын бар, қазір алдыңғы элементтің тәуелсіз жағдайы таныта алады.

Типтік қателіктер Қызметі салыстырмалы пайдаланғанда

Ең көп таралған қате Қызметі салыстырмалы пайдаланған кезде көптеген веб-дизайнерлер кез келген жерде болуы мүмкін блок, орын қалдырады қабілеті туралы ұмытуға болады. Егер сіз өте үлкен болса, мысалы, экранның тыс және салыстырмалы орналастыру бар орналастырылған, оның орнына тоқтап поглядеть «тесік» болады. Алайда, тіпті осы сипат кейде белгілі бір қолайсыздықтар оның блоктар барлық біртіндеп жоғарғы орында орналастырылған сайттың, бойынша «өзін-өзі құрастыру» қызықты әсерін жасау, мысалы, жақсы үшін пайдалануға болады жасайды: 0; сол жақ: 0; T. е., оның бастапқы орналасуы.