Gosodwch Perthynas - beth ydyw? disgrifiad manwl

Nythu HTML - proses hir, yn drylwyr, ond yn greadigol iawn. Er gwaethaf y ffaith bod ar gyfer y rhan fwyaf o bobl a gyflogir mewn TG, gall tudalennau gwe cynllun yn ymddangos yn rheolaidd yn ddiflas, arbenigwyr sydd â galwedigaeth ar gyfer achos o'r fath, nid yn unig yn ansoddol gyflawni'r dasg, ond hefyd yn ei gael gan y broses o bleser diriaethol.

Fodd bynnag, cyn i chi ddod yn godiwr profiadol, pob newydd-ddyfodiad yn treulio llawer o amser yn astudio amrywiol cyfarwyddiadau a manylebau y ddwy iaith HTML, ac ar ei gynghreiriad - CSS. Ynglŷn union beth CSS, beth ydyw a beth "clustiau feint" yn eich galluogi i fynd i fyny, yn ogystal ag un o'i briodweddau top - Sefyllfa Perthynas - heddiw byddwn yn siarad.

Beth yw CSS?

Gellir Talfyriad CSS eu trawsgrifio a chyfieithu i mewn i Rwsieg fel "taflenni arddull rhaeadrol". Mae'n swnio'n eithaf rhyfedd - ar y naill law, mae'n ymddangos yn glir, a geiriau, ac ar y llaw arall - nid yr ystyr gyffredinol yn cael ei ddal ar unwaith. Gadewch i ni ddechrau gyda'r syml - gyda steil. Mae'r dechnoleg hon yn caniatáu i chi atodi gwrthrychau ar y dudalen, nodweddion penodol ynghylch ymddangosiad y gallwch ond cofrestru unwaith ac yn defnyddio nifer anfeidrol o weithiau.

Mae'r gair "tabl" yn y cyfieithiad swyddogol yn ymddangos ar ddamwain bron - yn wir yn fwy priodol yma fyddai i ddefnyddio'r gair "rhestrau" neu "rhestrau", fodd bynnag, mae'r awduron y cyfieithiad gwreiddiol penderfynu bod y CSS yn edrych fel mwy na rhestr, a pwy ydym ni o'r fath yn awr i roi cynnig arnynt.

Yn olaf, mae'r gair "Cascade." Y ffaith yw y gall pob elfen wedi sawl arddulliau y gellir eu cymysgu neu hyd yn oed yn gorgyffwrdd. Mewn achosion o'r fath, mae'r porwr wedi troi at set o reolau, er mwyn cyfansoddi golwg y bloc, a drodd allan i fod yn nifer o arddulliau, gydag un ohonynt, er enghraifft, mae gan eiddo cymharol Sefyllfa, a'r llall - Sefyllfa Absolute. Yn wir, ni all gwrthdaro o'r fath yn cael ei oddef, ond mewn prosiectau mawr ddryswch o'r fath yn digwydd yn aml iawn.

Felly nawr, pan fydd popeth yn glir o'r enw, gadewch i ni edrych ar enghraifft syml. Lets 'ddeud y dylai eich safle fod nifer fawr o fotymau, a gynlluniwyd mewn ffordd arbennig. Mae ganddynt briodweddau megis maint, cysgod, didreiddedd, lliw. Wrth gwrs, gallwch nodi paramedrau hyn, gan greu pob botwm, ond mae'n llawer haws i'w defnyddio CSS. Yn ymarferol, mae angen i chi ddisgrifio dosbarth penodol, sy'n rhestru'r gwerthoedd pob eiddo uchod, ac yna, yn hytrach na rhestr hir, dim ond angen y tag pob botwm i nodi enw'r dosbarth, yna bydd y porwr ei hun yn lliwio elfennau hyn yn y lliw a ddymunir ac yn rhoi iddynt priodol "sglein".

Beth mae'r eiddo Swydd?

Rydym bellach yn symud ymlaen yn uniongyrchol i'r Sefyllfa eiddo, er mwyn a ddechreuwyd yr erthygl gyfan. Os ydych yn gyfarwydd â'r iaith Saesneg, neu os oes gennych greddf da, yna dylech eisoes fod yn glir - yr eiddo hwn yn gyfrifol am y lleoliad yr eitem. Yn wir, fel y mae, ond yn hytrach yn penderfynu ar y lleoliad penodol, yr eiddo hwn yn dweud wrth y porwr sut y dylid ei gosod un neu elfen arall mewn perthynas â cyfagos neu ar draws y dudalen gyfan.

Pa werthoedd y gall yr eiddo Swydd?

