Aprendizaje de CSS -- margen

1. que es

margen El margen exterior es el espacio que queda fuera del elemento, de modo que haya un intervalo apropiado entre el elemento y el elemento; el

atributo de margen puede establecer los atributos del margen exterior en cuatro direcciones para el elemento, es decir, arriba, a la derecha, abajo , E izquierda. margin es la abreviatura de margin-top, margin-right, margin-bottom, margin-left, el valor de cada valor puede ser valor fijo, porcentaje o automático;

1.1 Líneas de referencia para la parte superior, derecha, inferior e izquierda en el margen

Sus líneas de referencia se dividen en dos categorías, superior e izquierda son una categoría, inferior y derecha son una categoría;

top se mueve verticalmente hacia abajo o hacia arriba con el borde superior del contenido del bloque contenedor o el borde inferior del margen del elemento conectado verticalmente sobre él como línea de referencia, lo que hará que la posición del elemento se mueva;

left usa el lado izquierdo del contenido del bloque contenedor o el lado derecho del margen de los elementos conectados en el lado horizontal izquierdo como línea de referencia para moverse horizontalmente hacia la derecha o hacia la izquierda, lo que hará que la posición del elemento a mover;

la parte inferior se mueve verticalmente hacia abajo o hacia arriba utilizando el borde inferior del propio elemento como línea de referencia, lo que puede hacer que se mueva la posición de los elementos adyacentes;

right usa el borde derecho del propio elemento como línea de referencia para moverse horizontalmente hacia la derecha o hacia la izquierda, lo que puede hacer que se mueva la posición de los elementos adyacentes;

1.2 Valores positivos y negativos de valores fijos

• Un valor positivo de
  arriba a la izquierda moverá el elemento hacia abajo y hacia la derecha en relación con la posición anterior;
  un valor positivo de abajo a la derecha aumentará la distancia en blanco desde el elemento adyacente, y no se moverá por sí mismo, y los elementos adyacentes en la derecha horizontal y la parte inferior vertical se alejarán del elemento;

• Valor negativo
  arriba a la izquierda El valor negativo hará que el elemento se mueva hacia arriba y hacia la izquierda en la dirección opuesta en relación con la posición anterior; la
  parte inferior derecha no permitirá que el elemento se mueva el margen se superpondrá con el contenido del elemento (el valor negativo puede hacer que los elementos vecinos se acerquen más a ellos y cubra Por supuesto, el ancho y la altura del elemento en sí no han cambiado.)

  El ancho y alto total de la caja = contenido + relleno + borde + margen;

  Si se establece la propiedad de ancho para el cuadro, se determina el ancho y establecer un margen derecho negativo y un margen inferior solo cambiará la línea de referencia del cuadro a la derecha y la parte inferior.
  Si el ancho del cuadro hereda el ancho del elemento principal, establezca margen derecho negativo y margen inferior, el ancho y el alto del contenido del cuadro agregarán el valor absoluto de margen derecho/margen inferior al original valor.

  La figura 1 (izquierda) es la posición del cuadro sin margen; la figura 1 (centro) tiene un margen: 20px agregado al cuadro; se puede ver que el margen se agrega al área en blanco. El valor positivo de top se basa en el contenido original-superior Agregue hacia abajo, el valor positivo de la izquierda se basa en el contenido original-izquierda, agregue a la derecha, el valor positivo de la parte inferior se basa en el borde inferior, agregue hacia abajo, el valor positivo de la derecha se basa en el borde derecho, agregue a la derecha,
  
  

1.3 Referencia a valores porcentuales

El valor del margen también puede ser un porcentaje, que se refiere al ancho del bloque que lo contiene ;

<style>
    body {
    
    
      margin: 0;
    }
   .box {
    
    
    width: 500px;
    height: 300px;
    background-color: palegreen;
   }
   .son {
    
    
    width: 50%; 
    height: 50%; 
    margin: 10% 5%; 
    background-color: pink;
   }
  </style>

  <div class="box">
    <div class="son">子元素</div>
  </div>

El bloque contenedor de son es box,
son width = box width * 50% = 500 * 50% = 250px;
son height = box height * 50% = 300 * 50% = 150px;
son margin-top / bottom = box width * 10 % = 500 * 10 % = 50 px;
margen hijo-izquierdo/derecho = ancho del cuadro * 5 % = 300 * 5 % = 15 px;

