Foros del Web » Creando para Internet » CSS »

Alguien me podría explicar para que sirven y como se utilizan las siguientes propied.

Estas en el tema de Alguien me podría explicar para que sirven y como se utilizan las siguientes propied. en el foro de CSS en Foros del Web. O inclusive pasarme algún enlace donde haya una explicación al respecto en español de estas tres propiedades: box-sizing content-box border-box Gracias...
  #1 (permalink)  
Antiguo 26/11/2010, 17:51
 
Fecha de Ingreso: octubre-2010
Mensajes: 31
Antigüedad: 7 años, 1 mes
Puntos: 0
Alguien me podría explicar para que sirven y como se utilizan las siguientes propied.

O inclusive pasarme algún enlace donde haya una explicación al respecto en español de estas tres propiedades:

box-sizing
content-box
border-box

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

box-sizing es unan propiedad css3, content-box y border-box son sus posibles valores. Te permiten elegir como quieres que el navegador interprete el "box-model". Como ejemplo:
Código CSS:
Ver original
  1. div {
  2.     width: 500px;
  3.     padding: 50px;
  4.     margin: 10px;
  5. }

En el ejemplo anterior con "box-sizing:content-box" tienes lo normal (css 2.1) al ancho de tu div se le suma el padding-left, padding-right, margin-left y margin-right; lo cual en total haria que tu div sea 620px de ancho, utilizando "box-sizing:border-box" encambio hace que tu div sea 500px de ancho y le resta el padding y el margin, osea "se reduce el espacio para tu contenido" (te quedarian 380px)
  #3 (permalink)  
Antiguo 26/11/2010, 18:15
 
Fecha de Ingreso: octubre-2010
Mensajes: 31
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Alguien me podría explicar para que sirven y como se utilizan las siguient

Cita:
Iniciado por dual3nigma Ver Mensaje
box-sizing es unan propiedad css3, content-box y border-box son sus posibles valores. Te permiten elegir como quieres que el navegador interprete el "box-model". Como ejemplo:
Código CSS:
Ver original
  1. div {
  2.     width: 500px;
  3.     padding: 50px;
  4.     margin: 10px;
  5. }

En el ejemplo anterior con "box-sizing:content-box" tienes lo normal (css 2.1) al ancho de tu div se le suma el padding-left, padding-right, margin-left y margin-right; lo cual en total haria que tu div sea 620px de ancho, utilizando "box-sizing:border-box" encambio hace que tu div sea 500px de ancho y le resta el padding y el margin, osea "se reduce el espacio para tu contenido" (te quedarian 380px)
Ósea que se podría decir que el valor inicial de "box-sizing" es "content-box" y si quiero fijar el ancho y a partir de ahí hacer las reducciones que pueda ocupar el padding, border y margin. Escribo de manera explícita, "box-sizing: border-box"
¿Es así? de serlo me gusta, ya que podría dar un ancho en porcentaje a todas mis cajas y luego establecer esto (box-sizing: border-box) para fijar su ancho. Y no me preocuparía si luego alguna caja no tiene suficiente espacio y salta de linea. Yo uso porcentaje para el ancho de las cajas y siempre dejo espacio sobrante por las dudas.

Otra pregunta se escribe "box-sizing o -webkit-box-sizing, -moz-box-sizing? y también los valores, se escriben tal cual están? Saludos
  #4 (permalink)  
Antiguo 26/11/2010, 18:17
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 7 años, 9 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!
  #5 (permalink)  
Antiguo 26/11/2010, 18:21
Avatar de dual3nigma
Colaborador
 
Fecha de Ingreso: febrero-2010
Ubicación: Ciudad de México
Mensajes: 295
Antigüedad: 7 años, 9 meses
Puntos: 122
Respuesta: Alguien me podría explicar para que sirven y como se utilizan las siguient

Si, es como dices, y si es muy buena propiedad, solo que como te comentaba es una propiedad css3. Por lo cual no funciona en ie menor a 9 =(
Los demas navegadores tienen como siempre sus versiones propietarias, -webkit-box-sizing, -moz-box-sizing y box-sizing para opera e ie9
  #6 (permalink)  
Antiguo 26/11/2010, 18:29
 
Fecha de Ingreso: octubre-2010
Mensajes: 31
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Alguien me podría explicar para que sirven y como se utilizan las siguient

Si es cierto, habrá que esperar :s. Muchas gracias por tu ayuda ;)

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:26.