Mae ein eiddo yn gallu derbyn nifer o wahanol werthoedd, dim ond pump. Dyma ddisgrifiad byr o bob un:

• Etifeddu sefyllfa. Mae'r nodwedd hon yn eich galluogi i copi y data ar y safle'r elfen sydd yn rhiant. Er enghraifft, os oes gennych div gyda cymharol Swydd penodol, ac yna aeth i mewn iddo gyda gwerth etifeddu IMG hefyd yn cael eu gosod i cymharol.
• Gosodwch Static. Mae'r gwerth hwn yn cael ei roi i bob elfen yn awtomatig, oni nodir mwyach. Yr elfennau ffitio i mewn sefyllfa fel y crybwyllwyd yn y cod ac nid ydynt ar gael ar gyfer amrywiaeth o "frills", gan ganiatáu i newid eu sefyllfa.
• Swydd Absolute. Erbyn gwerth hwn yr eiddo Swydd yn cael ei ddefnyddio yn aml mewn achosion lle mae angen creu elfen "fel y bo'r angen". Gyda gwerth a roddir o'r eitem eiddo yn "anweladwy" ar gyfer y cydrannau eraill y dudalen. Hynny yw, maent yn cael eu trefnu fel pe nad yw ein elfen absoliwt yn bodoli. Bydd Ef ei hun bob amser fod ar waith, waeth pa mor bell wedi'u sgrolio dudalen.
• Swydd Sefydlog. Mewn sawl ffordd, y gwerth hwn yn debyg i'r un flaenorol, fodd bynnag, er bod yr elfen absoliwt yn rhwym i'r rhiant, sefydlog defnyddiau unig gyfesurynnau y gornel chwith uchaf y sgrin porwr, gan anwybyddu gweddill yr elfennau a'i rhagflaenodd.
• Yn olaf, safle cymharol. Mae hyn yn caniatáu i werthoedd math elfen lleoli perthynas i'r llall, a all fod yn ddefnyddiol ar gyfer creu addasol marcio a elwir yn gyffredin "rwber". Gyda hyn eiddo, bydd yr eitem "gwthio" y llall, heb golli'r gallu i newid eu safle ar y dudalen.

Gweithio gyda Swydd yn wahanol borwyr

Nid yw pob porwyr yr un mor gydnaws. Er bod y rhan fwyaf o raglenni eraill ar gyfer syrffio y Rhyngrwyd heb unrhyw rwystrau canfyddedig gwerth Swydd yn hollol wir, "cronig arbennig» Internet Explorer yn ystyried yr eiddo, yn dibynnu ar ei fersiwn.

Er enghraifft, gan ddefnyddio'r eisoes yn "gladdu" y porwr IE6, ni allwch ddefnyddio'r gwerth Sefydlog a Etifeddu - "asyn" maent ei hanwybyddu. Fodd bynnag, er gwaethaf y ffaith bod y seithfed fersiwn o'r sefyllfa dechreuodd i wella, ac Sefydlog brosesu eisoes, i Etifeddu annwyl "porwr i lawrlwytho porwyr eraill," cyrraedd yn unig yn ei wythfed ymgnawdoliad.

Mae gweddill yr arsylwyr yn dawel trin Swydd gyda'r fersiwn cyntaf, ac eithrio Opera, sydd wedi cael y gefnogaeth yr eiddo yn ei 4 amrywiadau, a gyhoeddwyd yn y nghanol y 90au.

Gweithio gyda Swydd yn Javascript

Yn wir, y stori o sut i weithio gyda'r eiddo Swydd yn Javascript wedi ei, rydym wedi cynnwys dim ond er mwyn gwedduster. Gan nad oes gan unrhyw gymeriadau arbennig yn y teitl yr eiddo hwn, gallwch ddefnyddio'r JS heb unrhyw newidiadau, er enghraifft, i osod y Safle div cymharol, dylid cynnwys llinell fel hyn: div.style.position = 'perthynas'.

Fel y gwelwch, mae'n eithaf syml.

Pam Swydd rinweddau cymharol sylw arbennig?

Er bod y rhan fwyaf o'r Sefyllfa gwerth eiddo, a dweud y lleiaf, "poeri" ar yr elfennau o amgylch, gan ddefnyddio'r gwerth "sefyllfa steil: perthynas", dylai gofio bob amser am y dudalen gyfan yn ei gyfanrwydd, gan fod defnydd amhriodol gall gryf "gogwydd" holl gynnwys y sgrîn .

