Översikt över CSS rammodell

CSS rammodellen (Box Model) reglerar hur elementrutan hanterar elementinnehåll,padding、kantlinjer och Marginaler sättet.

Översikt över CSS rammodell

CSS rammodell

Den inre delen av elementrutan är det faktiska innehållet, omgiven av padding. Padding visar elementets bakgrund. Kantlinjernas kant är ramen. Utefter ramen är marginalerna, som är standardmässigt genomskinliga och därmed inte blockerar något element bakom dem.

Tips:Bakgrund tillämpas på området som består av innehållet och padding och kantlinjer.

Padding, kantlinjer och marginaler är valfria och har som standardvärde noll. Men många element kommer att ha margin och padding definierade av användarstilmallen. Dessa kan överskrivas genom att sätta margin och padding till noll för elementet. Detta kan göras separat eller genom att använda en universell väljare för att sätta alla element:

* {
  margin: 0;
  padding: 0;
}

I CSS refererar width och height till bredden och höjden på innehållsområdet. Ökning av padding, kantlinjer och marginaler påverkar inte storleken på innehållsområdet, men ökar den totala storleken på elementrutan.

Anta att varje kant av rutan har 10 pixlar marginal och 5 pixlar padding. Om du vill att elementrutan ska vara 100 pixlar, måste du sätta innehållets bredd till 70 pixlar, se bilden nedan:

CSS rammodell exempel 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

Tips:Padding, kantlinjer och marginaler kan tillämpas på alla kanter av ett element eller på enskilda kanter.

Tips:Marginaler kan vara negativa och används ofta med negativa marginaler.

Webbläsar兼容lighet

När ett korrekt DTD har konfigurerats för sidan, kommer de flesta webbläsare att visa innehållet enligt det som visas i bilden ovan. Emellertid visar IE 5 och 6 det felaktigt. Enligt W3C:s specifikationer är utrymmet som elementinnehållet tar upp definieras av width-egenskapen, medan padding och border-värdena kalkuleras separat. Tyvärr använder IE5.X och 6 sin egen icke-standardmodell i kraschläge. Width-egenskapen för dessa webbläsare är inte innehållets bredd utan summan av innehållet, padding och borderns bredd.

Det finns metoder för att lösa detta problem. Men den bästa lösningen för närvarande är att undvika detta problem. Det vill säga, inte lägg till inneryttning med specificerad bredd till elementet, utan försök att lägga till inneryttning eller marginal till elementets förälder och barn.

Terminologiöversättning

  • element: element.
  • padding: inneryttning, det finns också dokument som översätter det till fyllning.
  • border: kant.
  • margin: marginal, det finns också dokument som översätter det till tomrum eller tomrumskant.

På codew3c kallar vi padding och margin enhetligt för inneryttning och marginal. Tomrummet inom ramen är inneryttning, och tomrummet utanför ramen är marginal, är det lätt att komma ihåg, eller?)