Ver Mensaje Individual
  #4 (permalink)  
Antiguo 26/11/2010, 18:17
Avatar de dual3nigma
dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 14 años, 2 meses
Puntos: 122
Respuesta: Alguien me podría explicar para que sirven y como se utilizan las siguient

Un ejemplo practico de esto seria lo siguiente:
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <meta charset="utf-8" />
  3. <title>Box Sizing</title>
  4. * {
  5.     margin:0;
  6.     padding:0;
  7. }
  8.  
  9. .columna {
  10.     width: 50%;
  11.     background:#F00;
  12.     outline:1px #000 solid;
  13.     float:left;
  14.     padding:20px;
  15.     -webkit-box-sizing: border-box;
  16.     -moz-box-sizing: border-box;
  17.         box-sizing:border-box;
  18. }
  19. </head>
  20.  
  21. <div class="columna">Nunc vel rutrum ligula. Vivamus vehicula dignissim leo sed suscipit. Pellentesque hendrerit neque rhoncus risus ullamcorper ut fringilla eros bibendum. Aliquam convallis molestie dignissim. Cras luctus, libero in luctus gravida, velit elit interdum justo, vel ornare dolor turpis ac neque. Sed neque nulla, commodo at pulvinar vel, sollicitudin ac risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eget lectus massa, nec vestibulum nulla. Donec in lectus ac neque varius pretium. Mauris ac ipsum ligula. Nunc commodo sagittis metus malesuada ultricies. Curabitur eu ante lectus. Phasellus dolor massa, pellentesque ac gravida at, faucibus vel dui. Quisque lacinia nisi sit amet elit feugiat euismod. Donec laoreet ante ut mauris dignissim pulvinar. Nulla pellentesque tempor augue eget vestibulum.</div>
  22.  
  23. <div class="columna">Maecenas rutrum, sapien sit amet ultrices hendrerit, dui urna sodales ipsum, a euismod leo neque sit amet neque. Pellentesque vel diam magna, sit amet ultricies ante. Cras erat dui, facilisis non porttitor sed, lobortis non odio. Fusce porttitor dui velit, sed molestie orci. Sed sed nisi lacus. Quisque non arcu mi, quis hendrerit nulla. Cras convallis mi eu urna tristique suscipit. Donec nulla nunc, cursus et scelerisque eget, dictum eu felis. Aliquam dapibus pulvinar massa, eget suscipit sem lobortis quis. Mauris leo ligula, fermentum vitae congue id, volutpat a arcu. Maecenas accumsan est non arcu tincidunt nec scelerisque eros adipiscing. Suspendisse faucibus fringilla consectetur. Morbi ligula lectus, consequat placerat tempor vel, auctor sit amet mi. Aenean elit ligula, accumsan ac placerat in, malesuada ac nunc. Nam ac urna nec magna tristique lacinia vel sed dui. Mauris nec varius risus. Morbi a magna ac lectus eleifend vestibulum nec at ipsum. Ut a lectus nisi, rutrum rutrum libero. Suspendisse metus lorem, tincidunt quis pellentesque sed, sagittis nec elit.</div>
  24. </body>
  25. </html>

el resultado es este

y si no tuviera "border-box" seria este



Saludos!