Parte1 CSS Relacionado
1 ¿Cuáles son los elementos en línea de elementos y bloque?
Los elementos en línea comunes (elementos en línea) incluyen A, B, SPAN, I, EM, Entrada, Seleccionar, IMG, etc.
Los elementos de bloque comunes incluyen Div, UL, Li, H1 ~ H6, Talbe, OL, UL, TD, P, etc.
2 relacionado con flotación
Un diseño flotante se refiere a eliminar un elemento de una secuencia de transmisión/documento normal para que pueda moverse hacia la izquierda y hacia la derecha hasta que su borde exterior se encuentre con el borde que contiene la caja u otra caja flotante. Una caja flotante no pertenece a una secuencia normal en un documento. Cuando un elemento flota, no afectará el diseño de los elementos de nivel de bloque, pero solo afectará la disposición de los elementos en línea.
Se debe precisamente a que el elemento flotante está separado de la secuencia de documentos que su elemento principal no conoce su existencia, por lo que se comportará como una altura de 0. No importa cómo cambie el elemento flotante, su elemento principal no lo envolverá con él. Este fenómeno también se llama "colapso de altura".
En el siguiente ejemplo, independientemente de cómo cambie la altura de #floatdom, la altura #parente siempre es 0, lo que hará que el borde del elemento principal no pueda abrirse, el fondo no se puede mostrar, etc.
<div id = "parent"> <div id = "floatdom" style = "float: izquierda; ancho: 300px; altura: 300px;"> <Div style = "Clear: Tus"> </div>
Debido a la existencia de altamente colapsada (que a menudo no es lo que esperamos), se debe limpiar flotando. Aquí hay varias formas de despejar flotando:
• Agregue elementos con estilo "claro: ambos" después de elementos flotantes
<div id = "parent"> <div id = "floatdom" style = "float: izquierda; ancho: 300px; altura: 300px;"> <Div style = "Clear: Tus"> </div>
También puede agregar etiquetas BR, que vienen con claro: ambos atributos
<div id = "parent"> <div id = "floatdom" style = "float: izquierda; ancho: 300px; altura: 300px;"> <br/> </div>
Las ventajas de usar este método para despejar la flotación son que es fácil de entender, fácil de dominar, y las desventajas también son obvias. Se agregan muchas etiquetas sin sentido, lo cual es muy doloroso en el mantenimiento posterior.
• Agregue el estilo "desbordamiento: oculto" al elemento principal
<div id = "parent" style = "desbordamiento: oculto"> <div id = "floatdom" style = "float: izquierda; ancho: 300px; altura: 300px;"> </div>
No hay problemas estructurales y semánticos de esta manera y la cantidad de código es muy pequeña. Sin embargo, cuando el contenido aumenta, el contenido no se envolverá automáticamente, y el contenido se ocultará y los elementos que deben desbordarse no se pueden mostrar.
• Usar: después del pseudo-elemento
<style type = "text/css"> .clearfix: después de {content: "."; Pantalla: bloque; Altura: 0; Visibilidad: oculto; claro: ambos; } .clearfix { *zoom: 1; } </style> <div id = "parent"> <div id = "floatdom" style = "float: izquierda; ancho: 300px; altura: 300px;"> </div>Usando este método, solo necesita agregar una clase al elemento de destino, que también es el método más utilizado en la actualidad.
Referencia
iyunlu.com/view/css-xht
3. La diferencia entre el diseño relativo y el diseño absoluto
La diferencia más esencial entre el diseño relativo y el diseño absoluto es si está separado del flujo del documento.
El diseño relativo no está separado del flujo del documento, es decir, después de establecer el diseño relativo del elemento, el flujo del documento aún mantiene su posición original. Al establecer propiedades como la parte superior e izquierda, puede establecer su desplazamiento en relación con la posición original.
El diseño absoluto se separa del flujo del documento, es decir, los elementos en el flujo del documento no conocen la existencia del elemento de diseño absoluto. El posicionamiento del diseño absoluto es relativo a los elementos con diseño relativo o diseño absoluto en el elemento principal. Si no existe ninguno, es relativo al diseño del cuerpo.
4 modelo de caja
El modelo de cuadro define la forma de visualización de un elemento, incluido el contenido (contenido), el relleno (margen interno), el borde (límite) y el margen (margen exterior). Actualmente hay dos estándares del modelo de caja, uno es el modelo de caja estándar W3C, y el otro es el modelo de caja IE, que adopta los estándares propios de Microsoft.
La diferencia entre estos dos modelos de caja está principalmente en el cálculo del ancho del elemento. El ancho definido en CSS en modo estándar es el ancho del contenido, el ancho ocupado por todo el elemento en la página, y la fórmula de cálculo es:
La copia del código es la siguiente:
Dom_width = ancho + relleno + borde + margen
En el modelo de caja IE, el ancho definido en CSS es el contenido + relleno + borde. Por lo tanto, en el modelo de caja IE, el ancho ocupado por todo el elemento en la página es (igual que la altura)
La copia del código es la siguiente:
Dom_width = ancho + margen
En CSS3, se conservan dos modelos de caja utilizando box-sizing . Cuando establecemos box-sizing: content-box (predeterminado), adoptamos el modelo de caja estándar W3C. Cuando colocamos box-sizing:border-box , usamos el modelo de caja IE.
5 CSS RESET (RESET)
Cada navegador tiene algunos estilos que vienen con él, y los estilos que vienen con él son a menudo diferentes en cada navegador, lo que aporta algunos inconvenientes a nuestro diseño. Por lo tanto, en la práctica, a menudo es necesario "despejar" el estilo CSS del navegador, es decir, el reinicio de CSS. El código de reinicio más simple es el siguiente:
*{margen: 0; relleno: 0;}Aunque este método es simple, es demasiado "violento", porque muchos elementos como Div y Li no tienen estilos de margen o acolchado por defecto, lo que equivale a causar mucha redundancia. La forma más recomendada de escribir código de reinicio de acuerdo con sus necesidades.
Referencia:
www.zhangxinxu.com/wordpress/2010/08/html5-css-reset
6 CSS Hack
Dado que los diferentes navegadores tienen diferentes analizadores y soporte para CSS, esto dará como resultado la visualización del mismo código CSS en diferentes navegadores. Esto requiere que CSS Hack resuelva el problema de compatibilidad de diferentes navegadores. Este proceso de escribir diferentes estilos para diferentes navegadores se llama CSS Hack.
Hay varias formas comunes de CSS Hack:
• Propiedades Hack
Por ejemplo, IE6 puede reconocer _width y *width , pero en IE7 puede reconocer *width , pero no puede reconocer _width , ninguno de ellos se reconoce en Firefox.
• Seleccione el hack de personaje
Por ejemplo, IE6 puede reconocer *html .class{} , e IE7 puede reconocer *+html .class{} o *:first-child+html .class{} .
• Condiciones Hack
IE La anotación condicional es una declaración lógica no estándar proporcionada por Microsoft desde IE5. Por ejemplo, para todos los IE:
<! [if IE]> <! Tu código> <! [endif]>
Para IE6 y abajo:
<! [Si LT IE 7]> <! Su código> <! [Endif]>
Este tipo de hack no solo entra en vigencia en CSS, sino que también entrará en vigencia en todos los códigos escritos en declaraciones de juicio.
Referencia
//www.vevb.com/css/226888.html
7 degradación elegante y mejora progresiva
La mejora progresiva se refiere a las páginas de construcción de navegadores de bajo versiones para garantizar las funciones más básicas, y luego mejorar los efectos, las interacciones y otras mejoras y las funciones adicionales para los navegadores avanzados para lograr una mejor experiencia del usuario.
La redacción elegante se refiere a la creación de funcionalidad completa desde el principio y luego compatible con los navegadores de versión inferiores.
La diferencia entre los dos es que las degradaciones elegantes comienzan con un status quo complejo e intentan reducir la oferta de experiencia del usuario, mientras que la mejora gradual comienza con una versión muy básica y funcional y se expande continuamente para satisfacer las necesidades de los entornos futuros. La degradación (decadencia funcional) significa mirar hacia atrás; Mientras que la mejora gradual significa mirar hacia adelante mientras se asegura de que su base esté en un área segura.
8 Cuéntenos sobre los problemas de compatibilidad del navegador encontrados
• Los márgenes internos y los márgenes externos que se muestran en diferentes navegadores son diferentes. Por ejemplo, la etiqueta UL tiene un valor de relleno en Firefox por defecto, mientras que en IE solo el margen tiene un valor.
Uso de reinicio CSS (ver artículo 5)
• El error de doble margen de IE6, el margen es originalmente 10px después de que flota el elemento a nivel de bloque, pero IE lo interpreta como 20px.
Establezca su pantalla de elemento de nivel de bloque en línea
• Min-altura no es compatible en IE6
La función de Min-Alta es mantener una altura mínima cuando el contenedor tiene menos contenido, para no destruir el diseño o el efecto de diseño de UI. Cuando aumenta el contenido en el contenedor, el contenedor puede extenderse automáticamente para adaptarse a los cambios en el contenido.
Esto se puede resolver por:
#TargetDom {fondo: #ccc; Min-altura: 100px; Altura: Auto! IMPORTANTE; Altura: 100px; desbordamiento: visible; }• La función del método de los eventos de enlace en la unión de eventos estándar es AddEventListener, mientras que IE usa AttackEvent
A través del juicio condicional, escriba dos declaraciones vinculantes o use bibliotecas de marco web como jQuery para vincular.
• Los navegadores estándar adoptan la captura de eventos, mientras que IE adopta el mecanismo de burbujas de eventos
Más tarde, el estándar creía que la burbuja era más razonable, y usó el tercer parámetro para establecer el AddEventListener para que fuera compatible con dos mecanismos, y la burbuja de eventos fue el valor predeterminado.
• El atributo de eventos en el procesamiento de eventos es diferente al de los navegadores estándar.
El navegador estándar se lleva como parámetro, y es decir, se obtiene en la ventana. El elemento objetivo es E.Srcelement. El navegador estándar es E.Target.
Parte2 otro
1 Comprender los códigos de estado HTTP comúnmente utilizados
200 Ok, todo está bien, sigue el documento de respuesta a las solicitudes de Get and Post.
201 El servidor creado ha creado el documento y el encabezado de ubicación le da su URL.
202 aceptó que la solicitud ha sido aceptada, pero el procesamiento no se ha completado.
304 no modificado que el cliente ha almacenado en buffer y emita una solicitud condicional (generalmente proporciona el encabezado IF-Modified-Since que indica que el cliente solo desea actualizar documentos que la fecha especificada). El servidor le dice al cliente que el documento almacenado original puede continuar utilizando.
400 Se produjo un error de sintaxis en la solicitud de solicitud incorrecta.
404 no se encuentra el recurso en la ubicación especificada no se puede encontrar. Esta es también una respuesta comúnmente utilizada.
405 El método no permitido el método de solicitud (obtener, publicar, cabeza, eliminar, poner, rastrear, etc.) no es aplicable al recurso especificado. (Nuevo para HTTP 1.1)
500 Error de servidor interno El servidor encontró una situación inesperada y no pudo completar la solicitud del cliente.
502 Cuando el servidor Bad Gateway actúa como una puerta de enlace o proxy, para completar la solicitud para acceder al siguiente servidor, el servidor devuelve una respuesta ilegal.
2 solicitud de Ajax escrita a mano
// simula el método xmlhttprequest en IE5 e IE6 if (window.xmlhttprequest === Undefined) {window.xmlhttprequest = function () {try {return New ActiveXObject ("msxml2.xmlhttp.6.0"); // Disponible, use el último objeto ActiveX} Catch (e1) {try {return new ActiveXObject ("msxml2.xmlhttp.3.0"); // no puede, retroceda la versión anterior} catch (e2) {tire nuevo error ("xmlhttprequest no es compatible"); }}}}} @ request.open ('get', url, verdadero); request.OnreadyStateChange = function () {if (request.readyState === 4 && request.status == 200) {callback && callback (request.esponsetext); }}; request.send (null);} // Función de solicitud de solicitud XHRPOST (URL, DATA, Callback) {var request = new XMLHTTPRequest (); request.open ('post', url, verdadero); request.setRequestHeader ('Content-type', 'Application/JSON'); request.OnreadyStateChange = function () {if (request.readyState === 4 && request.status == 200) {callback && callback (request); }}; request.send (json.stringfy (datos));}Este es el uso tradicional de xmlhttprequest. XMLHTTPREQUEST Nivel 2 propone muchos métodos nuevos, y el CORS que a menudo mencionamos también proviene de este método.
Para obtener más información sobre XHR2 Guía de usuario de XMLHTPRequest Nivel 2 recomendada
3 problemas de dominio cruzado
Cuando solicitamos datos de otros servidores a través de AJAX en la página, el cliente tendrá problemas de dominio cruzado debido a la política homóloga del navegador para JavaScript. La llamada política del mismo origen se refiere a un script que solo puede solicitar recursos de la misma fuente (mismo nombre de dominio, número de puerto, protocolo).
Si la dirección de servicio solicitada por xmlhttprequest anterior es diferente del archivo actual, el siguiente error aparecerá en el navegador:
Entonces, ¿cómo resolver este tipo de problema de dominio cruzado?
(1) Use Cors para dominar el dominio
"Compartir recursos de origen cruzado, CORS para abreviar). Cors es una capacidad para expandirse en XHR2. El método de uso es muy simple. Configurarlo en el lado del servidor:
Encabezado establecido access-confontrol-allow-origin *
Esta configuración aceptará solicitudes de dominio cruzado para todos los nombres de dominio, también puede especificar URL específicas, o también puede limitar el nombre de dominio:
Encabezado set access-confontrol-allow-origin http://www.test.com
Sin embargo, la limitación de este enfoque es que requiere que el cliente lo admita y el servidor realice una configuración relevante. Cuando ambos están satisfechos, el dominio cruzado a través de CORS no solo admite todos los tipos de solicitudes HTTP, sino que los desarrolladores también pueden usar XMLHTTPRequest ordinaria para iniciar solicitudes y obtener datos, que tiene un mejor manejo de errores que JSONP.
(2) Use JSONP para lograr el salto
Para los navegadores más antiguos, tienden a no admitir CORS, por lo que usar JSONP para el dominio cruzado también es una forma común de usar JSONP.
Sabemos que al cargar los scripts de destino a través de la especificación SRC del elemento <script> en una página web, no se ve afectado por la política del mismo origen, por lo que pueden usarse para solicitar datos de otros servidores. Esta tecnología que utiliza elementos <script> como transmisión AJAX se llama JSONP.
El principio de implementación de JSONP es el siguiente:
function getJSONP (URL, Callback) {var FuncName = getuniqueName (); // Use marcas de tiempo o consulte el contador de incremento automático para obtener el nombre único de la función URL + = "? Callback =" + Funcname; // Agregar el nombre de la función como parámetro a la URL var script = document.createElement ('script'); // Dynamicly construye etiquetas de script // función de devolución de llamada getJSONP [Funcname] = function (respuesta) {try {Callback (respuesta); // datos de respuesta de proceso} Finalmente {// incluso si la función o respuesta de devolución de llamada lanza un error, borre el contenido agregado dinámicamente Eliminar getJsonp [FuncName]; script.parentnode.removechild (scipt); }} // activar http solicitud script.src = url; document.body.appendChild (script); }JSONP también tiene algunas desventajas. En primer lugar, JSONP es compatible con Get, pero no admite el método de publicación. Además, las solicitudes AJAX se utilizan utilizando elementos <script>, lo que significa que la página web puede ejecutar cualquier código JavaScript enviado por el servidor remoto. Por lo tanto, esta tecnología no debe usarse para servidores que no confían.
(3) Use ventana. Nombre para dominar el dominio
El objeto de la ventana tiene un atributo de nombre, que tiene una característica: es decir, durante el ciclo de vida de una ventana, todas las páginas cargadas por la ventana comparten una ventana. Nombre, y cada página tiene permisos de lectura y escritura a Window.name. Window.Name persiste en todas las páginas cargadas por una ventana y no se restablecerá debido a la carga de una nueva página. Por lo tanto, los datos se pueden transmitir en páginas de diferentes fuentes con Window.name.
Si www.a.com/a.html quiere obtener los datos en www.b.com/b.html, el principio es el siguiente:
a) almacenar datos en la ventana. Nombre en B.html
b) Construya una etiqueta oculta (Ninguna) iframe en a.html, suponiendo que la identificación se establece en proxy y src se establece en el mismo origen que a.html.
c) Obtener datos en A.HTML a través del siguiente código
var proxy = document.getElementById ('proxy'); proxy.onload = function () {var data = proxy.contentwindow.name; // get data}d) Eliminar elementos relacionados
(4) Use ventana. Postmesaje para cruzar el dominio
Este método es relativamente simple. En la página A, use WindowsObj.PostMessage (mensaje, Targetorigin) para enviar información a la página de destino, y en la página B, la información se obtiene escuchando eventos de mensajes. Este método es un nuevo método en HTML5 y no puede usarse para navegadores más antiguos como IE6 e IE7.
4 Cómo mejorar el rendimiento del sitio web
Consulte los otros dos artículos del blogger:
Algunas sugerencias para mejorar el rendimiento del sitio web
Algunas sugerencias sobre la mejora del rendimiento del sitio web 2
El nuevo contenido se actualizará continuamente ...
Autor del blog: VicFeel