Compruebe si hay fugas y rellene los huecos: HTML+CSS

1,HTML

1. Porcentaje de tamaño

Relativo al marco de referencia del elemento ( bloque contenedor ).

1. Elementos ordinarios

El área de contenido (ancho | alto) en relación con el elemento de bloque ancestro más cercano (generalmente el elemento padre) .

Ejemplo

.box {
    
    
	width: 500px;
	height: 300px;
	padding: 50px; /* 没有影响 */
}
.item {
    
    
	width: 50%; /* == 500px * .5 = 250px */
	height: 50%; /* == 300px * .5 = 150px */
}

.box {
    
    
	width: 500px;
	height: 300px;
	padding: 50px; /* 有影响 */
	box-sizing: border-box;
}
.item {
    
    
	width: 50%; /* == 500px * .5 - 50 = 200px */
	height: 50%; /* == 300px * .5 - 50 = 100px */
}

2. Elementos posicionados absolutamente (fijos)

En relación con el elemento ancestro, el área de relleno ((ancho | alto) + relleno) del elemento cuya posición más cercana no es estática .

3. Porcentajes comunes

Los porcentajes comunes, excepto height, son relativos a width.

propiedades css	sistema de referencia porcentual	Observación
altura, arriba, abajo	Altura del bloque que contiene	Cuando la altura del sistema de referencia se ve afectada por su propio contenido, la configuración no es válida.
ancho, izquierda, derecha, relleno, margen, borde	Contiene ancho de bloque

2. elemento de formulario de formulario

1, formulario

Para obtener más información, consulte Prevención del envío de formularios.

2, botón

MDN - botón

1, tipo. Valor predeterminado submit. Si el botón está dentro de una etiqueta de formulario, el comportamiento predeterminado es enviar el formulario. Se puede configurar para buttonque el botón no tenga un comportamiento predeterminado.

2. forma. Representa el elemento de formulario asociado. El valor es form.id, por lo que no es necesario colocar el elemento del botón dentro del elemento del formulario.

3. restablecer, restablecer lo seleccionado (la página no se recargará).

3, etiqueta

MDN - etiqueta

Se puede for="id"asociar mediante o <label>paquete.

<form>
  <div>
    <label for="basketball">喜欢篮球</label>
    <input type="checkbox" name="basketball" id="basketball" />
  </div>
  <div>
    <label>
      <span>喜欢足球</span>
      <input type="checkbox" name="football" />
    </label>
  </div>
</form>

4, esquema

borde exterior. Los elementos del formulario generalmente se configuran outline: noney luego se personalizan.

Además, outlineno ocupa el tamaño de la caja. El tamaño de algunos dibujos de diseño de interfaz de usuario utiliza el borde exterior. Por lo tanto, puede utilizar esto cuando el desarrollo front-end tenga requisitos de tamaño estrictos.

5, sangría de texto

Define la cantidad de sangría antes de la primera línea del contenido de texto de un elemento de bloque. El efecto es padding-leftsimilar a .

6, radio

Asociar unicidad con nombre

<input type="radio" name="contact" value="mail" />
<input type="radio" name="contact" value="address" />

3. Atributos booleanos

En la etiqueta html, solo necesita escribir el nombre del atributo , no el valor del atributo. Esta propiedad es cierta.

Ejemplo

<select multiple disabled>
  <option selected>123</option>
</select>

<input type="checkbox" checked>

4, contento

contenteditable indica si el elemento se puede editar. Los editores de texto enriquecido se implementan utilizando esta propiedad.

Aunque es una propiedad de enumeración, puede ser como una propiedad booleana: simplemente escribir el nombre de la propiedad significa verdadero de forma predeterminada.

<div class="box" contenteditable></div>

.box {
    
    
  width: 200px;
  height: 200px;
  outline: 1px solid;
  overflow: auto;
  resize: both; /* 可调整尺寸 */
}

Efecto:

2, CSS

