Inicio>Tutorial de diseño web>efectos especiales web

Utilice el tamaño de la caja para implementar un marco de imitación div

Autor：Eve Cole Fecha de actualización：2009-12-07 16:08:04

[ Navegadores que participan en la prueba : IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2]
[ Sistema operativo : Windows]

Veamos primero el código:

Ejecutar cuadro de código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" />
<meta nombre="autor" contenido="Chomo" />
<enlace rel="inicio" href=" http://www.14px.com " título="Inicio" />
<title>Usar el tamaño del cuadro para implementar un marco de imitación div</title>
<tipo de estilo="texto/css">
* { margen:0; relleno:0;}
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; tamaño de caja:border-box; relleno:100px 0;
html,cuerpo {altura:100%;}
.top {posición:relativa; margen superior:-100px; altura:100px;
.side { posición: relativa; altura: 100%; fondo: #fc0; desbordamiento: ancho: 200px; margen derecho: 0; importante;
.main { posición:relativa; desbordamiento:auto; altura:100%;
.bottom { posición:relativa; altura:100px; fondo:#f60;
</estilo>
</cabeza>
<cuerpo>
<div clase="arriba">
arriba
</div>
<div clase="lado">
lado
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div clase="principal">
principal
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div clase="abajo">
abajo
</div>
</cuerpo>
</html>

[Ctrl+A Seleccionar todos los consejos: primero puede modificar parte del código y luego presionar Ejecutar]

Partes clave :

html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; tamaño de caja:border-box; relleno:100px 0;

El principio es probablemente este :

Más que mil palabras no valen una imagen. A través de la comparación antes y después de la cirugía plástica, todos deberían poder ver el efecto de box-sizing:border-box.

Los estudiantes que entienden el tamaño de cajas deben saber que proviene del mundo CSS3 que está lejos de Weiguo, por lo que IE6/IE7 no es compatible, pero soy muy responsable y digo: esta demostración normalmente es compatible con IE6/IE7.

Porque...

en IE6/IE7, el valor de tamaño de cuadro predeterminado de <html> es border-box (Nota: IE7 es un poco anormal y la conciencia se ha recuperado después del desbordamiento: oculto, lo que no afectará el funcionamiento normal de esta demostración).

La

pregunta

ahora es si usar este método. Comparemos las ventajas y desventajas y usted mismo podrá decidir:

es mejor usar el método de posicionamiento absoluto. Este método actualmente tiene dos ventajas principales:

  1. básicamente para cada navegador. Con el mismo método, el código CSS es simple, fácil de modificar y fácil de entender.
  2. compatible. El método de posicionamiento absoluto existe en OP10. Actualmente no hay forma de corregir el error, así que tengo que desviarme.

Su mayor desventaja es que es inflexible. Si no existiera IE6, creo que definitivamente elegiría el método de posicionamiento absoluto.

La siguiente es una demostración de ejemplo de aplicación.

Ejecutar cuadro de código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" />
<meta nombre="autor" contenido="Chomo" />
<enlace rel="inicio" href=" http://www.14px.com " título="Inicio" />
<title>Usar el tamaño del cuadro para implementar un marco de imitación div</title>
<tipo de estilo="texto/css">
* { margen:0; relleno:0;}
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; tamaño de caja:border-box; posición:relativa;}
html,cuerpo {altura:100%;}
.top {posición:relativa; margen superior:-100px; altura:100px;
.side { posición: relativa; altura: 100%; fondo: #fc0; desbordamiento: ancho: 200px; margen derecho: 0; importante;
.main { posición: relativa; desbordamiento: oculto; altura: 100%; margen izquierdo: 200 px; índice z: 2;}
.main iframe {alto:100%; ancho:100%; fondo:#fff; posición:absoluta;0;
.bottom { posición:relativa; altura:100px; fondo:#f60;
</estilo>
</cabeza>
<cuerpo>
<div clase="arriba">
arriba
</div>
<div clase="lado">
lado
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div clase="principal">
<iframe frameborder="0" src=" http://www.g.cn/"></iframe >
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div clase="abajo">
abajo
</div>
</cuerpo>
</html>

[Ctrl+A Todos los consejos de selección: primero puede modificar parte del código y luego presionar Ejecutar]

Un problema que debe tenerse en cuenta :

no desbordar: oculto al cuerpo, ocultará sin piedad todo lo que esté fuera de él Cosas, incluyendo arriba/abajo (encabezado/pie de página);

un punto importante que debe entenderse :

el método para generar la altura de [100%+(N)px]: div { height:100%; )px;} .

 

 
Artículos relacionados