CSS handleiding

CSS TUIS CSS Inleiding CSS-sintaksis CSS-keurders CSS Hoe om CSS Kommentaar CSS kleure CSS agtergronde CSS-grense CSS-marges CSS Opvulling CSS Hoogte/Breedte CSS Box Model CSS uiteensetting CSS teks CSS lettertipes CSS-ikone CSS skakels CSS-lyste CSS-tabelle CSS vertoon CSS maksimum breedte CSS posisie CSS Z-indeks CSS oorloop CSS Float CSS Inline-blok CSS Belyn CSS-kombineerders CSS Pseudo-klas CSS Pseudo-element CSS Deursigtigheid CSS-navigasiebalk CSS-aftrekkies CSS Beeldgalery CSS Beeld Sprites CSS Attr keurders CSS-vorms CSS-tellers CSS-webwerfuitleg CSS-eenhede CSS Spesifisiteit CSS !belangrik CSS Wiskunde funksies

CSS Gevorderd

CSS afgeronde hoeke CSS-randbeelde CSS agtergronde CSS kleure CSS-kleur sleutelwoorde CSS Gradiënte CSS Shadows CSS-tekseffekte CSS Web Fonts CSS 2D-transformasies CSS 3D-transformasies CSS-oorgange CSS-animasies CSS Tooltips CSS-stylbeelde CSS-beeldrefleksie CSS-objekpas CSS voorwerp-posisie CSS-maskering CSS-knoppies CSS-paginering CSS veelvuldige kolomme CSS-gebruikerskoppelvlak CSS veranderlikes CSS-boksgrootte CSS-medianavrae CSS MQ Voorbeelde CSS Flexbox

CSS reageer

RWD Inleiding RWD Uitsigpoort RWD-roosteraansig RWD Media Navrae RWD beelde RWD-video's RWD-raamwerke RWD-sjablone

CSS -rooster

Grid Intro Roosterhouer Rooster item

CSS SASS

SASS Tutoriaal

CSS voorbeelde

CSS-sjablone CSS voorbeelde css vasvra CSS Oefeninge CSS-sertifikaat

CSS Verwysings

CSS Verwysing CSS-keurders CSS-funksies CSS Verwysing Gehoor CSS Web veilige lettertipes CSS Animateerbaar CSS-eenhede CSS PX-EM-omskakelaar CSS kleure CSS-kleurwaardes CSS verstekwaardes CSS-blaaierondersteuning

CSS -uitleg - breedte en maksimum breedte


Gebruik breedte, maksimum breedte en marge: outomaties;

Soos in die vorige hoofstuk genoem; 'n blokvlak-element neem altyd die volle wydte wat beskikbaar is (strek uit na links en regs so ver dit kan).

Deur die widthvan 'n blokvlak-element te stel, sal dit verhoed dat dit tot by die rande van sy houer uitstrek. Dan kan jy die kantlyne op outomaties stel om die element in sy houer horisontaal te sentreer. Die element sal die gespesifiseerde breedte opneem, en die oorblywende spasie sal gelykop tussen die twee kantlyne verdeel word:

Hierdie <div>-element het 'n breedte van 500px, en marge is op outo gestel.

Let wel: Die probleem met <div>bogenoemde kom voor wanneer die blaaiervenster kleiner is as die breedte van die element. Die blaaier voeg dan 'n horisontale skuifbalk by die bladsy.

Deur max-widtheerder in hierdie situasie te gebruik, sal die blaaier se hantering van klein vensters verbeter. Dit is belangrik wanneer 'n webwerf op klein toestelle bruikbaar gemaak word:

Hierdie <div>-element het 'n maksimum breedte van 500px, en marge is op outo gestel.

Wenk: Verander die grootte van die blaaiervenster na minder as 500px breed, om die verskil tussen die twee divs te sien!

Hier is 'n voorbeeld van die twee divs hierbo:

Voorbeeld

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

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