Valores porcentuales de ancho, margen, relleno, izquierda, derecha, calculados en relación con el ancho del bloque contenedor.

Valores porcentuales de altura, superior, inferior, calculados en relación con la altura del bloque contenedor. Si el contenido cambia la altura del bloque contenedor, y el valor de posición es estático/relativo, y el valor porcentual es automático, se adapta a la altura del contenido.
(En el caso de modo de escritura predeterminado: horizontal-tb; y dirección: ltr;, cuando el modo de escritura cambia a vertical, la referencia se cambiará por el alto/ancho del bloque contenedor)

1.4 Excavación profunda automática

margen: 0 automático; / margen: 0 automático 0 automático;
margen: auto； / margen: auto auto auto auto;

Según la especificación CSS: si margin-top o margin-bottom es automático, su valor de uso es 0;

Por lo tanto, aunque los dos están escritos de manera diferente, los resultados reales de la ejecución son los mismos, lo que hace que el elemento de bloque esté centrado horizontalmente.

El valor de atributo automático se puede utilizar en los atributos de ancho, margen izquierdo, margen derecho;

El resultado de auto puede ser 0px, llenar automáticamente el espacio restante o 100%; el valor de auto es incierto y el resultado depende de la elección del navegador. A veces, en algunos casos especiales, este valor puede centrar el elemento.

El ancho total del elemento de bloque = margen izquierdo y derecho + borde izquierdo y derecho + relleno izquierdo y derecho + contenido = ancho del bloque contenedor;

Esta fórmula nos dice que el ancho total de los elementos del bloque debe ser exactamente igual al ancho del bloque contenedor, al mismo tiempo, esta fórmula es condicional.

1. el ancho es automático, luego otros valores automáticos (margen) son 0;
2. Los valores margin-left y margin-right son automáticos. Si queda espacio, los dos dividirán el espacio restante por igual para centrar el elemento horizontalmente.

A partir de las condiciones, podemos saber que si ancho: automático, entonces no hay margen; si el valor del margen es 0 automático o automático, izquierda y derecha dividirán por igual el espacio restante y centrarán el elemento de bloque horizontalmente.

margen: ¿Por qué se puede lograr automáticamente el centrado horizontal?
Debido al auto en la dirección horizontal, su valor calculado divide equitativamente el espacio disponible (espacio restante).

Entonces, si izquierda/derecha tiene solo un valor de auto, auto hará que el atributo ocupe el espacio restante disponible, y el resultado de margin-right: auto; es equivalente a la alineación derecha.

Quizás se pregunte por qué la parte superior e inferior son automáticas, por lo que se cuentan como 0 y no hay bisección vertical ni centrado.

Esto está relacionado con el modo de escritura, las reglas de diseño del flujo de documentos y la dirección del método:

Nuestra versión principal actual es texto horizontal y su ancho horizontal es fijo (si no hay una definición explícita de ancho o una visualización forzada en una línea, se encontrará con un ajuste de límites en lugar de una extensión horizontal). La dirección vertical se puede extender infinitamente.

Es precisamente porque la dirección vertical se extiende infinitamente y no hay un valor definido, por lo que no hay un valor de referencia que pueda usarse para calcular el margen y la altura en la dirección vertical. Es por eso que cuando el valor margin-top / margin-bottom es automático, automático se cuenta como 0 px. altura: auto; auto sigue el tamaño de la altura del contenido.

Si cambia el diseño de composición tipográfica y lo cambia a texto vertical, entonces la altura en la dirección vertical es fija y la dirección horizontal se extiende infinitamente.

Funciones afectadas por el modo de escritura: 1. colapso vertical del margen, 2. margen automático, 3. valores de margen y porcentaje de relleno;

Problema de plegado (colapso) de 2 márgenes

Como se mencionó anteriormente, el problema del plegado de márgenes es causado por la tipografía. Esto se debe a que, en la mayoría de los casos, el margen en la dirección vertical del pliegue puede parecer visualmente más hermoso y está más en línea con las expectativas del diseñador.

