1. Un div 200 * 200 se centra hacia arriba, abajo, izquierda y derecha en pantallas de diferentes resoluciones, implementado con CSS.
El método uno
usa valores negativos para lograr el centrado. Se puede llenar el cerebro de que la pantalla está al 50% desde la izquierda y la derecha, lo que puede estar centrado, pero donde se encuentra el DIV, el ancho desde los bordes exteriores izquierdo y derecho es menos 50%.
div{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-left:-100px;
height:-100px;
}
div{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
transform: translatey(-50%) translateX(-50%)
}
2. Escribe un diseño a la izquierda, al centro y a la derecha que llene la pantalla. Los bloques izquierdo y derecho tienen un ancho fijo de 200 y el medio es autoadaptable. Es necesario cargar el bloque del medio primero. Escribe la estructura y el estilo:
Parte HTML
<body>
<h3>实现三列宽度自适应布局</h3>
<div id = "left">我是左边</div>
<div id = "right">我是右边</div>
<div id = "center">我是中间</div>
</body>
Parte CSS
html,body{
margin: 0px;
width: 100%;
}
h3{
height: 100px;
margin:20px 0 0;
}
#left,#right{
width: 200px;
height: 200px;
background-color: #ffe6b8;
position: absolute;
top:120px;
}
#left{
left:0px;
}
#right{
right: 0px;
}
#center{
margin:2px 210px ;
background-color: #eee;
height: 200px;
}
3. Explique varias formas de limpiar los flotadores (problemas comunes)
1. El div padre define la altura
Principio: Defina manualmente la altura del div padre para resolver el problema de que el div padre no puede obtener automáticamente la altura.
Ventajas: simple, menos código, fácil de entender.
Desventajas: solo apto para diseños de altura fija. Se debe dar la altura exacta. Si la altura es diferente de la div principal, se producirán problemas
Recomendación: no recomendado, solo recomendado para diseño de altura fija
2. El desbordamiento de la definición de div principal: oculto
Principio: ancho o zoom: se debe definir 1, y la altura no se puede definir al mismo tiempo Cuando se usa overflow: hidden, el navegador verificará automáticamente la altura del área flotante.
Ventajas: simple, menos código, buena compatibilidad con el navegador
Desventajas: no se puede utilizar con posición, porque el exceso de tamaño quedará oculto
Recomendación: solo se recomienda a amigos que no utilicen la posición o que tengan un conocimiento más profundo del desbordamiento: oculto
3. Desbordamiento de definición de div principal: automático
Principio: Debe definir el ancho o el zoom: 1 y no puede definir la altura Cuando se usa overflow: auto, el navegador verificará automáticamente la altura del área flotante.
Ventajas: simple, menos código, buena compatibilidad con el navegador
Desventajas: cuando el ancho y la altura internos exceden el div principal, aparecerá una barra de desplazamiento.
Recomendación: no recomendado. Úselo si necesita barras de desplazamiento o asegúrese de que su código no muestre barras de desplazamiento.
4. El div padre define pseudoclases: after y zoom
Principio: IE8 y superiores y los navegadores que no lo son solo son compatibles: después, el zoom (atributos propietarios de IE) puede resolver el problema flotante de IE6 e IE7
Ventajas: El navegador tiene un buen soporte y no es propenso a problemas extraños (actualmente: se utilizan sitios web grandes)
Desventajas: demasiado código, muchos principiantes no entienden el principio
5. Agregue una etiqueta div vacía clear: both al final
Principio: agregue un div vacío, use css para mejorar clear: ambos para borrar el flotador y dejar que el div padre obtenga automáticamente la altura.
Ventajas: simple, menos código, buen soporte del navegador, no propenso a problemas
Desventajas: No se recomienda, pero este método es un método de limpieza de flotadores utilizado antes
4. ¿Explica cómo usar sprites CSS?
CSS Sprites en realidad integra algunas imágenes de fondo en una página web en un archivo de imagen, y luego usa la combinación de CSS "background-image", "background-repeat" y "background-position" para el posicionamiento de fondo. Se puede usar Background-position El número puede localizar con precisión la posición de la imagen de fondo.
CSS Sprites ahorra ancho de banda para algunos sitios web grandes y mejora la velocidad de carga y la experiencia de usuario de los usuarios, sin la necesidad de cargar más imágenes
5. ¿Cuáles son los atributos comunes del dimensionamiento de cajas? ¿Cuáles son las funciones de cada uno?
Valor de atributo
tamaño de la caja: caja de contenido
tamaño de la caja: caja de borde
tamaño de caja: heredar
content-box
Este es el valor de atributo predeterminado de box-sizing
¿Es el comportamiento de visualización de ancho y alto especificado en CSS2.1?
El ancho y alto definidos en CSS corresponden al cuadro de contenido del elemento
Dibuja el relleno y el borde del elemento fuera del ancho y alto definidos en CSS
cuadro de borde
El ancho y alto establecidos por el microelemento en CSS determinan el cuadro de borde del elemento
Es decir, el elemento se dibuja dentro del ancho y alto establecidos al establecer el margen y el borde internos
El ancho y alto establecidos en CSS menos el borde y el espacio interior pueden obtener el ancho y alto reales ocupados por el contenido del elemento
(Q1) box-sizing: content-box | border-box | heredar;
(Q2) content-box: el ancho y el alto se aplican respectivamente al cuadro de contenido del elemento. Dibuja el margen interior y el borde del elemento fuera del ancho y alto (el efecto predeterminado del elemento).
border-box: Cualquier relleno y bordes especificados por el elemento se dibujarán dentro del ancho y alto establecidos. El ancho y alto del contenido se pueden obtener restando el borde y el margen interior del ancho y alto establecidos respectivamente.
6. ¿Cuáles son los selectores CSS, la prioridad del peso del selector
Tipo de selector
- Yo hice
- clase .clase
- Etiqueta p
- General *
- Atributo [type = "text"]
- Pseudo clase: hover
- Pseudo-elemento :: primera línea
Reglas de cálculo de peso
- Primera clase: representa el estilo en línea, como style = "", peso 1000.
- Segunda clase: selector de ID, como #id, peso 0100,
- La tercera clase: clase representativa, pseudoclase y atributo, como .class, peso 0010.
- La cuarta clase: representa el selector de notas y el selector de elementos, como div, p peso 0001.
- Comodín, como * peso 0000
7. La diferencia entre px y em
px significa píxel (un punto en la pantalla de la computadora: 1px = 1 / 96in), que es una unidad absoluta y no cambiará debido a cambios en el tamaño de otros elementos;
·
em representa el tamaño de fuente relativo al elemento principal. em es una unidad relativa, no hay un valor de medición fijo, sino un valor relativo determinado por el tamaño de otros elementos.
8. Describa brevemente el problema de superposición de márgenes y la solución.
Los márgenes de dos cuadros adyacentes en la dirección vertical se superpondrán y se tomará el valor mayor en lugar de sumar.
Solución:
relleno de configuración principal en lugar de margen
desbordamiento de configuración principal: oculto El
elemento actual establece un borde transparente
Usar posicionamiento absoluto
Usar flotante o establecer un bloque en línea
He
dicho tanto para un margen interno de 1 píxel , ¿por qué no hacerlo? ¿Qué tan bueno es escribir un valor de margen?
9.Nuevas funciones de h5 / c3
10.muestra ninguna visibilidad oculta 区别？
1. pantalla: ninguno desaparece por completo, no ocupa una posición en el flujo del documento y el navegador no analizará el elemento; visibilidad: oculta desaparece visualmente, lo que puede entenderse como el efecto de 0 transparencia, ocupando una posición en el flujo del documento, El navegador analizará el elemento;
2. Usar visibilidad: oculto es mejor que mostrar: ninguno en términos de rendimiento. Cuando mostrar: ninguno se cambia a visibilidad, la página se reajustará (cuando parte de los elementos de la página deba cambiarse en escala, tamaño, diseño, visualización y ocultación, etc., la página se reconstruirá. Redistribución. Todas las páginas deben redistribuirse la primera vez que se cargan), y el interruptor de visibilidad no provocará redistribución cuando se muestren.