Share
Vi har bygget en komplett guide for å hjelpe deg med å lære CSS, enten du er bare i gang med det grunnleggende eller du vil utforske mer avansert CSS.
Hei. Mitt navn er Cory. Jeg har litt besettelse. Jeg har vært avhengige av rutenett systemer i mange år nå. Faktisk bidro jeg til å gjøre en ganske populær en som heter Jeet. Jeg har alltid elsket matematikken involvert med å plassere ting på riktig måte.
Jeg tror vi kan alle enige om at faste griller har gått veien til dinosaur til fordel for væskegitter, men det var alltid ting som bugged meg om væskenettet. For eksempel, det er ingen måte å ha en rende på toppen og bunnen som er like stor som en renner til venstre og høyre. Seriøst, prøv det.
Og det er ingen måte å bo på ubestemt tid uten å passere en slags sammenheng sammen med avstanden din. For eksempel, i Jeet må du skrive kolonne (1/3 1/2) hvor 1/2 er størrelsen på det inneholdende elementet. Dette blir ganske hårete når du har nestet ned tre eller fire ganger, og du har deklarasjoner som ser ut som kolonne (1/4 1/3 1/2 1/2). Æsj. Det er ikke bare Jeet heller, hvert preprosessorbasert rutenett har dette problemet.
Og Bootstrap? Ikke få meg startet på hvor mange ekstra elementer du trenger i oppslaget ditt bare for å få rutenettet ditt til å fungere - det er feilaktig hvis ingenting annet. Eller det faktum at du trenger enda flere elementer i oppslaget ditt hvis du skal sette bakgrunnsfarger på elementer. Her er et eksempel på det lille problemet i form av et galleri.
Argh! Selv Flexbox ser ikke ut til å tilby noe nytt annet enn praktisk måte å vertikalt sentrere ting på.
Etter den hvirvelvindsturen om hva som er galt med gridene i dag, hva er en gridobsessor ment å gjøre?
Vi kan bruke calc () i vårt CSS, så hva gjør det?
"Med calc () kan du utføre beregninger for å bestemme CSS-eiendomsverdier." - MDN
Ikke bare det, men vi kan kombinere enheter med kalk! Det betyr at hvis vi vil ha et rutenett for å ha fire kolonner per rad med en 20px renner mellom dem, kan vi skrive en kombinasjon av prosentvis og pikselverdier som bredde: kalk (25% - 20px). Hvor fantastisk er det?
Her er noen markup-syv kattunge bilder i en inneholder seksjon:
Deretter bruker vi noen styling til bildene:
img float: left; bredde: kalk (25% - 20px); margin: 10px;
Dette sørger for at hvert bilde er nøyaktig 25% bredden på foreldren min, minus 20px, noe som gjør det mulig for vår renner til venstre og høyre. En margin på 10 px rundt så plasserer bildet perfekt sentrert i "kolonnen".
Fire kolonner av kattunger Legg merke til hvordan avstanden på toppen og bunnen er den samme som avstanden til venstre og høyre? Vakker.
La oss abstrahere dette bare litt mer for de av oss som hellere vil vise beregningen annerledes: bredde: calc (100% * 1/4 - 20px);
Igjen gir dette oss fire perfekte kolonner med 20px renner. Vi kan også bruke medieforespørsler for å endre antall kolonner avhengig av visningsbredde:
img float: left; margin: 10px; bredde: calc (100% * 1/4 - 20px); @media (maksimal bredde: 900px) img bredde: calc (100% * 1/3 - 20px); @media (maksimal bredde: 600px) img bredde: calc (100% * 1/2 - 20px); @media (maksimal bredde: 400px) img bredde: calc (100% - 20px);
År med besettelse ble helt bortkastet av denne vakre, lille CSS-regelen. Farvelnettet. Hei calc.
Det ville ikke være rettferdig å avrunde denne korte opplæringen uten å fortelle deg hvor og når du kan bruke calc (). Vanlige mistenkte spiller oppfangning (IE9 er nesten der, men ignorerer calc () når display: table benyttes). Men ser fremover dette er et veldig kraftig CSS-verktøy.
Ta en titt på http://caniuse.com/#feat=calc for mer informasjon.
Accentsconagua