Los márgenes se utilizan para especificar la distancia mínima entre un elemento no flotante y el borde del cuadro que lo rodea . Se contraen dos o más márgenes verticales adyacentes y se utiliza el valor de margen más grande entre ellos . En la mayoría de los casos, los márgenes verticales colapsados ​​pueden ser visualmente más agradables desde el punto de vista estético y más cercanos a lo que pretendía el diseñador. ---- traducción de margen css1

En el modo de escritura horizontal , el margen se pliega en dirección vertical , es decir, margen superior/margen inferior En el modo de escritura vertical , el margen se pliega en dirección horizontal , es decir, margen derecho/margen inferior. izquierda _

De las palabras anteriores, podemos extraer alguna información clave:

1. Los elementos no flotantes se contraen, y los elementos flotantes y otros elementos no se contraerán cuando los márgenes sean adyacentes;
2. El modo de escritura determina la dirección de plegado del margen, el valor predeterminado es el modo de escritura horizontal, el plegado del margen es la dirección vertical y el modo de escritura vertical es la dirección de plegado horizontal;
3. El pliegue del margen toma un valor mayor;

Evite el método de plegado (colapso) de márgenes:

1. Colapso de margen de elementos hermanos
   Los elementos flotantes, los elementos de posicionamiento absoluto y los márgenes hermanos no causarán problemas de plegado;
   en la dirección vertical, solo establezca el valor de margen para un elemento para evitar problemas de plegado;
2. Colapso de margen entre padre e hijo
   No hay colapso de margen entre el elemento raíz y sus elementos hijo;
   agregue borde/relleno al elemento padre, de modo que los cuadros padre e hijo ya no se ajusten por completo;
   se define el desbordamiento de atributo y el valor no es visible (es decir, crea un elemento de bloque con un nuevo contexto de formato a nivel de bloque) no tiene un pliegue de margen con sus elementos secundarios; el valor de posición
   del elemento de posicionamiento principal es absoluto/fijo;
   cambie el tipo de elemento: agregue mostrar: tabla / flex / cuadrícula / en línea con el elemento principal -bloque;
   pseudo-elemento

   父元素::before {
         
         
   	content: '';
   	 display: table;
   }
   

3. uso de margen

1. Deje un espacio adecuado entre los elementos;

2. Deje que el elemento de bloque esté centrado horizontalmente,
   diseño de flujo (flotante + margen: automático),
   flotante + margen menos 50%,
   posicionamiento absoluto + margen;

3. Manejar primeros y últimos elementos especiales;

<style>
    li{
    
    
      height: 30px;
      line-height: 30px;
      border-bottom:1px solid #95ef85;
    }
    </style>

    <div class="box">
      <ol>
          <li>哇，我有下划线 (*^w^*)</li>
          <li>嗯啊嗯啊，我也有下划线 (=^-^=)</li>
          <li>不就是一个下划线，谁还没有啊 (-z-)...</li>
          <li>我，我没有 --(T ^ T)--</li>
      </ol>
  </div>

Hay muchas maneras de lidiar con el subrayado del último li, puede usar el selector css last-child, etc.; también puede agregar una clase al último li por separado; aquí nos centraremos en cómo el margen maneja el último subrayar;

.box {
    
     overflow: hidden; }
ol {
    
      margin-bottom: -1px; }

El valor del cuadro de margen de ol es -1 px, y la altura de ol permanece sin cambios, pero el margen exterior en la parte inferior de ol sube 1 px, solo alcanzando el subrayado del último. El área del cuadro adyacente también se acorta en 1px hacia arriba, y se establece desbordamiento: oculto; el subrayado del último está oculto por oculto.

4. Manejar espacios en la lista de imágenes;

<style>
    .wrap {
    
    
      width: 340px;
    }
    .box {
    
    
      overflow: hidden; /* BFC 清浮动*/
      background-color: aquamarine;
    }
    .img {
    
    
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 20px;
      background-color: greenyellow;
    }
    </style>

  <div class="wrap">
    <div class="box">
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
    </div>
  </div>

El ancho del ajuste es 340 px, el cuadro hereda el ancho del ajuste, que también es 340 px, el ancho del cuadro img es 100 px y el margen derecho es 20 px, se necesitan 3 img (100 + 20) * 3 = 360 px > 340px, así que no puedo dejarlo, y el tercer cuadro está envuelto.

