CSS layout - bredd och max-bredd

Använd width, max-width och margin: auto;

Som nämnts i föregående kapitel, tar blockinriktade element alltid upp all tillgänglig bredd (försök att sträcka sig så långt till vänster och höger som möjligt).

Ställ in bredden för en blockinriktad element width Det kommer att förhindra att det sträcker sig ut till kanten av dess container. Sedan kan du sätta margin till auto för att centrera elementet horisontellt i containern. Elementet kommer att ta upp det specificerade bredden, och den återstående utrymmet kommer att fördelas jämnt mellan de två margina.

Bredd på <div>-elementet är 500px, margin sätts till auto.

Observera:När webbläsarens fönster är mindre än elementets bredd, så här ovan <div> kommer att orsaka problem. Webbläsaren lägger till en horisontell rullningslist till sidan.

I detta fall används max-width Detta kan förbättra webbläsarens hantering av små fönster. Detta är viktigt för att göra webbplatsen tillgänglig på små enheter:

Den maximala bredden på denna <div>-element är 500px, och marginalen är inställd till auto.

Tips:Justera storleken på webbläsarfönstret till mindre än 500 pixlar för att se skillnaden mellan de två div:arna!

Detta är ett exempel på de två ovanstående div:arna:

Exempel

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
{}
div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
{}

Prova själv