När vi utformar en responsiv webbplats måste vi ta hänsyn till det nu stora utbudet av enheter som vårt arbete kommer att visas på och de respektive variationer av upplösningar som det måste anpassas till.
Calc () är en av de css-egenskaper som förenklar vårt arbete och låter oss undvika att använda JavaScript, vilket gör att vi kan utföra beräkningar direkt i stilmallanvänder flera måttenhet.
De beräkningar som kan utföras involverar användningen av de fyra huvudoperatorerna: +, –, *, / .
På den syntaktiska nivån måste två faktorer beaktas:
1. Det är möjligt, använda olika måttenheter. Inte bara px med px, därför, utan också px med em,% och så vidare.
2. Driftskylten ska alltid omges av ett vitt utrymme.
Så det är skrivet så här
bredd: calc(100% – 300px)
Efter att ha gjort de nödvändiga lokalerna, låt oss nu se några exempel.
Vertikal inriktning centrerad
Om vi vet höjden på elementet tillåter CSS Calc oss att få en vertikal justering i mitten.
calc (50vh – 1/2 elementhöjd)
50vh är alltid halva höjden av fönstret: på så sätt placerar vi elementet halvvägs, nedåt i förhållande till skärmen, men det representerar inte det absoluta centrumet eftersom vi inte har tagit hänsyn till objektets höjd.
Halva höjden på föremålet måste tas bort för att få det slutliga resultatet.
Vedi su CodePen Calc() – Vertical Center av Vincent Pickering (@vipickering)
Vätskegaller jämfört med ett element med fast bredd
Detta är det typiska fallet när man designar en webbplats med en sidospalt med fast bredd.
Storleken på huvudelementet, det vill säga vår vätskebehållare, kommer att beräknas enligt formeln:
calc (100 % – element 2 bredd)
Vedi su CodePen Calc() – 100 % bredd och fast bredd element av Vincent Pickering (@vipickering)
Positionera bakgrunden från det nedre högra hörnet
Ibland behöver du placera en bakgrundsbild nära det nedre högra hörnet av en behållare, men inte för mycket …
Calc () kommer också till vår hjälp i det här fallet, vilket gör att vi kan lösa vårt problem utan att använda ytterligare behållare (som var fallet tidigare).
calc (100% – önskad stoppning)
Vi använder calc för att placera bilden hela vägen till höger och tar sedan bort önskad stoppning.
Vedi su CodePen CSS Calc – Bakgrundspositionering från höger
100 % behållare med jämnt fördelade underlådor
Ett ganska vanligt beslut är att ha flera behållare/lådor inuti en överordnad behållare.
Bredden på de interna behållarna kommer att beräknas som en procentandel av den på den överordnade behållaren, och de kommer att placeras på samma avstånd från varandra.
För att uppnå detta räcker det vanligtvis att tilldela en bredd på 33%.
Det vi kan uppnå med Calc () är extra flexibilitet för interna behållare. Om du till exempel ville lägga till kanter till varje ruta, hjälper Calc ()-funktionen dig.
bredd: calc (100% / antal lådor – total storlek på marginalen);
Behållarna kommer alla att vara på samma avstånd i sin överordnade behållare och är förberedda för att lägga till ytterligare modifieringar såsom kanter eller marginaler.
Vedi su CodePen CSS Calc – lådor alltid en %ålder av sin behållare
100 % container och negativa marginaler
Låt oss höja nivån och komplicera vårt liv: ett underordnat element med 100 % bredd jämfört med en moderbehållare som har negativ marginal.
Återigen, Calc () är för oss.
width: calc(100% + margin width);
Här ökar vi helt enkelt behållarens bredd för att ta hänsyn till det negativa värdet.
Vedi su CodePen Calc() – Flud Width, med negativa marginaler
Quick Grid Layout (endast för demo …)
Detta är en teknik som verkligen inte är att rekommendera för ett livesystem, men om du behöver en snabb demo, med calc kan du mycket snabbt bygga ett rudimentärt rutsystem på några få rader.
bredd: calc (100 % / totalt antal kolumner i en rad *)
vi måste bara lägga till:
.col-1 { width:calc(100% /5*1); }
.col-2 { width:calc(100% /5*2); }
.col-3 { width:calc(100% /5*3); }
Etc..
Vedi su Code Pen Calc() – Quick and Dirty Grid System
Bild med 200 grader från Pixabay
Relaterade artiklar
Flexbox, kort praktisk guide
I den här artikeln kommer vi att lära oss hur du hanterar elementen på vår webbplats mer effektivt och effektivt tack vare Flexbox-egenskapen. Men var försiktig, vi pratar inte om en enkel fastighet …
Java Design Pattern: Prototyp Pattern
Vi ska nu prata om ett skapande mönster som gör att vi kan “kopiera med klassen”. Ja, även om det låter konstigt så är den grundläggande uppgiften för detta mönster att kopiera. Jag pratar…
Java Design Pattern: Builder Pattern
Låt oss idag tala om ett skapande mönster som i många situationer kan representera ett giltigt alternativ till konstruktion av objekt med hjälp av konstruktörer: Byggmästarmönstret. Behovet av att införa mekanismer …
Java Design Pattern: Factory Pattern
För att fortsätta diskursen om designmönster som startade tidigare, låt oss gå idag för att se ett annat mönster som är allmänt använt: Factory Method Pattern. GoF (Gang of Four Design Patterns) definierar det så här: Det definierar …
Java: Introduktion till designmönster: Singleton
Alla med ens den minsta programmeringserfarenhet kommer att ha insett hur återkommande problem är. Faktum är att vi ofta hittar problem med samma mönster men med olika sammanhang. Till exempel en…
Introduktion till animering av polygoner med css
Under lång tid har vi webbutvecklare varit tvungna att resignera med de grundläggande geometriska strukturerna: rektangulära block. Så när klippning introducerades i CSS var vi mycket glada. Berätta sanningen … Men vad är det …
Platt UI Design – 8 inspirerande sajter
I det här inlägget erbjuder vi dig en samling professionella platta mallar, perfekta för att skapa webbplatser med en enkel, ren men samtidigt fängslande design. Bryggeri Eller hur man gör ett gott intryck med en vän genom att bjuda in honom till …
HTML5: L’elemento track
Spårelementet i HTML5 låter dig lägga till text i dina mediespelande filer och visa den i HTML5-videospelaren, utan behov av skript eller ytterligare programvara. Texten kan innehålla…
Google I/O 2014: nyheterna
2 dagar, 6 tusen utvecklare: årets mest efterlängtade Google-evenemang, Google I / O, förrådde inte förväntningarna på kvällen, som förutsåg, som huvudrätter, lanseringen av Android 5.0 …
16 webbplatser för att ladda ner gratis vektorbilder
Vektorbilder är viktiga för alla som är involverade i grafik och webbdesign. Det kännetecken som skiljer en vektorbild från en normal, till exempel ett fotografi, är att …
Skapa animerade banners med CSS3
Har du krävande kunder som “fortfarande” ber dig om livliga, gnistrande flashbanners? Om du är trött på att svara att blixten nu har gått i pension kan du föreslå en lösning …
projekt
Vi använder våra egna och tredje parts cookies för att förbättra våra tjänster, sammanställa statistisk information och analysera dina surfvanor. Detta gör att vi kan anpassa innehållet vi erbjuder och visa dig annonser som är relaterade till dina preferenser. Genom att klicka på “Acceptera alla” samtycker du till lagring av cookies på din enhet för att förbättra navigeringen på webbplatsen, analysera trafik och hjälpa våra marknadsföringsaktiviteter. Du kan också välja “Endast systemcookies” för att endast acceptera de cookies som behövs för att webbplatsen ska fungera, eller så kan du välja de cookies du vill aktivera genom att klicka på “Inställningar”. Översatt med www.DeepL.com/Translator (gratisversion) “eller” Avvisa “.
Acceptera endast alla systemcookies Konfiguration
Alltid aktiv
Strikt nödvändiga cookies
Dessa cookies är nödvändiga för att webbplatsen ska fungera och kan inte inaktiveras i våra system. De ställs i allmänhet bara in som svar på din serviceförfrågan, som att ställa in dina integritetsinställningar, logga in eller fylla i formulär. Det är möjligt att ställa in webbläsaren för att blockera eller varna användaren för dessa cookies, men vissa delar av sajten kommer inte att fungera. Dessa cookies lagrar ingen personligt identifierbar information
