Som standard använder blockelement autowidth. Detta innebär att elementet kommer att sträckas horisontellt exakt lika mycket som det är fritt utrymme. Standardhöjden för blockelement ställs in automatiskt, dvs. Webbläsaren sträcker ut innehållsområdet vertikalt så att allt innehåll visas. För att ställa in anpassade mått för ett elements innehållsområde kan du använda egenskaperna bredd och höjd.

CSS-egenskapen width låter dig ställa in bredden på elementets innehållsområde, och egenskapen height låter dig ställa in höjden på innehållsområdet:

Observera att egenskaperna för bredd och höjd endast bestämmer storleken på innehållsområdet; för att beräkna den totala bredden på ett blockelement måste du lägga till bredden på innehållsområdet, vänster och höger utfyllnad och bredden på vänster och höger gräns. Detsamma gäller för elementets totala höjd, endast alla värden beräknas vertikalt:

För det här stycket kommer vi bara att ställa in bredd och höjd.

Detta stycke innehåller, förutom bredd och höjd, en inre stoppning, en bård och en yttre stoppning.

Prova "

Exemplet visar tydligt att det andra elementet tar mer plats än det första. Om vi ​​beräknar med hjälp av vår formel är måtten i det första stycket 150x100 pixlar, och måtten i det andra stycket är:

Totala höjden:	5 px	+	10px	+	100 pixlar	+	10px	+	5 px	= 130 pixlar
	topp ram		övre indrag		höjd		lägre indrag		lägre ram

det vill säga 180x130 pixlar.

Elementspill

När du har bestämt bredden och höjden för ett element, bör du vara uppmärksam på en viktig punkt - innehållet som finns inuti elementet kan överstiga den angivna blockstorleken. I det här fallet kommer en del av innehållet att gå utanför elementets gränser. För att undvika detta obehagliga ögonblick kan du använda CSS-överflödesegenskapen. Overflow-egenskapen talar om för webbläsaren vad den ska göra om innehållet i ett block överskrider dess storlek. Den här egenskapen kan ha ett av fyra värden:

• synlig - standardvärdet som används av webbläsaren. Att ställa in detta värde kommer att ha samma effekt som att inte ställa in överflödesegenskapen.
• scroll - lägger till vertikala och horisontella rullningslister till ett element.
• auto - lägger till rullningslister vid behov.
• hidden - döljer en del av innehållet som sträcker sig utanför blockelementets gränser.

Vlad Merzhevich

Varje blockelement består av en uppsättning egenskaper, som kålblad överlagrade på varandra. Grunden för blocket är dess innehåll (detta kan vara text, bild, etc.), vars bredd specificeras av egenskapen width och höjden efter höjden ; det finns utfyllnad runt innehållet, de skapar ett tomt utrymme från innehållet till den inre kanten av gränserna; sedan kommer själva gränserna (border) och blocket kompletteras med marginaler (marginal), det osynliga tomma utrymmet från gränsernas ytterkant. Blockbredden är ett komplext värde och består av flera egenskapsvärden:

• bredd - innehållsbredd, d.v.s. blockera innehåll;
• padding-left och padding-right - marginal till vänster och höger om innehållet;
• gräns-vänster och gräns-höger - tjockleken på gränsen till vänster och höger;
• marginal-vänster och marginal-höger - vänster och höger marginal.

Vissa egenskaper kan saknas, i så fall påverkas inte bredden. Den totala bredden visas i fig. 1 som en svart prickad linje.

Ris. 1. Blockbredd

Om bredd inte anges är standardinställningen auto . I det här fallet kommer blockets bredd att uppta hela den tillgängliga bredden samtidigt som värdena för marginaler, gränser och utfyllnad bibehålls. I det här fallet betyder den tillgängliga bredden bredden på innehållet i det överordnade blocket, och om det inte finns någon förälder, då bredden på webbläsarinnehållet.

Låt oss säga att följande stil är skriven för ett lager.

Bredd: 300px; /* Layer width */ margin: 7px; /* Utfyllnadsvärde */ kant: 4px helt svart; /* Kantalternativ */ utfyllnad: 10px; /* Marginaler runt text */

Lagerbredden enligt denna post kommer att vara lika med 342 pixlar, detta värde erhålls genom att lägga till värdet på innehållets bredd plus vänster utfyllnad, vänster kant och vänster marginal, plus höger marginal, höger kant och höger utfyllnad. Låt oss summera alla siffror.

Bredd = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

