Elementets höjd och breddär beräknade värden. Varje element på en webbsida bildar ett rektangulärt område, som i sin tur består av flera områden − innehållsområden, utfyllnadsområden, ramområde Och fältområden element.
Mellan elementets innehåll och dess gräns finns indrag stoppning , utanför elementets gräns - fält marginal . Varje element har ett innehållsområde, andra områden är valfria.
Ris. 1. Blockmodell av elementet Egenskapen height anger höjden på blockelementets innehåll och har ingen effekt på visning av inline-element: inline; . Höjden på inline-element är lika med höjden på deras innehåll. Negativa värden är inte tillåtna. Fastigheten går inte i arv.
Syntax
P (höjd: 100px;)
Egenskapen width anger bredden på blockelementets innehåll och har ingen effekt på visning av inline-element: inline; . Bredden på inline-element är lika med bredden på deras innehåll. Negativa värden är inte tillåtna. Fastigheten går inte i arv.
Syntax
P (bredd: 100px;)
Ställ in bredd och höjd för en absolut positionerad elementposition: absolut; inte alltid nödvändigt, eftersom det här fallet höjden och bredden bestäms implicit av elementets offset. Om elementet har en ram och marginal, krymper de innehållsområdet med lämpligt belopp.
Div ( bakgrund: #6A7690; position: absolut; topp: 0; nedre: 0; vänster: 50%; höger: 0; ) /*i detta fall elementhöjd 100%, bredd 50% av det överordnade blocket*/ Ris. 2. Höjd och bredd på ett absolut placerat element
Genom att använda padding-egenskapen kan du ställa in utfyllnad på flera sidor av ett element samtidigt, i följande ordning: . Om elementet har en bakgrund kommer det att sträcka sig till utfyllnad också. Negativa värden är inte tillåtna. Fastigheten går inte i arv.
Om tre värden ges, till exempel div (utfyllnad: 10px 20px 30px;), så kommer de att fördelas i följande ordning: det första värdet är den övre utfyllnaden, den andra är den högra och vänstra utfyllnaden, den tredje är den nedre utfyllnaden.
Om två värden anges, till exempel div (utfyllnad: 10px 20px;), kommer den första att ställa in topp- och bottenutfyllnad, den andra kommer att ställa in höger och vänster.
Ett värde, som div (utfyllnad: 10px;) , kommer att ställa in samma utfyllnad för alla sidor av elementet.
Syntax
P (stoppning: 5px 10px 15px 10px;)
För att ställa in utfyllnad på endast en sida av ett element måste du använda en av egenskaperna padding-top , padding-right , padding-bottom , padding-left, till exempel:
P (stoppning-vänster: 10px;)
De flesta element är separerade från varandra av fält. Marginegenskapen är en förkortning för ett elements marginaler, i följande ordning: topp, höger, botten, vänster. Den används när du behöver ställa in marginaler på flera sidor, men inte nödvändigtvis på fyra. Vertikalt angränsande fält blockelement kollapsa, och övre och nedre marginaler har ingen effekt på inline-element. Negativa värden är tillåtna. Fastigheten går inte i arv.
Om tre värden ges, till exempel div (marginal: 10px 20px 30px;), så kommer de att fördelas i följande ordning: det första värdet är den övre marginalen, det andra är höger och vänster marginal, det tredje är bottenmarginalen.
Om två värden anges, till exempel div (marginal: 10px 20px;), kommer det första att ställa in övre och nedre marginalerna, det andra kommer att ställa in höger och vänster marginaler.
Ett enda värde, som div (marginal: 10px;) , kommer att ställa in samma marginal för alla sidor av elementet.
(marginal: 0 auto;) fungerar bara om elementets bredd är inställd explicit.
Ris. 3. marginal: auto; för ett absolut placerat element Syntax
Div (marginal: 5px 10px 2px 5px;)
Egenskaperna marginal-top , margin-right , margin-bottom , margin-left styr respektive marginaler på varje sida av ett element, till exempel:
P (marginal-vänster: 10px;)
CSS stöder också några fler egenskaper relaterade till att ställa in höjden och bredden på webbsideselement: min-höjd , min-bredd , maxhöjd och maxbredd . Dessa egenskaper låter dig ställa in minimi- och maximivärden för ett elements bredd eller höjd, vilket ger elementet en chans att fylla det tillgängliga utrymmet. Egenskaper används ofta för responsiv webbdesign. Gäller alla element utom inline- och tabellelement. Kom alltid efter huvudregeln, d.v.s. efter att ha ställt in elementets höjd eller bredd . Inte ärvt.
Du kan ställa in normala mått med en måttenhet och storleksbegränsningar med andra enheter, till exempel:
Div ( bredd: 400px; maxbredd: 50 %; )
Elementet kommer bara att ha en bredd på 400px om detta värde är mindre än 50 % av behållarblockets bredd, annars minskas det i bredd.
Senaste uppdatering: 2016-04-21
Elementens dimensioner ställs in med egenskaperna bredd (bredd) och höjd (höjd).
Standardvärdet för dessa egenskaper är auto , vilket betyder att webbläsaren bestämmer bredden och höjden på elementet. Du kan också uttryckligen ställa in dimensioner med hjälp av enheter (pixlar, ems) eller procentsatser:
Bredd: 150px bredd: 75 % höjd: 15 em;
Pixlar definierar den exakta bredden och höjden. Em-enheten beror på höjden på teckensnittet i elementet. Om ett elements teckensnittsstorlek är till exempel 16 pixlar, så skulle 1 em för det elementet vara 16 pixlar. Det vill säga, om elementets bredd är inställd på 15em, blir det faktiskt 15 * 16 = 230 pixlar. Om elementet inte har en fontstorlek definierad, kommer det att tas från de ärvda parametrarna eller standardvärdena.
De procentuella värdena för width-egenskapen beräknas baserat på bredden på containerelementet. Om till exempel bredden på body-elementet på en webbsida är 1000 pixlar och elementet kapslat i det
Procentvärden för egenskapen höjd fungerar på samma sätt som egenskapen bredd, bara nu beräknas höjden från containerelementets höjd.
Till exempel:
Samtidigt kan de faktiska måtten på elementet i slutändan vara annorlunda än de som ställs in i egenskaperna för bredd och höjd. Till exempel:
Som du kan se på skärmdumpen bestämmer i själva verket värdet på width-egenskapen - 200px - endast bredden på elementets inre innehåll, och under själva elementets block kommer ett utrymme att tilldelas, vars bredd är lika med bredden på det inre innehållet (width-egenskapen) + padding (padding-egenskapen) + borderwidth-egenskapen (borderwidth-egenskapen) + borderwidth-egenskapen (borderwidth). Det vill säga, elementet kommer att ha en bredd på 230 pixlar, och bredden på elementblocket, med hänsyn till marginalerna, kommer att vara 250 pixlar.
Sådana beräkningar bör beaktas vid bestämning av elementens dimensioner.
Med hjälp av ytterligare en uppsättning egenskaper kan du ställa in minsta och högsta storlekar:
min-bredd : minsta bredd
max-width : maximal bredd
min-höjd: minsta höjd
max-höjd : maxhöjd
I detta fall är elementets bredd lika med 50 % av behållarelementets bredd, men den får inte vara mindre än 200 pixlar och mer än 300 pixlar.
Egenskapen för boxstorlek låter dig åsidosätta fasta mått element. Det kan ta ett av följande värden:
content-box : Standardvärdet för egenskapen, där webbläsaren lägger till kantbredd och utfyllnad till värdena för egenskaperna bredd och höjd för att bestämma den faktiska bredden och höjden på element
padding-box: talar om för webbläsaren att elementets bredd och höjd ska inkludera utfyllnad som en del av dess värde. Låt oss till exempel säga att vi har följande stil:
Bredd: 200px höjd: 100px; marginal: 10px stoppning: 10px kantlinje: 5px fast #ccc; bakgrundsfärg: #eee; box-storlek: padding-box;
Här blir den faktiska bredden på det inre innehållet i blocket 200px (bredd) - 10px (padding-vänster) - 10px (padding-höger) = 180px.
Det är värt att notera att de flesta moderna webbläsare stöder inte den här egenskapen.
border-box: talar om för webbläsaren att elementets bredd och höjd ska inkludera utfyllnad och kanter som en del av dess värde. Låt oss till exempel säga att vi har följande stil:
Bredd: 200px höjd: 100px; marginal: 10px stoppning: 10px kantlinje: 5px fast #ccc; bakgrundsfärg: #eee; box-storlek: border-box;
Här blir den faktiska bredden på blockets inre innehåll 200px (bredd) - 10px (padding-vänster) - 10px (padding-höger) - 5px (kant-vänster-bredd) - 5px (kant-höger-bredd) = 170px.
Låt oss till exempel definiera två rutor som endast skiljer sig åt i värdet på egenskapen box-sizing:
I det första fallet, när man bestämmer storleken på blocket, kommer bredd- och höjdegenskaperna att läggas till gränstjockleken, såväl som stoppning och stoppning, så det första blocket blir stort.
De höjd CSS-egenskapen anger höjden på ett element. Som standard definierar egenskapen höjden på innehållsområdet. Om box-sizing är inställd på border-box bestämmer det istället höjden på kantområdet .
Källan för detta interaktiva exempel lagras i ett GitHub-förråd. Om du vill bidra till projektet med interaktiva exempel, vänligen klona https://github.com/mdn/interactive-examples och skicka oss en pull-förfrågan.
Egenskaperna min-höjd och maxhöjd åsidosätter höjd .
Se till att element inställda med en höjd inte trunkeras och/eller inte skymmer annat innehåll när sidan zoomas in för att öka textstorleken.
| Specifikation | Status | Kommentar |
|---|---|---|
| CSS Intrinsic & Extrinsic Sizing Module Nivå 4 |
Redaktörens utkast | |
| CSS Intrinsic & Extrinsic Sizing Module Nivå 3 Definitionen av "höjd" i den specifikationen. |
Arbetsutkast | Lade till sökorden max-content , min-content , fit-content. |
| CSS-övergångar Definitionen av "höjd" i den specifikationen. |
Arbetsutkast | Listar höjd som animerbar. |
| CSS nivå 2 (revision 1) Definitionen av "höjd" i den specifikationen. |
Rekommendation | Lägger till stöd för CSS-datatypen representerar ett avståndsvärde. Längder kan användas i många CSS-egenskaper, såsom bredd, höjd, marginal, utfyllnad, kantbredd, teckenstorlek och textskugga."> |
| CSS nivå 1 Definitionen av "höjd" i den specifikationen. |
Rekommendation | initial definition. |
| ursprungligt värde | bil |
|---|---|
| Gäller för | alla element utom icke-ersatta inline-element, tabellkolumner och kolumngrupper |
| Ärvt | Nej |
| Procentandelar | Procentsatsen beräknas med avseende på höjden på den genererade boxens innehållande block. Om höjden på innehållsblocket inte specificeras explicit (d.v.s. det beror på innehållets höjd), och detta element inte är absolut positionerat, beräknas värdet till auto . En procentuell höjd på rotelementet är relativt det ursprungliga innehållsblocket. |
| media | visuell |
| Beräknat värde | en procent eller auto eller den absoluta längden |
| Animationstyp | en CSS-datatyp interpoleras som reella, flyttal.">längd , CSS-datatyp interpoleras som reella, flyttal.">procent eller calc(); |
| kanonisk ordning | den unika icke-tvetydiga ordningen som definieras av den formella grammatiken |
Kompatibilitetstabellen på den här sidan genereras från strukturerad data. Om du vill bidra till datan, kolla in https://github.com/mdn/browser-compat-data och skicka oss en pull-förfrågan.
Uppdatera kompatibilitetsdata på GitHub
| Skrivbord | Mobil | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Krom | kant | Firefox | Internet Explorer | Opera | safari | android webbvy | Chrome för Android | Firefox för Android | Opera för Android | Safari på iOS | Samsung Internet | |
| höjd | Chrome Fullständigt stöd 1 | Edge Fullständigt stöd 12 | Firefox Fullständigt stöd 1 | IE Fullständigt stöd 4 | Opera fullt stöd 7 | Safari Fullständigt stöd 1 | WebView Android Fullständigt stöd 1 | Chrome Android Fullständigt stöd 18 | Firefox Android Fullständigt stöd 4 | Opera Android Fullt stöd 10.1 | Safari iOS Fullständigt stöd 1 | Samsung Internet Android Fullt stöd 1.0 |
| passande innehåll | Chrome Fullt stöd 46 | Edge Inget stöd Nej | Firefox Inget stöd Nej | IE Inget stöd Nej | Opera Fullständigt stöd 33 | Safari Fullständigt stöd 11 Fullständigt stöd 11 Fullständigt stöd 9 Prefix Prefix | Opera Android? | Safari iOS Fullständigt stöd 11 Fullständigt stöd 11 Fullständigt stöd 9 Prefix Prefix Implementerad med leverantörsprefixet: -webkit- | ||||
| max innehåll | Chrome Fullt stöd 46 | Edge Inget stöd Nej | Prefix Prefix | IE Inget stöd Nej | Opera Fullständigt stöd 44 | Safari Fullständigt stöd 11 | WebView Android Fullt stöd 46 | Chrome Android Fullständigt stöd 46 | Prefix Prefix Implementerad med leverantörsprefixet: -moz- | Samsung Internet Android Fullt stöd 5.0 | ||
| min innehåll | Chrome Fullt stöd 46 | Edge Inget stöd Nej | Firefox Fullt stöd 66 Fullt stöd 66 Fullt stöd 3 Prefix Prefix Implementerad med leverantörsprefixet: -moz- | IE Inget stöd Nej | Opera Fullständigt stöd 44 | Safari Fullständigt stöd 11 | WebView Android Fullt stöd 46 | Chrome Android Fullständigt stöd 46 | Firefox Android Fullständigt stöd 66 Fullt stöd 66 Fullt stöd 4 Prefix Prefix Implementerad med leverantörsprefixet: -moz- | Opera Android Fullt stöd 43 | Safari iOS Fullständigt stöd 11 | Samsung Internet Android Fullt stöd 5.0 |
| sträcka | Chrome Fullt stöd 28 webkit-fill-tillgänglig">Alternativt namn Fullt stöd 28webkit-fill-tillgänglig">Alternativt namn webkit-fill-tillgänglig">Alternativt namn | Edge Inget stöd Nej | Firefox Inget stöd Nej | IE Inget stöd Nej | Opera fullt stöd 15 webkit-fill-tillgänglig">Alternativt namn Fullt stöd 15webkit-fill-tillgänglig">Alternativt namn webkit-fill-tillgänglig">Alternativt namn Använder det icke-standardiserade namnet: -webkit-fill-available | Safari Fullständigt stöd 9 webkit-fill-tillgänglig">Alternativt namn Fullt stöd 9webkit-fill-tillgänglig">Alternativt namn webkit-fill-tillgänglig">Alternativt namn Använder det icke-standardiserade namnet: -webkit-fill-available | WebView Android Fullt stöd 4.4 webkit-fill-tillgänglig">Alternativt namn Fullständigt stöd 4.4webkit-fill-tillgänglig">Alternativt namn webkit-fill-tillgänglig">Alternativt namn Använder det icke-standardiserade namnet: -webkit-fill-available | Chrome Android Fullständigt stöd 28 webkit-fill-tillgänglig">Alternativt namn Fullt stöd 28webkit-fill-tillgänglig">Alternativt namn webkit-fill-tillgänglig">Alternativt namn Använder det icke-standardiserade namnet: -webkit-fill-available | Firefox Android | Opera Android? | Safari iOS Fullständigt stöd 9 webkit-fill-tillgänglig">Alternativt namn Fullt stöd 9webkit-fill-tillgänglig">Alternativt namn webkit-fill-tillgänglig">Alternativt namn Använder det icke-standardiserade namnet: -webkit-fill-available | Samsung Internet Android Fullt stöd 5.0 webkit-fill-tillgänglig">Alternativt namn Fullt stöd 5.0webkit-fill-tillgänglig">Alternativt namn webkit-fill-tillgänglig">Alternativt namn Använder det icke-standardiserade namnet: -webkit-fill-available |
Hej kära läsare! Idag ska vi titta på hur man ställer in storleken på blockelement på en webbsida med hjälp av css-egenskaper och konfigurera visningen av innehåll om det inte passar i elementet.
Med hjälp av width- och height style-attributen kan du ställa in bredden och höjden på blockelementen:
bredd: auto|<ширина>|ärva
höjd:auto|<ширина>|ärva
Som värden kan du använda alla måttenheter som finns tillgängliga i css - till exempel pixlar (px), tum (in), punkter (pt), etc.:
p(bredd:200px; höjd:150px)
Förutom absoluta enheter kan du ställa in det relativa värdet av storleken på element i procent. I det här fallet kommer elementets bredd och höjd att bero på det överordnade elementets bredd och höjd. Om föräldern inte är explicit specificerad, beror storlekarna på webbläsarfönstret.
div (bredd:40%;)
Autovärdet ger kontroll över elementets storlek till webbläsaren och är standardvärdet. I det här fallet kommer elementets dimensioner att vara sådana att det helt passar allt innehåll.
Låt oss titta på några exempel.
Välkommen till vår bilsida. Här hittar du många intressanta och användbara artiklar om bilar, om deras tekniska specifikationer och funktioner.
Resultat:
I det här exemplet har vi skapat ett div-block och kapslat ett stycke p med text inuti. För div ställer vi strikt in måtten till 300 gånger 300 pixlar. P-elementet har egenskaperna för bredd och höjd inställda på auto, så som du kan se på skärmdumpen är dess bredd inställd lika med bredden på det överordnade elementet, och höjden är inställd för att passa all text i stycket.
Låt oss nu ändra css-inställningarna för stycke p och ställa in fasta storlekar:
lager2(
bakgrund: #eee;
bredd:250px;
}
Resultat:
Som du kan se har styckets bredd blivit smalare och lika med 250 pixlar, och dess höjd har ökat så att texten passar, eftersom höjdparametern förblir lika med auto.
Låt oss nu ställa in höjden och bredden på stycket i procent:
lager2(
bakgrund: #eee;
bredd:50%;
höjd:50%;
}
Resultat:
Som du kan se på bilden har bredden på p-elementet blivit lika med halva bredden på div-elementet. Och höjden ökade till 75 procent av höjden på div.
När du ställer in bredd och höjd för alla element i relativa enheter, kan du behöva ange minsta och största möjliga storlekar. När allt kommer omkring, till exempel, när du ändrar storlek på webbläsarfönstret, kan storleken på elementet minska och öka till en sådan storlek att läsbarheten för webbplatsen blir mycket låg.
Du kan definiera minsta bredd och höjd med attributen min-width och min-height:
min bredd:<ширина>
min-höjd:<высота>
De liknande stilattributen max-width och max-height låter dig ställa in maximala mått:
maximal bredd:<ширина>
maximal höjd:<высота>
Det är tydligt att när du ställer in maximi- och minivärden för höjd och bredd, kan elementets dimensioner inte bli större än maximivärdena och mindre än minimivärdena.
Det är värt att förtydliga att uppgiften höjd- och breddparametrar är bara meningsfulla för blocktaggar, eftersom för inline-element dessa parametrar inte bearbetas av webbläsaren.
Det kan hända att när du ställer in stela höjd- och breddparametrar för ett element, kanske innehållet i det inte passar in i det begränsade området.
Låt oss till exempel minska storleken på stycke p från exemplen ovan till 100 pixlar:
lager2(
bakgrund: #eee;
bredd:100px;
höjd:100px;
}
Resultat:
Som ni ser så har texten gått över styckets gränser och det ser inte särskilt snyggt ut. För att undvika sådana situationer finns det en css-regel - overflow.
Innehållsspill kan inträffa när både bredden och höjden på ett element är begränsade. Tänk på två stycken:
Första styckets text
Andra styckets text
Resultat:
Eftersom varken bredd eller höjd anges för styckena, beräknar webbläsaren dem på egen hand baserat på sin egen förståelse av autovärdet. Som ett resultat upptog styckena i bredd allt tillgängligt utrymme och i höjd i enlighet med innehållet i dem.
Nu kommer vi att begränsa bredden på första stycket:
Första styckets text
Andra styckets text
Resultat:
Styckets bredd förväntas minska och höjden är inställd för att passa all text.
Nåväl, nu kommer vi att begränsa höjden på första stycket:
Första styckets text
Andra styckets text
Som ett resultat visade det sig att texten inte passar in i ett så begränsat stycke, och därför sprang den in i området för den nedre grannen. Följaktligen är det praktiskt taget omöjligt att läsa texten i varken första eller andra stycket. Det är att kontrollera innehållets beteende i sådana situationer som det finns översvämningsregel:
overflow: synlig|dold|scroll|auto|ärv
Som standard är overflow inställt på synligt, vilket talar om för webbläsaren att visa innehåll som inte får plats i behållaren. Resultatet kan ses i exemplet ovan.
Regeln döljer allt som inte får plats i behållaren:
Rullningsvärdet kommer att visa vertikala och horisontella rullningslister på elementet, även om allt innehåll passar:
Första styckets text
Andra styckets text
Den mest populära och logiska lösningen, om du behöver göra rullningslister för behållaren, är värdet bil. I det här fallet kommer webbläsaren själv att avgöra när och på vilka axlar det är värt att visa rullningslister:
Första styckets text
Andra styckets text
Resultat:
Rullningslister kan också anpassas med stilattributen overflow-x och overflow-y, som låter dig anpassa visningen av rullning på individuella axlar. Alltså ansvarig för horisontell axel, och för vertikal axel.
Därför, om du till exempel behöver att horisontell rullning aldrig visas i ett stycke, och vertikal rullning endast visas när det är nödvändigt, räcker det med att skriva följande css-regel:
p(overflow-x:hidden;overflow-y:auto;)
Och problemet kommer att lösas.
Det är allt. Vi ses. Glöm inte att prenumerera på blogguppdateringar och jag kommer att vara tacksam om du använder knapparna för det sociala nätverket.
