CSS: Calc ()-funktionen

digitateam





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…

Parallaxlandskap byggda helt med CSS och HTML

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

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

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

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

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

Bokning gratis bokningsmotor

Pizzerialeverans i Palma de Mallorca, Mamma Teresa

































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
















Next Post

GTA 5 utökad och förbättrad släpps den 15 mars

Att stjäla varje rubrik på webben var Rockstar Games senaste officiella bekräftelse på att nästa Grand Theft Auto-spel verkligen är under utveckling – men det var inte det enda nya avslöjandet som utvecklarna hade i rockärmen. Vi vet nu att Expanded and Enhanced kommer att lanseras den 15 mars. Trots […]

Subscribe US Now