Det bör noteras att blockmodellen med bildandet av bredd bär med sig många olägenheter. Du måste hela tiden göra beräkningar när du behöver ställa in en viss blockbredd. Problem börjar också när man kombinerar olika enheter mätningar, särskilt procentsatser och pixlar. Låt oss anta att innehållsbredden är inställd på 90%, om vi lägger till marginalerna och gränserna som anges i pixlar, är det omöjligt att beräkna blockets totala bredd, eftersom procentsatser inte direkt översätts till pixlar. Detta kan resultera i att blockets totala bredd överstiger webbsidans bredd, vilket resulterar i en horisontell rullningslist. Det finns två vägar ut ur denna situation - ändra blockmodellalgoritmen och använd kapslade lager.

Blockmodellalgoritm

Som nämnts bildas blockbredden från bredden på innehållet och värdena för marginaler, gränser och utfyllnad. I webbläsaren Internet Explorer Algoritmen ändras automatiskt och hela blockets bredd sätts lika med bredd. Andra webbläsare ändrar inte algoritmen så lätt, och dessutom vet du att kompatibilitetsläget är ont. CSS3 har en underbar egendom i boxstorlek som kommer att komma väl till pass för oss. När den är inställd på kantlinje börjar bredden att inkludera marginaler och kanter, men inte utfyllnad. Således, genom att koppla box-sizing med border-box-värdet till vår stil, kan vi ställa in bredden som en procentandel och säkert ange kant och stoppning utan rädsla för att bredden på blocket kommer att ändras. Tyvärr finns det ett litet problem med den här egenskapen, som vanligtvis är fallet med webbläsare – inte alla webbläsare förstår det. Jag är glad att webbläsare åtminstone stöder webbläsarspecifika egenskaper. I tabell 1 visar webbläsarstöd.

Tabell 1. Webbläsarstöd för egenskapen box-sizing

Webbläsare	Internet Explorer	Krom	Opera	Safari	Firefox
Version	8.0+	2.0+	7.0+	3.0+	1.0+
Fast egendom	lådans storlek	-webkit-box-storlek	lådans storlek	-webkit-box-storlek	-moz-box-storlek

Som du kan se i tabellen är det förvirring och vacklande i egenskaperna, så du måste göra en hybrid och ange alla tre egenskaperna (exempel 1).

Exempel 1: Blockbredd

HTML5 CSS3 IE Cr Op Sa Fx

Det här exemplet fungerar i alla webbläsare som anges i tabellen. 1 är dock inte giltig i CSS3 på grund av användningen av icke-standardiserade egenskaper som börjar med -moz och -webkit. Blockbredden är 100 % inklusive utfyllnadsvärden. Utan egenskapen box-sizing visas en horisontell rullningslist i webbläsaren.

Kapslade lager

Att använda egenskapen box-sizing är bra för alla, förutom att det inte fungerar i äldre versioner av IE. Om du designar en webbplats baserad på IE7 och IE6, är den gamla beprövade metoden att kapsla lager lämplig för dig. Tanken är enkel - för det yttre blockelementet ställs bara den erforderliga bredden in, och för det kapslade blocket är allt annat satt - marginaler, gränser och utfyllnad. Eftersom standardbredden för ett block är lika med den tillgängliga bredden på dess förälder, kommer blocken i någon mening att överlappa varandra, men den faktiska bredden på det kombinerade elementet kommer att vara tydligt definierad. Exempel 2 visar användningen av kapslade lager.

Exempel 2: Kapslade lager

HTML5 CSS 2.1 IE Cr Op Sa Fx

Resultat detta exempel visas i fig. 2.

Ris. 2. Blockbredd i procent

Fördelen med kapslade lager är användningen av indrag (boxstorlek tar inte hänsyn till dem), metodens mångsidighet och det faktum att bakgrunden kan läggas till ett eller annat lager om så önskas. Detta förändras något utseende element, detta gäller särskilt när man inkluderar bakgrundsbilder. Bland nackdelarna med metoden kan man notera införandet av ett extra block, vilket komplicerar kodstrukturen, särskilt om metoden används ofta. Men detta kan betraktas som en liten sak jämfört med fördelarna.

Beskrivning

Ställer in bredden på blocknivå eller utbytbara element (till exempel taggen ). Bredd inkluderar inte tjockleken på kanterna runt elementet, utfyllnad eller marginalvärden.

Webbläsare hanterar inte bredder på samma sätt, visningsresultatet beror på vilken webbläsare som används.. I tabell 1 ges möjliga alternativ och den resulterande bredden.

Tabell 1. Breddåtgärden i webbläsare

	Internet Explorer	Opera 10+, Firefox, Chrome, Safari	Opera 9
