Escriba el título del catálogo aquí
Uno: diseño
1. borderNo se puede ver el último lado de la caja atravesada
Causa: El
modelo de caja se usa por defecto 标准盒子模型, es decir W3C盒子模型,
tamaño de caja: caja de contenido;
Problemas:
No borderveo el que está en el extremo derecho.
Solución:
configure el modelo de caja enIE盒子
tamaño de caja: caja de borde;
Efecto de solución:
2. Establecer la alineación vertical del elementovertical-align
- Atributos:
vertical-align - Definición y uso El
atributo de alineación vertical establece la alineación vertical del elemento. - Descripción
Este atributo define la alineación vertical de la línea base del elemento en la línea en relación con la línea base de la línea donde se encuentra el elemento. Le permite especificar valores de longitud negativos y valores porcentuales. Esto bajará el elemento en lugar de subirlo. En las celdas de la tabla, esta propiedad establecerá la alineación del contenido de la celda en el cuadro de la celda. - Ejemplo 1
<html>
<head>
<style type="text/css">
img.top {
vertical-align:text-top}
img.bottom {
vertical-align:text-bottom}
</style>
</head>
<body>
<p>
这是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>
<p>
这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>
</body>
</html>
- efecto
Propiedad de alineación vertical de CSS https://www.w3school.com.cn/css/pr_pos_vertical-align.asp
- Ejemplo 2 Situación real encontrada en el desarrollo del proyecto
- Fórmula de muestra de UI:
- Implementación de código propio
<div class="aside">
<div class="aside-value">{
{ item.ratio }}%</div>
<div class="aside-suffix">生存</div>
</div>
.aside {
height: 47px;
font-size: 32px;
font-family: SourceHanSansSC, SourceHanSansSC-Bold;
font-weight: 700;
color: #67d8c2;
line-height: 47px;
position: absolute;
right: 20px;
bottom: 17px;
div {
display: inline-block;
}
.aside-suffix {
height: 20px;
font-size: 14px;
font-family: SourceHanSansSC, SourceHanSansSC-Regular;
font-weight: 400;
line-height: 20px;
width: 28px;
// vertical-align: top;
// margin-top: 17px;
}
.aside-value {
padding-right: 8px;
}
}
- No
vertical-align: top;es fácil realizar estilos de interfaz de usuario sin agregar estilos.
En este momento, agregarmarginatributos no funciona, como se muestra a continuación.
- Después de agregar
vertical-align: top;atributos, el uso de margen tendrá un efecto
3. Uso de pseudoclases
Se pueden utilizar tanto elementos a nivel de bloque como elementos en línea,
Tenga en cuenta que la siguiente escritura utiliza posicionamiento absoluto para mostrarse normalmente.
.input::after {
content: '';
background-color: #91acc5;
width: 9vw;
height: 1px;
position: absolute;
top: 8.5vw;
left: 1.5vw;
}
4. Fusión de márgenes (colapso del margen exterior) ⭐
Combinar márgenes significa que cuando dos márgenes verticales se encuentran, formarán un margen.
La altura del margen combinado es igual a la mayor de las alturas de los dos márgenes combinados. ,
外边距合并
La fusión de márgenes (superposición) es un concepto bastante simple. Sin embargo, puede causar mucha confusión al diseñar páginas web en la práctica.
En pocas palabras, la combinación de márgenes significa que cuando dos márgenes verticales se encuentran, formarán un margen. La altura del margen combinado es igual a la mayor de las alturas de los dos márgenes combinados.
Cuando un elemento aparece encima de otro elemento, el margen inferior del primer elemento se fusionará con el margen superior del segundo elemento. Por favor, vea la imagen a continuación:
Cuando un elemento está contenido en otro elemento (asumiendo que no hay un margen interior o un borde que separe los márgenes exteriores), sus márgenes superior e inferior también se fusionarán. Eche un vistazo a la imagen a continuación:
aunque parece extraño, los márgenes pueden incluso fusionarse consigo mismos.
Suponga que hay un elemento vacío con márgenes pero sin bordes ni relleno. En este caso, el margen superior y el margen inferior se unirán y se fusionarán:
si este margen se encuentra con el margen de otro elemento, también se fusionará: se
trata de una serie de elementos de párrafo que ocupan El espacio es muy pequeño, porque todos sus márgenes se fusionan para formar un pequeño margen.
La fusión de márgenes puede parecer extraña al principio, pero en realidad tiene sentido. Tome una página de texto típica compuesta por varios párrafos como ejemplo. El espacio sobre el primer párrafo es igual al margen superior del párrafo. Si no hay fusión de márgenes, los márgenes entre todos los párrafos siguientes serán la suma de los márgenes superiores e inferiores adyacentes. Esto significa que el espacio entre párrafos es dos veces mayor que la parte superior de la página. Si se produce una fusión de márgenes, el margen superior y el margen inferior entre los párrafos se fusionan, de modo que la distancia en todas partes es la misma.
Nota: Solo los márgenes verticales de los cuadros de bloque en el flujo de documentos normal fusionarán los márgenes. Los márgenes entre cuadros en línea, cuadros flotantes o posicionamiento absoluto no se fusionarán.
- Combinación de márgenes CSS https://www.w3school.com.cn/css/css_margin_collapsing.asp
- margin-collapse problem-hugejinfan-blog garden https://www.cnblogs.com/hugejinfan/p/5901320.html