Tabla de contenido
1. El problema del ancho de los elementos
4. Establecer cuadro de borde globalmente
5. El problema de la altura de los elementos
5.1.1 Use el diseño de tabla css en lugar del diseño flotante
5.1.2 Usando flexbox para lograr columnas de igual altura
5.1.3 Uso de altura mínima y altura máxima
5.1.4 Centrar contenido verticalmente
1. El problema del ancho de los elementos
Al establecer el ancho o el alto de un elemento, se especifica el ancho o el alto del contenido y todo el relleno, los bordes y los márgenes se agregan a este ancho.
2. cale() , calcula el valor
.column-wrap .container{
width: 100%;
}
.column-wrap .container main{
padding: 20px;
width: 70%;
border-radius: 0.5em;
background-color: #890;
float: left;
}
.column-wrap .container sidebar{
padding: 20px;
margin-left: 1.5em;
width: calc(30% - 1.5em);
border-radius: 0.5em;
background-color: #890;
float: left;
}
<div class="column-wrap">
<h2>实现等高列</h2>
<div>
<header>Franklin Running Club</header>
<div class="container">
<main>
<h3>Welcome Join Us</h3>
<p>你好，欢迎加入我们！</p>
</main>
<sidebar>
这里是侧边栏
</sidebar>
</div>
</div>
</div>Efecto:
3. Ajustar el modelo de caja
El comportamiento del modelo de caja se puede ajustar en CSS usando la propiedad de tamaño de caja.
El valor predeterminado de box-sizing es content-box, lo que significa que cualquier ancho o alto especificado solo establecerá el tamaño del cuadro de contenido.
Después de que el tamaño del cuadro se establezca en cuadro de borde, los atributos de alto y ancho establecerán la suma del contenido, el relleno y el tamaño del borde.
4. Establecer cuadro de borde globalmente
Todos los elementos de la página se seleccionan con el selector universal (*), y todos los pseudoelementos de la página se seleccionan con dos selectores. Pon este código al principio de tu hoja de estilo.
*,
::before,
::after{
box-sizing:border-box;
}
Código más optimizado:
Los modelos de caja generalmente no se heredan, pero usan la palabra claveHeredar para forzar la herencia.
Como se muestra en el siguiente código, el contenedor de nivel superior del componente de terceros se puede seleccionar para restaurarlo en el cuadro de contenido si es necesario. Los elementos internos de este componente heredarán el modelo de caja.
5. El problema de la altura de los elementos
El flujo normal de documentos está diseñado para un ancho limitado y una altura ilimitada.
Al establecer explícitamente la altura de un elemento, el contenido puede desbordar el contenedor.
El comportamiento del contenido desbordado se puede controlar con la propiedad de desbordamiento , que admite los siguientes 4 valores.
❑ visible (predeterminado): todo el contenido es visible, incluso si desborda el borde del contenedor.
❑ oculto: el contenido que desborda el borde de relleno del contenedor se recorta y no se puede ver.
❑ desplazamiento: aparece una barra de desplazamiento en el contenedor y el usuario puede desplazarse para ver el contenido restante. En algunos sistemas operativos, aparecen barras de desplazamiento horizontales y verticales aunque todo el contenido esté visible (sin desbordarse). En este caso, sin embargo, la barra de desplazamiento no se puede desplazar (atenuada).
❑ automático: el contenedor solo se desplazará cuando el contenido se desborde.
Especifique la altura como un porcentaje: debe definir explícitamente una altura para el elemento principal.
Hay un problema al especificar la altura con un porcentaje. Los porcentajes se refieren al tamaño del bloque contenedor del elemento, pero la altura del contenedor suele estar determinada por la altura de los elementos secundarios. Esto provocaría un bucle infinito, que el navegador no puede manejar, por lo que ignora la declaración.
Para que las alturas porcentuales funcionen, se debe definir una altura explícita para el elemento principal.
5.1 Columnas de contorno
Su mejor opción es dejar que ellos determinen su propia altura y luego expandir las columnas más cortas para igualar la altura de las columnas más altas.
5.1.1 Use el diseño de tabla css en lugar del diseño flotante
.column-wrap .container{
width: 100%;
display: table;
}
.column-wrap .container main{
padding: 20px;
width: 70%;
border-radius: 0.5em;
background-color: #890;
display:table-cell;
}
.column-wrap .container sidebar{
padding: 20px;
margin-left:1.5em;(display:table-cell,外边距不生效)
width: 30%;
border-radius: 0.5em;
background-color: #890;
display:table-cell;
}
Como puede ver en la imagen de arriba, el margen exterior no afecta el elemento de la celda de la tabla, entonces, ¿cómo hacer que el intervalo surta efecto?
5.1.2 Usando flexbox para lograr columnas de igual altura
Establezca la visualización: flexione al contenedor, se convierte en un contenedor flexible y los subelementos tienen la misma altura de forma predeterminada
.container{
display:flex;
}
.main{
padding: 1.5em;
width: 70%;
border-radius: 0.5em;
}
.sidebar{
width:30%
margin-left: 1.5em;
padding: 1.5em;
border-radius: 0.5em;
}5.1.3 Uso de altura mínima y altura máxima
altura mínima y altura máxima. En lugar de definir explícitamente una altura, puede usar estas dos propiedades para especificar un valor mínimo o máximo, de modo que el elemento determine automáticamente su altura dentro de esos límites.
5.1.4 Centrar contenido verticalmente
La declaración de alineación vertical solo afecta a los elementos en línea o elementos de celdas de tabla . Para elementos en línea, controla la alineación del elemento con otros elementos en la misma línea. Por ejemplo, puede usarlo para controlar la alineación de imágenes en una fila con texto adyacente.
Guía de centrado vertical
La mejor manera de centrar el contenido en un contenedor es considerar diferentes factores según el escenario específico. Antes de emitir un juicio, hágase las siguientes preguntas una por una hasta encontrar una solución adecuada.
❑ ¿Se puede utilizar un contenedor de altura natural? Agregue un relleno igual en la parte superior e inferior del contenedor para centrar el contenido.
❑ ¿El contenedor necesita especificar una altura o evitar relleno? Use display: table-cell y vertical-align: middle para el contenedor.
❑ ¿Puedo usar Flexbox? Si no necesita compatibilidad con IE9, puede usar Flexbox para centrar el contenido.
❑ ¿El contenido dentro del contenedor es solo una línea de texto? Establezca una altura de fila grande igual a la altura ideal del contenedor. Esto expandirá la altura del contenedor para acomodar la altura de la fila. Si el contenido no es un elemento en línea, se puede configurar como bloque en línea.
❑ ¿Se conocen las alturas tanto del contenedor como del contenido? Posiciona el contenido absolutamente. (Esto solo se recomienda si ninguno de los métodos mencionados anteriormente funciona).
❑ ¿No sabes la altura de los elementos interiores? Combina transformación con posicionamiento absoluto. (Nuevamente, este método solo se recomienda si ninguno de los métodos mencionados anteriormente funciona). Si no está seguro, consulte el sitio web howtocenterincss. Este sitio web es excelente, puede completar algunas opciones de acuerdo con su propia escena y luego generará el código centrado verticalmente en consecuencia.