Il box model


box-model.gif

fonte: http://www.w3schools.com/css/css_boxmodel.asp

http://www.brainjar.com/css/positioning/default.asp



Prime regole dei blocchi

  1. la larghezza width è al netto di padding e border
  2. i margini superiori e inferiori "collassano"
  3. di default il contenuto viene sempre visualizzato anche se più grande del contenitore (overflow)
  4. come si centra un blocco
    1. mettete la dimensione del blocco
    2. mettete margin-left:auto e margin-right:auto



nota bene:
Internet Explorer 5 o Netscape non supportano il box model

per IE 6 is easy to work around, by adding a correct DTD (which you should be doing anyway). (Come DW in automatico)





http://designshack.co.uk/

template-960.jpg


proprietà float & clear



codice di esempio proprietà float

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Esempio blocchi 02</title>
<style type="text/css">
#blocco1, #blocco2, #blocco3, #blocco4 {
    margin: 12px;
    height: 120px;
    width: 120px;
    border: 1px solid #333;
}
#blocco1 {
    background-color: #F00;
    float: right;
}
#blocco2 {
    background-color: #0F0;
    float: right;
}
#blocco3 {
    color: #FFF;
    background-color: #00F;
    float: right;
}
#blocco4 {
    background-color: #0FF;
    float: right;
}
</style>
</head>
 
<body>
<div id="blocco1">
  <p>blocco1</p>
</div>
<div id="blocco2">
  <p>blocco2</p>
</div>
<div id="blocco3">
  <p>blocco3</p>
</div>
<div id="blocco4">
  <p>blocco4</p>
</div>
</body>
</html>




appendici

Unità di misura dei css

  • % (percentage)
  • in (inches)
  • cm (centimeters)
  • mm (millimeters)
  • em (ems)
  • ex (exes)
  • pt (points)
  • pc (picas)
  • px (pixels)