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

Mariela_Fiad · #1 (**permalink**) 26/11/2010, 17:51

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

dual3nigma · #2 (**permalink**) 26/11/2010, 18:04

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 originaldiv {
    width: 500px;
    padding: 50px;
    margin: 10px;
}

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)

Mariela_Fiad · #3 (**permalink**) 26/11/2010, 18:15

Cita:

Iniciado por dual3nigma

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 originaldiv {
    width: 500px;
    padding: 50px;
    margin: 10px;
}

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

dual3nigma · #4 (**permalink**) 26/11/2010, 18:17

Un ejemplo practico de esto seria lo siguiente:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Box Sizing</title>
<style>
* {
    margin:0;
    padding:0;
}
 
.columna {
    width: 50%;
    background:#F00;
    outline:1px #000 solid;
    float:left;
    padding:20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
        box-sizing:border-box;
}
</style>
</head>
 
<body>
<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>
 
<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>
</body>
</html>

el resultado es este

y si no tuviera "border-box" seria este

Saludos!

dual3nigma · #5 (**permalink**) 26/11/2010, 18:21

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

Mariela_Fiad · #6 (**permalink**) 26/11/2010, 18:29

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