CSS - marginauto; - Kaip tai veikia
Naudojimas paraštė: auto centrinis elementas horizontaliai yra gerai žinomas metodas. Bet ar jūs kada nors susimąstėte, kodėl ar kaip tai veikia? Norėdami atsakyti į tai, pirmiausia turime pažvelgti į tai, kaip marža: automatinis darbas. Taip pat mišinyje yra kas automatinis galbūt gali atlikti paraštes, jei jis veikia vertikaliai centruojant ir kelis kitus klausimus.
Bet pirma, Ką daro automatinis iš tikrųjų?
Apibrėžimas automatinis skiriasi elementus, elementų tipai ir kontekste. Į paraštes, automatinis gali reikšti vieną iš dviejų dalykų: užimti turimą vietą arba 0 px. Šios dvi valios nustatyti skirtingus elemento išdėstymus.
„Auto“ Galimos erdvės priėmimas
Tai dažniausiai naudojamas maržos panaudojimas automatinis mes dažnai susiduriame. Priskiriant automatinis į kairę ir dešinę elemento paraštes jie vienodai užima turimą horizontalią erdvę elemento talpykloje, taigi elementas tampa centruotas.
Tačiau tai veiks tik horizontalių parašų atveju (daugiau kodėl vėliau) ir taip pat neveiks su plaukiojančiu ir inline elementai ir pats savaime negali dirbti į absoliutus ir pastoviai išdėstyti elementai (mes matysime, kaip padaryti šiuos darbus).
„Faux Float“, naudodamiesi turima erdve
Nuo automatinis tiek dešinėje, tiek kairėje paraštėse užima lygią „turimą“ erdvę, kas, jūsų manymu, atsitiks, kai vertė bus automatinis suteikiama tik vienai iš jų?
Kairė arba dešinė paraštė su automatinis užims visą „prieinamą“ erdvę, kad elementas atrodytų išplautas į dešinę arba į kairę.
“automatinis” Apskaičiuota iki 0px
Kaip minėta anksčiau, automatinis neveiks plaukiojančiose, eilutėse ir absoliučiuose elementuose. Visi šie elementai jau yra nusprendė dėl jų išdėstymo, todėl nenaudojamas naudojimas automatinis už ribas ir tikėdamiesi, kad ji taps tokia pati.
Tai nugalės pradinį tikslą naudoti kažką panašaus plūdė. Taigi automatinis šiuose elementuose bus 0px reikšmė.
automatinis taip pat neveiks tipinis bloko elementas, jei jis neturi pločio. Visi pavyzdžiai, kuriuos aš jums parodiau, turi plotį.
Vertės plotis automatinis turėsiu 0px maržos. Blokinio elemento plotis paprastai apima jo konteinerį, kai jis yra automatinis arba 100% ir taigi ir marža automatinis bus apskaičiuotas 0px tokiu atvėju.
Kas atsitinka vertikalioms paraštėms su verte automatinis?
automatinis tiek viršutinėje, tiek apatinėje paraštėse visada skaičiuojama 0px (išskyrus absoliučius elementus). W3C specifikacija sako:
“Jei “margin-top” arba “paraštės apačia” yra “automatinis”, jų panaudota vertė yra 0 "
Kodėl, gerai, kad iki šiol, paslaptis. Tai gali būti dėl tipinio vertikalaus puslapio srauto, kur puslapio dydis padidėja. Taigi, centruojant elementą vertikaliai į konteinerį, jis nebus rodomas centre, palyginti su pačiu puslapiu, skirtingai nuo to, kai jis daromas horizontaliai (daugeliu atvejų).
O gal dėl to, kad dėl tos pačios priežasties jie nusprendė įtraukti išimtį dėl absoliučių elementų, kurie gali būti vertikaliai sutelkti visą puslapio aukštį.
Tai taip pat gali būti dėl maržos žlugimo efekto (gretimų elementų žlugimo)” maržos), kuri yra dar viena vertikalių parašų išimtis.
Tačiau pastarasis atrodo mažai tikėtinas atvejis - nes elementai, kurie nesumažina jų ribų, kaip plūdės ir elementai su perpildymas kitaip nei matomas, vis dar priskirti 0px vertikalias paraštes automatinis.
Visiškai pozicionuotų elementų centravimas
Kadangi atsitinka absoliučiai išdėstytų elementų išimtis, mes”Naudosite automatinis vertikaliai vertikaliai ir horizontaliai. Bet prieš tai turime išsiaiškinti, kada bus paraštė: auto iš tikrųjų dirbame taip, kaip norime, kad jis būtų visiškai pozityviame elemente.
Tai yra kita W3C specifikacija:
"Jei visi trys iš “kairėje”, “plotis”, ir “teisė” yra “automatinis”: Pirmiausia nustatykite “automatinis” vertės “margas kairėje” ir “paraštė-dešinė” iki 0… "
"Jei nė vienas iš trijų nėra “automatinis”: Jei abu “margas kairėje” ir “paraštė-dešinė” yra “automatinis”, išspręsti lygtį su papildomu suvaržymu, kurį du skirtumai turi lygias vertes “
Tai gana daug sako horizontaliai automatinis maržos užimti lygias erdves vertės kairėje, plotis ir teisė neturėtų būti automatinis , jų numatytąją vertę. Taigi, mes turime tik suteikti jiems tam tikrą vertę visiškai pozityviame elemente. kairėje ir teisė turėtum turėti lygios vertės tobulam centravimui.
Specifikacijoje taip pat paminėta kažkas panašaus į vertikalias paraštes.
“Jei visi trys iš “viršuje”, “aukštis”, ir “apačioje” yra automatinis, nustatytas “viršuje” į statinę padėtį… ”
“Jei nė vienas iš trijų nėra “automatinis”: Jei abu “margin-top” ir “paraštės apačia” yra “automatinis”, išspręsti lygtį su papildomu suvaržymu, kurį abi maržos gauna lygiomis vertėmis… ”
Taigi, kad būtų absoliutus elementas vertikaliai, jos viršuje, aukštis, ir apačioje vertės neturėtų būti automatinis.
Dabar derindami visus šiuos dalykus tai mes”Gausiu:
Išvada
Jei kada nors norėsite, kad jūsų puslapio elementas būtų nukreiptas į dešinę arba į kairę, nepažeidžiant šių elementų (pvz., Kas vyksta plūduriu), atminkite, kad yra galimybė naudoti automatinis už maržas.
Konvertuojant elementą į absoliučią, kad jis būtų vertikalus, gali būti neįmanoma. Yra ir kitų variantų, pavyzdžiui, „flexbox“ ir „CSS“ transformacijos, kurios tinka tiems.
