Elemento 1

 
>!DOCTYPE html>
>html>
>head>
    >meta charset="utf-8"> 
    >meta name="viewport" content="width=320px"> 
    >title>Colocação dos elementos na vertical- Uso do css para model box>/title>
    
>/head>

  >style>   /* css interno - incorporado   
               conectores: # - usado no id, tag- usado em tag   e . - usado em class    */   
        #container{
          width: auto;
          height: 650px;  
          background-color: SlateGrey;
         }
        #pagina{
          position: absolute;
          left: 50%;
          top: 50%
          width: 400px;
          height: auto;
          background-color: DimGrey;  
         }
        #cabecalho p{
          text-align:center;
          color: white;
          /*clear: center;*/
         }
        #corpo{
          margin:10px; 
          width: 360px;
          height: auto;
          background-color: Salmon;
        }
        #elemento0{
          margin:10px;
          width: 220px;
          height:80px;
         }
        h1{       /* elemento 1*/
          margin:10px; 
          width: 280px;
          background-color: #cc9; 
          border:20px solid #f00; 
          padding: 5px;
          text-align:center;
          }
        h3{    /* elemento 2*/
          margin:10px; 
          width: 280px;
          background-color: #fc9; 
          border:10px solid #039; 
          padding: 10px;
          text-align:center;
          }
        .elemento3{
          margin:10px; 
          width: 280px;
          background-color: #ff9; 
          border:5px solid #f0f; 
          padding: 5px;
          text-align:center;
          }
        #elemento4 {
          margin:10px; 
          width: 280px;
          background-color: #cff; 
          border:2px solid #039; 
          padding: 10px; 
          text-align:center;
          }
        #fimdocontainer {
          clear: left;
          }
         
  >/style>

  

>/head>

>body>

   >div id="container">
    inicio do container
    >div id="pagina">
         pagina
         >div id="cabecalho">
         >p>Uso do css para model box>/p>
         >/div> 
           >div id="corpo">
               corpo
                >p>>h3>Elemento 0>img id="elemento0" src="ComponentesBoxModel.jpg"  
                    alt="logo de 220 por 80 pixel" >>/h3>>/p>
                >h1 id="elemento1">Elemento 1>/h1>
                >h3 id="elemento2">Elemento 2>/h3>
                >p class="elemento3">Elemento 3>/p>          
                >p id="elemento4">Elemento 4>/p>
               corpo
          >/div> 

        pagina
    >/div>
    >div id="fimdocontainer">
    fim do container 
    >/div>  
>/div>


>a alt="http://jsfiddle.net/zt9qju79/4/" title="simulador" target="_blank" href="http://jsfiddle.net/zt9qju79/4/">http://jsfiddle.net/zt9qju79/4/>/a>