Ej specificerat (kompatibilitetsläge)	Om innehållet överskrider den angivna bredden, ändras blockets storlek för att passa innehållet. Annars är blockets bredd lika med breddvärdet.	I alla fall fungerar webbläsaren enligt CSS-specifikationen. Blockets bredd erhålls nämligen genom att lägga till värdena width , padding , margin och border . Innehållet i blocket, om det inte passar in i de angivna måtten, visas ovanpå blocket.	Bredden är lika med breddvärdet.
Övergångs-HTML
Strikt HTML	Bredden bildas genom att lägga till värdena för bredd, stoppning, marginal och kant. Om innehållet i blocket inte passar in i de angivna måtten, visas de överst.		Bredden är lika med breddvärdet plus utfyllnad, marginal och kant. Om innehållet i blocket inte passar in i de angivna måtten, visas de överst.
HTML 5
XHTML

Syntax

bredd: värde | intresse | auto | ärva

Värderingar

Alla längdenheter som accepteras i CSS accepteras som värden - till exempel pixlar (px), tum (in), poäng (pt), etc. När du använder procentnotation beräknas bredden på elementet beroende på bredden på det överordnade elementet. Om föräldern inte är explicit specificerad, fungerar webbläsarfönstret som det.

Auto Ställer in bredden baserat på elementtyp och innehåll. ärver Ärver värdet av föräldern.

HTML5 CSS2.1 IE Cr Op Sa Fx

Resultatet av detta exempel, som det visas i webbläsaren Safari, visas i fig. 1.

Ris. 1. Blockbredd

Objektmodell

document.getElementById("elementID ").style.width

Webbläsare

Internet Explorer 6 definierar felaktigt bredd som min bredd . I quirk-läge beräknar Internet Explorer-versioner upp till och inklusive 8.0 felaktigt bredden på ett element utan att lägga till utfyllnad, marginal eller gränsvärden till det.

Internet Explorer-versioner upp till och inklusive 7.0 stöder inte ärvt värde.

Du behöver förmodligen inte berätta för någon om fördelarna med div-layout framför tabelllayout. Alla har länge förstått detta och bytt till dem från tabeller. Jo, de som inte har bytt kommer snart att förstå sina misstag och göra det. Men som i någon lektion - här Det finns också fallgropar: divorna beter sig inte som de ska, eller det är omöjligt att lägga ut någon specifik struktur, det finns många hinder, men det finns alltid bara en layoutdesigner...

Det här inlägget är mer avsett för nybörjare, men kanske även proffsen hittar något intressant här. Så låt oss börja!

Detta är alltid värt att komma ihåg

Det finns ett tillvägagångssätt för layout som måste följas så ofta och exakt som möjligt. Detta är mineraliseringen av DOM-trädet. Detta har flera välgrundade fördelar: det förenklar själva layoutprocessen, minskar antalet potentiella fel till ett minimum och förbättrar kodtransparensen. Vi måste alltid komma ihåg detta och ägna särskild uppmärksamhet åt det när vi planerar strukturen.

De grundläggande principerna är följande: för indragning använder vi bara stoppning och marginal (beroende på behovet) - det är inte alls nödvändigt att göra en separat 20 pixel div, vi begränsar kapslingen till ett minimum, vi överdriver det inte med position : relativa och efterföljande blockförskjutningar (om de används felaktigt kan det leda till att en halvtimme redigerar hela koden), vi använder aktivt z-index för att uppnå önskad effekt.

FAQ

- Hur placerar man diverna efter varandra? Och för detta använder vi egenskapen - flyta: vänster (eller höger, beroende på behovet), så att nästa div efter sådana alternativa står under dem, vi ställer in den som den klara egenskapen (till exempel klar: vänster).

- Hur centrerar man en div? En lösning ser ut på följande sätt- ställ in marginal-vänster och marginal-höger som auto (eller ännu enklare - margin:0 auto;)

- Hur placerar man element i en div vertikalt? Det beror på elementet, till exempel för text, räcker det att bara specificera vertical-align:middle, men för en bild måste du ange line-height:Npx.

- Indrag med marginal eller stoppning? I grund och botten tjänar marginal för indrag mellan block; det är en "utåtgående" indragning, eftersom utfyllnad är en "inåtgående" indragning och används oftast för att organisera indrag runt text, till exempel. Det verkar vara en enkel sak, men ibland kan du stöta på sådana ädelstenar som en brandlus att jag inte kunde låta bli att nämna det här.

- Flytta blocket med marginal eller position:relative i samband med horisontella och vertikala förskjutningar? Naturligtvis måste du i dessa fall använda marginal. Det är sant, som på andra ställen, allt beror på det specifika fallet, men i allmänhet bör du fortfarande använda marginal.

- Hur sträcker man en div för att passa innehållet i blocket? För att göra detta måste du ange höjd: auto;

