CSS - marginauto; - Kā tas strādā
Lietošana starpība: auto bloka elementa centrēšana horizontāli ir labi zināms paņēmiens. Bet vai esat kādreiz domājuši, kāpēc vai kā tas darbojas? Lai atbildētu uz šo jautājumu, mums vispirms ir jāizpēta, kā starpība: auto darbojas. Arī maisījumā ir tas, ko auto iespējams, veicot rezerves, ja tas darbojas vertikālā centrēšanā, un daži citi jautājumi.
Bet vispirms, ko dara auto faktiski?
Definīcija auto mainās elementiem, elementu tipi un kontekstā. Rezervēs, auto var nozīmēt vienu no divām lietām: aizņemiet pieejamo vietu vai 0 px. Šīs divas gribas definēt dažādus elementa izkārtojumus.
"Auto" Pieejamās telpas uzņemšana
Tas ir visizplatītākais starpības pielietojums auto mēs bieži sastopamies. Piešķirot auto elementa kreisajā un labajā malā tie vienādi aizņem pieejamo horizontālo telpu elementa traukā - līdz ar to elements kļūst centrēts.
Tomēr tas darbosies tikai horizontālām robežām (vairāk par. \ T kāpēc vēlāk) un arī nestrādās ar peldētu un inline elementi un pats par sevi nevar strādāt iekšā absolūts un fiksēti novietoti elementi (mēs tomēr redzēsim, kā padarīt šos darbus).
Faux Float, izmantojot pieejamo telpu
Kopš tā laika auto gan labajā, gan kreisajā malā vienādi aizņem "pieejamo" telpu, ko, jūsuprāt, notiks tad, kad vērtība būs auto tiek piešķirts tikai vienam no tiem?
Kreisās vai labās malas ar auto aizņems visu pieejamo vietu, padarot elementu izskatāmu pa labi vai pa kreisi.
“auto” Aprēķināts līdz 0px
Kā minēts iepriekš, auto nestrādās peldošos, iekšējos un absolūtos elementos. Visi šie elementi jau ir lēmumu par to izkārtojumu, tāpēc nav jāizmanto auto par peļņas normu un gaida, ka tā kļūs centrēta tieši tāpat.
Tas uzvarēs sākotnējo mērķi izmantot kaut ko līdzīgu peldēt. Tādējādi auto šajos elementos būs 0px vērtība.
auto arī nedarbosies ar tipisku bloka elementu, ja tam nav platuma. Visiem līdzšinējiem piemēriem ir platums.
Vērtības platums auto būs 0px starpības. Bloka elementa platums parasti aptver tā konteineru, kad tas ir auto vai 100% un līdz ar to rezerves auto tiks aprēķināts 0px šādā gadījumā.
Kas notiek ar vertikālajām robežām ar vērtību auto?
auto gan augšējā, gan apakšējā malā vienmēr tiek aprēķināts 0px (izņemot absolūtos elementus). W3C spec tā saka:
“Ja “margin-top” vai “malas-apakšas” ir “auto”, to izmantotā vērtība ir 0 "
Kāpēc, labi, tas ir līdz šim, noslēpums. Tas varētu būt tipiskas vertikālās lapas plūsmas dēļ lapas lielums palielinās augstumā. Tātad elementa centrēšana vertikāli savā konteinerā nepadara to par centrētu, salīdzinot ar pašu lapu, atšķirībā no tā, ka tas tiek veikts horizontāli (vairumā gadījumu).
Un varbūt tas ir šī paša iemesla dēļ, un viņi nolēma pievienot izņēmumu attiecībā uz absolūtajiem elementiem, kurus var novietot vertikāli visā lapas augstumā.
Tas varētu būt arī starpības sabrukuma efekts (blakus esošo elementu sabrukums)” starpība), kas ir vēl viens izņēmums vertikālajām robežām.
Tomēr pēdējais, šķiet, ir maz ticams gadījums - jo elementi, kas nesalauž to robežas, piemēram, pludiņi un elementi ar pārplūde citāds nekā redzams, joprojām piešķir 0px vertikālās starpības auto.
Absolūti novietotu elementu centrēšana
Tā kā notiek izņēmums absolūti novietotiem elementiem, mēs”Izmantojiet auto vērtību vertikāli un horizontāli. Bet pirms tam mums ir jāzina, kad būs starpība: auto faktiski strādā kā mēs vēlamies, lai tas būtu pilnīgi novietots elements.
Tādā gadījumā tiek ievietots cits W3C spec.
"Ja visi trīs “pa kreisi”, “platums”, un “pa labi” ir “auto”: Vispirms iestatiet “auto” vērtības “margas pa kreisi” un “labās malas” līdz 0… "
"Ja neviens no šiem trim nav “auto”: Ja abi “margas pa kreisi” un “labās malas” ir “auto”, atrisināt vienādojumu ar papildu ierobežojumu, ka abas robežas iegūst vienādas vērtības ”
Tas diezgan daudz saka, ka horizontāli auto starpības izmantot vienādas telpas, vērtības pa kreisi, platums un pa labi nevajadzētu būt auto , to noklusējuma vērtība. Tātad viss, kas mums jādara, ir dot viņiem zināmu vērtību absolūti novietotā elementā. pa kreisi un pa labi vajadzētu vienādas vērtības perfektai centrēšanai.
Specifikācijā ir minēts arī kaut kas līdzīgs vertikālām malām.
“Ja visi trīs “tops”, “augstums”, un “apakšā” ir automātiska, iestatīta “tops” statiskā stāvoklī… ”
“Ja neviens no šiem trim nav “auto”: Ja abi “margin-top” un “malas-apakšas” ir “auto”, atrisināt vienādojumu ar papildu ierobežojumu, ka abas starpības iegūst vienādas vērtības… ”
Līdz ar to ir absolūti nepieciešams centrēts vertikāli, tā tops, augstums, un apakšā vērtībām nevajadzētu būt auto.
Tagad, apvienojot visus šos, mēs to darām”Es saņemšu:
Secinājums
Ja jūs kādreiz vēlaties izskalot jūsu lapas elementu pa labi vai pa kreisi bez sekojošiem elementiem, kas tos iesaiņo (piemēram, kas notiek ar pludiņu), atcerieties, ka ir iespēja izmantot auto rezervēm.
Konvertējot elementu absolūtā veidā tā, lai to varētu vertikāli vertikāli, tā nav lieliska ideja. Ir arī citas iespējas, piemēram, flexbox un CSS transformācija, kas ir piemērotāka tiem.
