En pocas palabras: 1) auto, el ancho / alto del div padre será la suma de sus hijos. 2) 100 por ciento, su ancho / alto será el de sus padres. Ver artículo aquí
Alan Dong
Respuestas:
142
Ancho automático
El ancho inicial de un elemento de nivel de bloque como div o p es automático. Esto hace que se expanda para ocupar todo el espacio horizontal disponible dentro de su bloque contenedor. Si tiene algún relleno o borde horizontal, los anchos de esos no se suman al ancho total del elemento.
Ancho 100%
Por otro lado, si especifica ancho: 100%, el ancho total del elemento será el 100% de su bloque contenedor más cualquier margen horizontal, relleno y borde (a menos que haya usado box-sizing: border-box, en cuyo caso solo se agregan márgenes al 100% para cambiar la forma en que se calcula su ancho total). Esto puede ser lo que desea, pero lo más probable es que no lo sea.
Entonces, básicamente, no tiene nada que ver con el tamaño del contenido de los elementos, pero ¿se refiere totalmente al ancho principal?
haemse
82
width: auto; hará todo lo posible por mantener un elemento del mismo ancho que su contenedor principal cuando se agregue espacio adicional desde los márgenes, el relleno o los bordes.
width: 100%;hará que el elemento sea tan ancho como el contenedor principal. Se agregará espacio adicional al tamaño del elemento sin tener en cuenta el elemento principal. Esto suele causar problemas.
lo mismo que @ C-link proporcionado pero con una interfaz más gráfica adicional. así que +1
Navin Rauniyar
8
Se trata de márgenes y bordes. Si usa width: auto, luego agrega un borde, su div no será más grande que su contenedor. Por otro lado, si usa width: 100%y algún borde, el ancho del elemento será 100% + borde o margen. Para obtener más información, consulte esto .
Siempre que el valor de ancho sea automático, el elemento puede tener margen horizontal, relleno y borde sin ser más ancho que su contenedor (a menos, por supuesto, la suma de margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right es más grande que el contenedor). El ancho de su cuadro de contenido será el que quede cuando el margen, el relleno y el borde se hayan restado del ancho del contenedor.
Por otro lado, si especifica ancho: 100%, el ancho total del elemento será el 100% de su bloque contenedor más cualquier margen horizontal, relleno y borde (a menos que haya usado box-sizing: border-box, en cuyo caso solo se agregan márgenes al 100% para cambiar la forma en que se calcula su ancho total). Esto puede ser lo que desea, pero lo más probable es que no lo sea.
El ancho inicial de un elemento de nivel de bloque como div o p es automático.
Use width: auto para deshacer los anchos especificados explícitamente.
si especifica ancho: 100%, el ancho total del elemento será el 100% de su bloque contenedor más cualquier margen horizontal, relleno y borde.
Entonces, la próxima vez que se encuentre configurando el ancho de un elemento de nivel de bloque al 100% para que ocupe todo el ancho disponible, considere si lo que realmente desea es configurarlo en automático.
Ancho 100%:
Hará contenido al 100%. margen, borde, relleno se agregarán a este ancho y el elemento se desbordará si se agrega alguno de estos.
Ancho automático:
se ajustará al elemento en el espacio disponible, incluido el margen, el borde y el relleno. el espacio restante después de ajustar el margen + relleno + borde estará disponible ancho / alto.
Ancho 100% + tamaño de caja: caja de borde:
También se ajustará al elemento en el espacio disponible, incluyendo borde, relleno (el margen hará que se desborde del contenedor).
Esto no responde a la cuestión de la diferencia entre 100 & y auto.
JoeTidee
1
Sí, lo sé, pero estoy tratando de mostrar aquí sobre width: auto y display: inline-block . Cuando queremos aumentar automáticamente el ancho de cualquier elemento de nivel de bloque, podemos usar esto. Y diferencia entre 100% y automático
Mohammed Javed
0
Cuando decimos
width:auto;
el ancho nunca excederá el ancho total del elemento padre. El ancho máximo es el ancho del padre. Incluso si agregamos borde, relleno y margen, el contenido del elemento en sí se volverá más pequeño para dar espacio para el borde, el relleno y el margen. En caso de que el espacio requerido para el borde + relleno + margen sea mayor que el ancho total del elemento principal, entonces el ancho del contenido será cero.
Cuando decimos
width:100%;
el ancho del contenido del elemento se convertirá en el 100% del elemento principal y, a partir de ahora, si agregamos borde, relleno o margen, el elemento secundario superará el ancho del elemento principal y comenzará a desbordarse del elemento principal.
Respuestas:
Ancho automático
Ancho 100%
Para visualizar la diferencia, vea esta imagen:
Fuente
fuente
width: autocomporta de esa manera: stackoverflow.com/questions/28353625/…autohace lo mismo quefill-availablewidth: auto;hará todo lo posible por mantener un elemento del mismo ancho que su contenedor principal cuando se agregue espacio adicional desde los márgenes, el relleno o los bordes.width: 100%;hará que el elemento sea tan ancho como el contenedor principal. Se agregará espacio adicional al tamaño del elemento sin tener en cuenta el elemento principal. Esto suele causar problemas.fuente
Se trata de márgenes y bordes. Si usa
width: auto, luego agrega un borde, su div no será más grande que su contenedor. Por otro lado, si usawidth: 100%y algún borde, el ancho del elemento será 100% + borde o margen. Para obtener más información, consulte esto .fuente
Siempre que el valor de ancho sea automático, el elemento puede tener margen horizontal, relleno y borde sin ser más ancho que su contenedor (a menos, por supuesto, la suma de margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right es más grande que el contenedor). El ancho de su cuadro de contenido será el que quede cuando el margen, el relleno y el borde se hayan restado del ancho del contenedor.
Por otro lado, si especifica ancho: 100%, el ancho total del elemento será el 100% de su bloque contenedor más cualquier margen horizontal, relleno y borde (a menos que haya usado box-sizing: border-box, en cuyo caso solo se agregan márgenes al 100% para cambiar la forma en que se calcula su ancho total). Esto puede ser lo que desea, pero lo más probable es que no lo sea.
Fuente:
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
fuente
El ancho inicial de un elemento de nivel de bloque como div o p es automático.
Use width: auto para deshacer los anchos especificados explícitamente.
si especifica ancho: 100%, el ancho total del elemento será el 100% de su bloque contenedor más cualquier margen horizontal, relleno y borde.
Entonces, la próxima vez que se encuentre configurando el ancho de un elemento de nivel de bloque al 100% para que ocupe todo el ancho disponible, considere si lo que realmente desea es configurarlo en automático.
fuente
Ancho 100%: Hará contenido al 100%. margen, borde, relleno se agregarán a este ancho y el elemento se desbordará si se agrega alguno de estos.
Ancho automático: se ajustará al elemento en el espacio disponible, incluido el margen, el borde y el relleno. el espacio restante después de ajustar el margen + relleno + borde estará disponible ancho / alto.
Ancho 100% + tamaño de caja: caja de borde: También se ajustará al elemento en el espacio disponible, incluyendo borde, relleno (el margen hará que se desborde del contenedor).
fuente
Usando ancho: auto; + pantalla: bloque en línea; en CSS dando un efecto impresionante.
fuente
Cuando decimos
el ancho nunca excederá el ancho total del elemento padre. El ancho máximo es el ancho del padre. Incluso si agregamos borde, relleno y margen, el contenido del elemento en sí se volverá más pequeño para dar espacio para el borde, el relleno y el margen. En caso de que el espacio requerido para el borde + relleno + margen sea mayor que el ancho total del elemento principal, entonces el ancho del contenido será cero.
Cuando decimos
el ancho del contenido del elemento se convertirá en el 100% del elemento principal y, a partir de ahora, si agregamos borde, relleno o margen, el elemento secundario superará el ancho del elemento principal y comenzará a desbordarse del elemento principal.
fuente