1. Valor de estilo de color de transparencia

Los siguientes tres métodos de escritura tienen el mismo efecto.

div {
    
    
  color: rgba(0, 0, 0, 0.5);
  color: rgb(0 0 0 / 50%);
  color: #00000080;
}

2, cambiar el tamaño

cambiar el tamaño

Generalmente se utiliza para controlar <textarea>si se puede ajustar el tamaño. resize: noneAjustes prohibidos.

1, pero también puede controlar de forma independiente el cambio de tamaño en una direcciónvertical horizontal both

2. También puede controlar otros elementos. Sin embargo, los siguientes elementos no se aplican :

• elementos en línea
• Elementos de bloque con atributo de desbordamiento establecido en visible

Ejemplo:

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

.box {
    
    
  outline: 1px solid;
  width: 200px;
  height: 200px;
  overflow: auto;
  resize: both;
}

Efecto:

3. Flotando

float hace que la altura del padre colapse.
resolver:

• Formularios para padres overflow: hiddenBFC
• El padre agrega un elemento secundario y establece un flotador claroclear:both

Generalmente se establecerá como una clase general.

clearfix::after {
    
    
  content: '';
  display: block;
  clear: both;
}

4, alineación vertical

alineación vertical

Sólo inline inline-block table-celltiene efecto sobre los elementos. Se utiliza para controlar la alineación vertical.

Los valores de los atributos pueden ser valores numéricos específicos.

<div>
  <input type="checkbox">
  <span style="font-size: 14px;">这是value</span>
</div>

Los dos métodos siguientes se pueden alinear y ajustar según la situación específica.

input {
    
    
  vertical-align: -2px;
}
/* 或 */
span {
    
    
  vertical-align: 2px;
}

5. Selector de hermanos

Selector de combinación CSS

/*  一般兄弟组合器，匹配同一父元素下，p 元素后的所有 span 元素。 */
p ~ span {
    
    }

/*  紧邻兄弟组合器，紧邻 p 元素的第一个 span 元素 */
p + span {
    
    }

6. Selector de pseudoclase

1, nth-childtodos los elementos participan en el recuento y luego encuentran el elemento especificado.

<div>
  <span>span1</span>
  <p>p1</p>
  <span>span2</span>
  <span>span3</span>
</div>

span:nth-child(-n + 3) {
    
    
  color: red;
}

span:nth-child(2n + 1) {
    
    
  color: red;
}

Los dos efectos de visualización anteriores son iguales.

2. nth-of-typePrimero determine el tipo de elemento y luego cuente los elementos del mismo tipo.

<div>
  <div>div1</div>
  <p>p1</p>
  <p>p2</p>
  <div>div2</div>
  <p>p3</p>
  <p>p4</p>
</div>

p:nth-of-type(2n + 1) {
    
    
  color: red;
}

Efecto

7. Uso de imágenes de sprites (imágenes de sprites)

duende

Reduzca la cantidad de solicitudes de imágenes y mejore la eficiencia de carga del navegador.

Úselo background-positionpara determinar la ubicación de la imagen de destino.

div {
    
    
  width: 30px;
  height: 30px;
  background: url() no-repeat -100px -100px;
  /* 简写用的下面的属性 */
  /* background-position: -100px -100px; */
}

8. Posicionamiento

1. Una máscara que ocupa toda la pantalla.

/* 百分比相对视口 */
.mask {
    
    
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

o

.mask {
    
    
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

, 2. El posicionamiento absoluto logra el centrado vertical y horizontal, el elemento centrado debe tener ancho y alto. Porcentaje de la parte superior izquierda, en relación con el marco de referencia (referenciado al porcentaje de dimensión más superior ).

3. Cuando se abre el cuadro de diálogo emergente de pantalla completa, configúrelo body { overflow: hidden}para evitar que la página se desplace.

4. Los elementos absolutamente posicionados y flotantes display: blockno se pueden modificar.

---

Arriba, continuará.