Yn ogystal, yr eiddo hwn yn unig yn caniatáu i chi yn hawdd troi addasol dylunio sefydlog, gan y bydd ei gais yn awtomatig yn effeithio ar yr holl dudalennau cynnwys. Yna rydym yn dal i gael amser i ystyried yr enghreifftiau a gwallau defnyddio'r gwerth hwn, a byddwch yn gweld ei arwyddocâd pendant yn ymarferol.

Pryd ddylech chi ddefnyddio safle cymharol?

Yn ychwanegol at y cynllun confensiynol o dudalennau HTML, Cymharol Swydd ddefnyddir yn aml i greu amrywiaeth o effeithiau diddorol. Er enghraifft, os ydych am eitem "Daeth" ar dudalen neu, i'r gwrthwyneb, yn raddol yn mynd y tu hwnt i'w thiriogaeth, mae'n union y gall yr eiddo hwn yn eich helpu i weithredu'r hyn yn "castia".

Mae'r rhain yn "driciau" yn cael eu rhoi ar waith drwy Javascript, neu, os ydych yn anelu at osod cynyddol, trwy briodweddau CSS3, sy'n eich galluogi i addasu i'r newid cylchol yng ngwerth newidyn penodol.

Yn ogystal, mewn rhai achosion posibl i greu Perthynas "hybrid" gwerthoedd Swydd. CSS, er nad ar yr un pryd yn caniatáu i chi osod rhywbeth fel safle: perthynas absoliwt, ond trwy ddefnyddio rhai triciau, mae'n dal yn bosibl i gyflawni'r effaith hon. Gall y dull hwn fod yn ddefnyddiol mewn achosion lle mae angen i chi greu rhywbeth cymhleth fel un tooltip neu ddewislen pop-up. O ystyried yr enghreifftiau, byddwn yn rhoi disgrifiad o strwythur fath "hybrid."

Mae enghreifftiau o ddefnyddio'r safle cymharol

Gosodwch Perthynas - mae'n eithaf syml, ond offeryn hyblyg sy'n caniatáu i chi i weithredu amrywiaeth o effeithiau diddorol. Er mwyn peidio â gwastraffu amser ac yn rhoi i ysgrifennu templed cod ddiwerth, rydym yn cyflwyno nifer o algorithmau llafar, a all addurno eich safle neu dudalennau penodol.

Gadewch i ni ddechrau gyda llinell "rhedeg allan". Tybiwch fod gennych angen elfen a fydd yn "teithio" oherwydd bod y ymyl chwith y sgrin ac yn araf yn symud i'r ochr dde. I weithredu "mecanwaith" o'r fath fod yn gosod safle: cymharol; chwith: -100px, lle mae -100 - mae'r nifer bras y bicseli sy'n ffurfio'r lled bloc. Bydd hyn yn arddull yn caniatáu i chi i guddio y tu uned y sgrin, ei roi yn y "cychwyn sefyllfa". Nawr fe allwch chi ddefnyddio sgript a fydd yn cynyddu bob ychydig o milieiliadau gadael werth eiddo bob uned ar yr amod nad yw'n dod hafal i lled y ffenestr porwr minws lled yr elfen. Y canlyniad yw uned sy'n dod allan o ymyl chwith, rholio ar draws y sgrîn a "wedi eu parcio" yn ei law dde.

Enghraifft arall yn eich galluogi i greu elfennau "perthynas-absoliwt". Er enghraifft, gallwch fynd i mewn absoliwt y tu mewn un arall, ar ôl cymharol Swydd. O ganlyniad, rydym yn cael "perthynas" bloc sydd heb maint y mae'r absoliwt wedi'i arysgrifio, yn awr yn gallu amlygu ei hun mewn sefyllfa annibynnol o'r elfen blaenorol.

camgymeriadau nodweddiadol wrth ddefnyddio Perthynas Sefyllfa

Y camgymeriad mwyaf cyffredin wrth ddefnyddio'r Perthynas Sefyllfa yw bod llawer o dylunwyr gwe anghofio am y gallu i gadw lle yn yr uned, y gellir eu lleoli yn unrhyw le. Er enghraifft, os oes gennych eithaf mawr, gosod y tu allan y sgrin a chael safle cymharol, yn ei lle a fydd yn gaping "twll". Fodd bynnag, hyd yn oed yr eiddo hwn weithiau yn creu gall rhai anghyfleustra ei ddefnyddio ar gyfer da, er enghraifft, gan greu effaith diddorol o "hunan-cydosod" y safle, lle mae pob un o'i flociau yn cael eu gosod yn raddol yn y safle uchaf: 0; chwith: 0; t. d. ei leoliad gwreiddiol.