Aplicación del ancho adaptable
1. Atributo: ancho
2. Valor del atributo: px/%
3. Características del ancho adaptable
- HTML, BODY significa navegador, el valor predeterminado es un elemento a nivel de bloque y el ancho es 100%
- cuando el bloque- el elemento de nivel no está configurado Cuando el ancho está configurado al 100%, el ancho llenará la pantalla completa (efecto de banner)
- El elemento secundario es un elemento de nivel de bloque, y cuando el ancho no está configurado, será igual al ancho del padre
: el ancho no se hereda, es solo una especificación de diseño para elementos de nivel de bloque Eso es todo:
[Importante] Cuando un elemento de nivel de bloque está fuera del flujo del documento, el ancho está determinado por el contenido => establecer el ¡La caja flotante y de posicionamiento debe recordar aumentar el ancho y la altura! ! !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100%;
height: 62px;
background: #232323;
}
p{
height: 30px;
background: pink;
float: left;
}
</style>
</head>
<body>
<div>
<p>logo</p>
</div>
</body>
</html>Representaciones:
Aplicación altamente adaptable
1. Atributo: altura
2. Valor del atributo: px/%
3. Funciones altamente adaptables
: la altura predeterminada del navegador es 0, html, body{height:100%}
: establezca la altura del elemento en 0, la altura del cuadro no se mostrará, agregar texto excederá el alcance del contenedor y no expandirá el cuadro
- Establezca la altura del elemento en automático o cuando no esté escrito, puede ser adaptativo (adaptable a la altura)
- Un común situación en la que la altura se establece en 100
- html, body{height:100%} El ancho y la altura predeterminados del navegador se establecen en 100 % de pantalla completa
- img{width:100%;height:100%} El porcentaje es una unidad relativa , calculado en relación con el elemento principal
4. Requisitos: hay tres cuadros
: el primer cuadro tiene un ancho del 100 % y una altura de 100 px
, el segundo cuadro
: mantiene una altura mínima cuando no hay contenido en el cuadro
, cuando hay hay más contenido en el cuadro, la altura del cuadro se puede expandir para acomodar
- El ancho del tercer cuadro es 100% y la altura es 100px
5. El concepto de altura mínima: altura mínima
- La primera función: altura: el valor puede tener una altura fija
- La segunda función: altura: auto puede hacer lo mismo adaptativo
6. El problema de compatibilidad de la altura mínima (historial del navegador)
- el primer navegador Netscape (Netscape Navigator NN)
- la segunda guerra de navegadores IE9 (y posteriores)
- la altura mínima no se puede usar en versiones inferiores
- Resuelva el análisis de atributos de versión baja : _ atributo: el valor del atributo indica que solo se puede analizar en la versión baja
: la altura tiene dos funciones en el navegador de la versión baja y el efecto de la altura mínima es el mismo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 300px;
/* height: 0; */
background: pink
}
</style>
</head>
<body>
<div>
文本 <br>
文本
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;padding: 0;
}
.box1{
height: 100px;
background: pink
}
.box3{
height: 100px;
background: skyblue
}
.box2{
min-height: 300px;/* 高版本 */
_height: 300px; /* 低版本 */
background: yellowgreen
}
/* 公司的新闻列表 */
</style>
</head>
<body>
<div class="box1">第一个盒子</div>
<div class="box2">
<p>000000001</p>
<p>000000002</p>
<p>000000003</p>
<p>000000004</p>
<p>000000005</p>
<p>000000006</p>
<p>000000007</p>
<p>000000008</p>
<p>000000009</p>
<p>000000010</p>
<p>000000011</p>
<p>000000012</p>
<p>000000013</p>
<p>000000014</p>
<p>000000015</p>
<p>000000016</p>
<p>000000017</p>
<p>000000018</p>
</div>
<div class="box3">第三个盒子</div>
</body>
</html>
La extensión de los valores máximos y mínimos
Valor máximo
- ancho máximo max-width:1920px Restringe la adaptación de la pantalla del usuario Valor máximo
- altura máxima max-height Juzgar que la función de cambio de página se puede realizar cuando los comentarios del usuario alcanzan una cierta altura
Valor mínimo
- ancho mínimo min-width La restricción el cuadro no se desplegará
- altura mínima
enfoque adaptable de altura mínima: ancho mínimo y ancho máximo (diseño receptivo - consulta de medios)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../../03-reset.css">
<style>
#header{
height: 100px;
background: pink;
/* 最小宽度 屏幕变化的时候最小值是? */
min-width: 800px
}
.box1{
width: 300px;
height: 100px;
background: green;
float: left;
}
.box2{
width: 500px;
height: 100px;
background: blue;
float: right;
}
</style>
</head>
<body>
<div id="header">
<div class="box1">logo</div>
<div class="box2">导航</div>
</div>
</body>
</html>
Colapso de altura/Colapso de altura
1. Causa: el elemento principal no establece la altura y el elemento secundario está fuera del flujo del documento
2. Soluciones (más de 10 tipos)
1. Solución: Agregar overflow:hidden al elemento principal
- Principio : Establecer desbordamiento :hidden desencadena BFC, hay una regla de diseño en BFC: los elementos flotantes también participarán en el cálculo de la altura
2. Solución: agregue cualquier etiqueta (div) debajo del último elemento secundario y establezca el estilo clear:both
- Explicación: clear borra flotante izquierda/derecha/ambos
- Principio: Borrar todos los flotantes reservados arriba - Ventajas y desventajas : Las ventajas son de redundancia
convenientes, las desventajas agregan etiquetas inútiles, más contenido:''; pantalla:bloque; ancho:100% ; altura:0; claro:ambos; desbordamiento:oculto; visibilidad:oculto ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../../03-reset.css">
<style>
.box{
width: 1000px;
/* height: 500px; */
border: 10px solid #000;
margin: 100px auto;
}
.box1{
width: 300px;
height: 300px;
background: skyblue;
float: left;
margin: 10px
}
.box2{
width: 300px;
height: 300px;
background: yellowgreen;
float: left;
margin: 10px
}
.box3{
width: 300px;
height: 300px;
background: purple;
float: left;
margin: 10px
}
/* 不成文的规定 */
/* .clear-fix{
clear: both
} */
/* .clear-fix::after{
content:'';
display:block;
width:100%;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
} */
</style>
</head>
<body>
<div class="box clear-fix"><!-- BFC区域 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
Purga universal explicada
1: Selector de pseudoobjetos/selector de pseudoelementos (selector de pseudoclases para distinción)
1. Selector::after{content:''} significa agregar contenido después de xx, debe usarse junto con el contenido y no es requerido para escribir Cualquier contenido
2. El selector::before{content:''} significa agregar contenido antes de xx, debe usarse junto con el contenido, y no necesita escribir ningún contenido
Dos: Varios usos de ocultar
1.display:none elimina la visualización y la estructura de los elementos
2.visibility:hidden elimina el modo de visualización pero la posición aún existe
Tres: ¿Cuál es la diferencia entre pseudo-objetos y pseudo-clases?
1. La diferencia en la escritura: En css2, las pseudo-clases y los pseudo-objetos son ambos dos puntos, y en css3, se requieren dos dos puntos para distinguir los pseudo-objetos prescritos. -objetos
2. En términos de función Diferencia: el cambio de pseudoclase es el estado del elemento, el pseudoobjeto no solo puede cambiar el estado del elemento sino también agregar estructura (virtual)