Solución:

/*方法1：*/
.img:last-child {
    
    
      margin: 0;
} 
/*方法2：*/
.wrap {
    
    
      width: 340px;
      overflow: hidden;
    }
.box {
    
    
      overflow: hidden;
      background-color: aquamarine;
      margin-right: -20px;
}

El bloque contenedor de la caja es envolvente, por lo que el ancho total de la caja es igual al ancho del contenido de la envoltura.
3 imgs necesitan 360 px en una línea, es decir, el ancho (contenido) del cuadro debe ser de 360 ​​px (la posición de la línea verde), pero la envoltura del contenedor es solo de 340 px (la posición de la línea roja), y el el ancho total del cuadro solo puede ser de 340 px.
340 (real) = 360 (deseado) + (-20px)

Suponga que el ancho de la envoltura cambia con el tamaño del cuadro y que el ancho del cuadro es de 360 ​​px (la posición de la línea verde), lo que satisface la condición de que las 3 imágenes y sus respectivos márgenes derechos estén en una línea. tiempo, el margen derecho de la envoltura también está en la posición de la línea verde. conjunto de cuadros margin-right: -20px; Según

el margen es un valor negativo, el ancho del elemento permanece sin cambios, arriba, izquierda mueva el elemento hacia arriba y hacia la izquierda, abajo, derecha
simplemente mueva la línea de referencia del elemento, para que los elementos adyacentes estén más cerca del elemento

Se puede ver que el ancho del cuadro permanece sin cambios, que sigue siendo de 360 ​​px, pero la línea de referencia del margen derecho del margen exterior derecho del cuadro se mueve hacia la izquierda a la posición de color rojo, y la envoltura también se mueve a la posición de color rojo. En este momento, la envoltura es de solo 340 px. Establecer desbordamiento: oculto; ocultar el área amarilla (el margen derecho del tercer cuadro),

Diagrama esquemático del modelo de caja de caja:

6. Engaño visual de pseudo-contorno
   El diseño del contorno se refiere a la forma en que los elementos secundarios se distribuyen con alturas iguales en el elemento principal. Hay dos tipos de métodos de implementación para el diseño de contornos: contorno falso y contorno verdadero. El contorno falso es solo un contorno, mientras que el contorno verdadero es un contorno real. El diseño del contorno del margen es un pseudo-contorno.

   Método de implementación:
   1. Agregue padding-bottom: n px, margin-bottom: -n px, n es un número mayor para todos los elementos secundarios. Hay un problema con el orden de los dos.
   2. Agregue desbordamiento: oculto al elemento principal;
   principio:
   agregue relleno primero, de modo que el elemento secundario ocupe la posición hacia abajo; el valor negativo del margen devolverá la línea de referencia inferior del elemento secundario a la posición inicial cuando no haya relleno agregado, sin afectar la posición del elemento principal Marcador de posición para elementos hermanos.
   Agregue overflow:hidden al elemento principal; la altura del elemento principal se basará en la altura del elemento más alto en el elemento secundario como su propia altura, y ocultará el relleno del elemento de marcador de posición agregado anteriormente. La altura de la izquierda es 200 + 1000 = 1200 px, y la altura de la derecha es 300 + 1000 = 1300 px
   Desde el borde del subelemento en la figura a continuación, se puede ver que el subelemento no es igual altura, solo por el engaño visual del relleno y el color de fondo. Se siente como si se hubiera logrado un diseño de contorno.

  <style>
    .wrap {
    
    
      overflow: hidden; /* critical code */
      background-color: #aece8a;
    }
    .left, .right {
    
    
      padding-bottom: 1000px; /* critical code */
      margin-bottom: -1000px; /* critical code */
    }
    .left {
    
    
      float: left;
      width: 100px;
      height: 200px;
      background-color: aquamarine;
    }
    .right {
    
    
      float: left;
      width: 200px;
      height: 300px;
      background-color: thistle;
    }
    </style>
</head>
<body>
  <div class="wrap">
    <div class="left">1</div>
    <div class="right">2</div>
  </div>b 

Referencia: 1. La especificidad del valor del margen
2. Aprendizaje de la serie del margen
3. Por qué el margen: el auto puede hacer que los elementos del bloque se centren horizontalmente