Hur sträcker man en div till höjden av sin förälder, som i sin tur sträcker sig till höjden av innehållet i div som finns inuti den, bredvid den första div? Ställ in innehålls-div till höjd: auto, de andra två diverna till höjd: 100% och display: tabell;

- Hur gör man en div osynlig? Genom att manipulera visningsegenskapen. För osynlighet, ställ in den på ingen.

- Hur får man innehåll att rulla i en div med statisk höjd? Vi ställer in overflow:scroll i egenskaperna.

- Hur visar man (till exempel) "a"-taggen som en div (block)? I egenskaperna, ställ in höjd och bredd och ställ in display:block;

Det är allt du behöver veta för att smärtfritt skriva ut divs. Faktum är att om några andra frågor dyker upp, kommer svaren direkt att dyka upp här! Men generellt sett finns det inget att vara rädd för - en halvtimmes träning och du är redan ett proffs Så lägg dessa föråldrade tabeller åt sidan - och gå vidare till ett nytt utvecklingsstadium!

Taggar: faq, div, layout, handledning

När man lade upp nästa projekt (eller bara designade ett layoutrutnät) ställdes många inför ett dilemma - att använda en fast layoutbredd eller ett "gummi"-rutnät som anpassar sig efter storleken på webbläsarfönstret.

Var och en av dessa lösningar har sina egna för- och nackdelar, jag vill fokusera på nackdelarna, eftersom det vanligtvis är just för att spegla nackdelarna med dessa beslut som man måste välja mellan två onda saker.

Fast layoutrutnätsbredd

Layouten tvingas till en horisontell dimension på 960-980 pixlar (så att allt ingår på de flesta enheter i de flesta upplösningar), vilket med stora horisontella fönsterstorlekar ser kyligt ut på något sätt - en tunn vertikal remsa av användbart sidinnehåll och enorma värdelösa fält av oanvänt utrymme på sidorna.

"Gummi" layoutrutnät över fönstrets bredd

Återigen, med stora horisontella fönsterstorlekar finns det ett annat problem: textraderna blir väldigt långa och att läsa dem blir inte alls så bekvämt som vi skulle vilja.
Ett annat vanligt problem med denna lösning är att sidomarginalerna med stora horisontella fönsterstorlekar inte längre visuellt överensstämmer med elementens horisontella dimensioner, vilket inte heller ger komfort när man tittar på layouten.

Jag skulle vilja föreslå en enkel lösning - begränsa den minsta horisontella storleken till ett fast värde i pixlar, och gör den maximala relativa som en procentandel av fönstrets bredd. Detta är en mycket trivial lösning med enkla medel Ytterligare 2 versioner av CSS-specifikationen.

Uppdatering: Jag vill reservera att vi inte talar om den klassiska gummieffekten och anpassningen till absolut alla upplösningar, utan snarare bara om ett visst rimligt urval av upplösningar som layouten är designad för. I exemplen nedan är detta det klassiska skrivbordsupplösningsintervallet med en horisontell upplösningsstorlek på 1024 pixlar.

Låt mig återigen betona: Inlägget talar inte om en lösning för alla typer av enheter och alla upplösningsområden. Detta problem kan i princip inte lösas inom ramen för en layout., för att lösa det på ett eller annat sätt kommer det att krävas flera layouter. Flugor för sig, kotletter för sig.

Skapa en layoutbehållare:
...
Vi dekorerar den med enkel stilkod:
div.page-container (min-bredd: 960px; maxbredd: 75 %; marginal: 0 auto; utfyllnad: 0; )
Denna lösning kan dock tyckas otillräcklig för vissa på grund av att med mycket stora horisontella fönsterstorlekar uppstår problem med linjelängder igen. Detta kan lösas med en lika enkel tilläggsteknik: skapa en extra yttre behållare inuti den som redan beskrivits och begränsa dess maximala bredd till ett fast värde (subjektivt tycks det för mig att värden i intervallet 1400-1600 pixlar är bäst lämpad). Återigen använder vi bara CSS-verktyg 2.0. Den här lösningen, istället för att helt enkelt lägga till bredden som en procentsats för den ursprungliga behållaren som föreslagits i den första kommentaren, kommer även att fungera i IE, som fram till version 9 inte förstår samtidig indikering av värden.

Lägga till HTML:
...

Och ändra CSS lite:
div.page-container ( max-width: 75 %; min-width: 960px; marginal: 0 auto; padding: 0; ) div.page-container-inner ( min-width: 960px; max-width: 1600px; marginal : 0 auto; utfyllnad: 0; )
Som du kan se är lösningen extremt enkel och ganska universell; den kan användas för alla blockelement.