Parte1 Relacionado CSS
1 Quais são os elementos de elemento e bloco embutidos?
Os elementos em linha comuns (elementos em linha) incluem A, B, Span, I, Em, Entrada, Selecionar, IMG, etc.
Os elementos comuns do bloco incluem div, ul, li, h1 ~ h6, talbe, ol, ul, td, p, etc.
2 relacionados flutuantes
Um layout flutuante refere -se à remoção de um elemento de um fluxo normal/fluxo de documentos, para que ele possa se mover para a esquerda e direita até que sua borda externa encontre a borda que contém a caixa ou outra caixa flutuante. Uma caixa flutuante não pertence a um fluxo normal em um documento. Quando um elemento flutua, ele não afeta o layout dos elementos no nível do bloco, mas afetará apenas o arranjo dos elementos embutidos.
É precisamente porque o elemento flutuante é separado do fluxo de documentos que seu elemento pai não conhece sua existência, por isso se comportará como uma altura de 0. Não importa como o elemento flutuante muda, seu elemento pai não o envolverá com ele. Esse fenômeno também é chamado de "colapso da altura".
No exemplo a seguir, independentemente de como a altura do #Floatdom muda, a altura #parente é sempre 0, o que fará com que a borda do elemento pai não possa ser esticada, o fundo não pode ser exibido etc.
<div id = "parent"> <div id = "floatdom" style = "float: esquerda; largura: 300px; altura: 300px;"> <div style = "claro: ambos"> </div>
Devido à existência de altamente colapsado (o que geralmente não é o que esperamos), flutuar deve ser limpo. Aqui estão várias maneiras de limpar a flutuação:
• Adicione elementos com o estilo "claro: ambos" após elementos flutuantes
<div id = "parent"> <div id = "floatdom" style = "float: esquerda; largura: 300px; altura: 300px;"> <div style = "claro: ambos"> </div>
Você também pode adicionar tags BR, que vêm com claro: ambos os atributos
<div id = "pai"> <div id = "floatdom" style = "float: esquerda; largura: 300px; altura: 300px;"> <br/> </div>
As vantagens de usar esse método para limpar a flutuação são que é fácil de entender, fácil de dominar, e as desvantagens também são óbvias. Muitos rótulos sem sentido são adicionados, o que é muito doloroso na manutenção posterior.
• Adicione o estilo "Overflow: Hidden" ao elemento pai
<div id = "parent" style = "Overflow: Hidden"> <div id = "floatdom" style = "float: esquerda; largura: 300px; altura: 300px;"> </div>
Não há problemas estruturais e semânticos dessa maneira e a quantidade de código é muito pequena. No entanto, quando o conteúdo aumentar, o conteúdo não será embrulhado automaticamente e o conteúdo será oculto e os elementos que precisam ser transbordados não podem ser exibidos.
• Uso: após o elemento pseudo-elemento
<style type = "text/css"> .clearfix: após {content: "."; exibição: bloco; altura: 0; Visibilidade: escondida; claro: ambos; } .clearfix { *zoom: 1; } </style> <div id = "parent"> <div id = "floatdom" style = "float: esquerda; largura: 300px; altura: 300px;"> </div>Usando esse método, você só precisa adicionar uma classe ao elemento de destino, que também é o método mais comumente usado no momento.
Referência
iyunlu.com/view/css-xht
3. A diferença entre o layout relativo e o layout absoluto
A diferença mais essencial entre o layout relativo e o layout absoluto é se está separado do fluxo de documentos.
O layout relativo não é separado do fluxo de documentos, ou seja, após definir o layout relativo do elemento, o fluxo do documento ainda mantém sua posição original. Ao definir propriedades como topo e esquerda, ele pode definir seu deslocamento em relação à posição original.
O layout absoluto é separado do fluxo de documentos, ou seja, os elementos no fluxo de documentos não sabem a existência do elemento de layout absoluto. O posicionamento do layout absoluto é relativo aos elementos com layout relativo ou layout absoluto no elemento pai. Se não existe, é relativo ao layout do corpo.
Modelo de 4 caixas
O modelo da caixa define a forma de exibição de um elemento, incluindo conteúdo (conteúdo), preenchimento (margem interna), borda (limite) e margem (margem externa). Atualmente, existem dois padrões de modelo de caixa, um é o modelo de caixa padrão W3C e o outro é o modelo da caixa IE, que adota os próprios padrões da Microsoft.
A diferença entre esses dois modelos de caixa está principalmente no cálculo da largura do elemento. A largura definida no CSS no modo padrão é a largura do conteúdo, a largura ocupada por todo o elemento na página, e a fórmula de cálculo é:
A cópia do código é a seguinte:
Dom_width = largura + preenchimento + borda + margem
No modelo da caixa do IE, a largura definida no CSS é conteúdo + preenchimento + borda. Portanto, no modelo da caixa do IE, a largura ocupada por todo o elemento na página é (o mesmo que a altura)
A cópia do código é a seguinte:
Dom_width = largura + margem
No CSS3, dois modelos de caixa são retidos usando box-sizing . Quando definimos box-sizing: content-box (padrão), adotamos o modelo de caixa padrão W3C. Quando definimos box-sizing:border-box , usamos o modelo de caixa do IE.
5 Redefinição CSS (Reinicialização)
Cada navegador tem alguns estilos que o acompanham, e os estilos que o acompanham geralmente são diferentes em cada navegador, o que traz algum inconveniente ao nosso layout. Portanto, na prática, geralmente é necessário "limpar" o estilo CSS do navegador, ou seja, o CSS é redefinido. O código de redefinição mais simples é o seguinte:
*{margem: 0; preenchimento: 0;}Embora esse método seja simples, é muito "violento", porque muitos elementos como Div e Li não têm estilos de margem ou preenchimento por padrão, o que equivale a causar muita redundância. A maneira mais recomendada de escrever código de redefinição de acordo com suas necessidades.
Referência:
www.zhangxinxu.com/wordpress/2010/08/html5-css-reset
6 CSS Hack
Como diferentes navegadores têm análise e suporte diferentes para CSS, isso resultará na exibição do mesmo código CSS em diferentes navegadores. Isso exige que o CSS hackeite para resolver o problema de compatibilidade de diferentes navegadores. Esse processo de escrever estilos diferentes para diferentes navegadores é chamado CSS Hack.
Existem várias formas comuns de hack de CSS:
• Propriedades hackear
Por exemplo, o IE6 pode reconhecer _width e *width , mas no IE7 pode reconhecer *width , mas não pode reconhecer _width , nenhum deles é reconhecido no Firefox.
• Selecione Hack de personagem
Por exemplo, o IE6 pode reconhecer *html .class{} , e o ie7 pode reconhecer *+html .class{} ou *:first-child+html .class{} .
• Condições hackear
A anotação condicional do IE é uma instrução lógica não padrão fornecida pela Microsoft desde o IE5. Por exemplo, para todos os IES:
<! [se ie]> <! Seu código> <! [Endif]>
Para o IE6 e abaixo:
<! [Se lt ie 7]> <! Seu código> <! [endif]>
Esse tipo de hack não apenas entra em vigor no CSS, mas também entra em vigor em todos os códigos escritos em declarações de julgamento.
Referência
//www.vevb.com/css/226888.html
7 degradação graciosa e aprimoramento progressivo
O aprimoramento progressivo refere-se à criação de páginas para navegadores de baixa versão para garantir as funções mais básicas e, em seguida, melhorar os efeitos, interações e outras melhorias e funções adicionais para navegadores avançados para obter uma melhor experiência do usuário.
O rebaixamento elegante refere -se à criação de funcionalidades completas desde o início e, em seguida, compatível com os navegadores da versão inferior.
A diferença entre os dois é que os rebentados elegantes começam com um status quo complexo e tentam reduzir o fornecimento de experiência do usuário, enquanto o aprimoramento gradual começa com uma versão muito básica e funcional e é continuamente expandida para atender às necessidades de ambientes futuros. Degradação (decaimento funcional) significa olhar para trás; Enquanto o aprimoramento gradual significa olhar para o futuro, garantindo que sua base esteja em uma área segura.
8 Conte -nos sobre problemas de compatibilidade do navegador encontrados
• As margens internas e as margens externas exibidas em diferentes navegadores são diferentes. Por exemplo, a tag UL possui um valor de preenchimento no Firefox por padrão, enquanto na margem do IE tem um valor.
Usando a redefinição do CSS (consulte o Artigo 5)
• O bug de margem dupla do IE6, a margem é originalmente 10px após o elemento no nível do bloco flutuar, mas o IE o interpreta como 20px.
Defina sua tela de elemento no nível do bloco como embutida
• A altura da minia não é suportada no IE6
A função da altura da minia é manter uma altura mínima quando o contêiner tem menos conteúdo, para não destruir o efeito de design do layout ou da interface do usuário. Quando o conteúdo do contêiner aumenta, o contêiner pode se estender automaticamente para se adaptar às alterações no conteúdo.
Isso pode ser resolvido por:
#TargetDom {Background: #CCC; Min-altura: 100px; Altura: Auto! IMPORTANTE; Altura: 100px; transbordamento: visível; }• A função do método dos eventos de ligação na ligação padrão de eventos é addEventListener, enquanto o IE usa onestingEvent
Através do julgamento condicional, escreva duas declarações vinculativas ou use bibliotecas da estrutura da web, como o jQuery para vincular.
• Os navegadores padrão adotam a captura de eventos, enquanto o IE adota o mecanismo de bolha de eventos
Mais tarde, o padrão acreditava que a bolha era mais razoável e usou o terceiro parâmetro para definir o addEventListener como compatível com dois mecanismos, e a bolha de eventos era o valor padrão.
• O atributo de evento no processamento de eventos é diferente do dos navegadores padrão.
O navegador padrão é trazido como um parâmetro, e o IE é obtido na janela.Event. O elemento de destino é E.Srcelement. O navegador padrão é E.Target.
Parte2 Outro
1 Entenda os códigos de status HTTP comumente usados
200 ok está tudo bem, segue o documento de resposta para as solicitações GET e POST.
201 O servidor criado criou o documento e o cabeçalho do local fornece seu URL.
202 Aceito a solicitação foi aceita, mas o processamento não foi concluído.
304 NÃO MODIFICADO O cliente bobou documentos e emite uma solicitação condicional (geralmente fornecendo o cabeçalho IF-modificado-uma vez que indica que o cliente deseja atualizar apenas documentos do que a data especificada). O servidor diz ao cliente que o documento em buffer original pode continuar sendo usado.
400 Um erro de sintaxe ocorreu na solicitação de má solicitação.
404 não encontrou o recurso no local especificado não pode ser encontrado. Esta também é uma resposta comumente usada.
405 Método não permitido O método de solicitação (Get, Post, Head, Excluir, Put, Trace etc.) não é aplicável ao recurso especificado. (Novo para HTTP 1.1)
500 ERRADOR DO SERVIDO INTERNO O servidor encontrou uma situação inesperada e não conseguiu concluir a solicitação do cliente.
502 Quando o Bad Gateway Server atua como um gateway ou proxy, para concluir a solicitação para acessar o próximo servidor, o servidor retorna uma resposta ilegal.
2 solicitação manuscrita de Ajax
// zomba do método xmlHttPrequest em IE5 e IE6 if (window.xmlhttPrequest === indefinido) {window.xmlhttPrequest = function () {Try {return {Return ActiveXobject ("msxml2.xmlHttp.6.0; // Disponível, use o objeto ActiveX mais recente} catch (e1) {try {return new ActiveXObject ("msxml2.xmlhttp.3.0"); // incapaz, faça backup da versão anterior} catch (e2) {lança um novo erro ("xmlhttprequest não é suportado"); }}}}}} // Obtenha a função de solicitação xhrget (url, retorno de chamada) {var request = novo xmlHttPrequest (); request.open ('get', url, true); request.onReadyStateChange = function () {if (request.readyState === 4 && request.status == 200) {retorno de chamada && (request.RESPONETEXT); }}; request.send (null);} // Função de solicitação de postagem xhrpost (url, dados, retorno de chamada) {var request = novo xmlhttPrequest (); request.open ('post', url, true); request.setRequestHeader ('Content-Type', 'Application/json'); request.onReadyStateChange = function () {if (request.readyState === 4 && request.status == 200) {retorno de chamada && (request); }}; request.send (json.stringfy (dados));}Este é o uso tradicional do xmlHttPrequest. O Nível 2 XmlHttPrequest propõe muitos novos métodos, e os CORS que muitas vezes mencionam também vem desse método.
Para saber mais sobre o XHR2 recomendado xmlhttprequest Nível 2 Guia do Usuário
3 problemas de domínio cruzado
Quando solicitamos dados de outros servidores através do AJAX na página, o cliente terá problemas de domínio cruzado devido à política homóloga do navegador para JavaScript. A chamada política da mesma origem refere-se a um script que só pode solicitar recursos da mesma fonte (o mesmo nome de domínio, número da porta, protocolo).
Se o endereço de serviço solicitado pelo XMLHTTPRequest acima for diferente do arquivo atual, o seguinte erro aparecerá no navegador:
Então, como resolver esse tipo de problema de domínio cruzado?
(1) domínio cruzado usando cors
"Compartilhamento de recursos de origem cruzada, CORS para curta). CORS é uma capacidade de expandir no XHR2. O método de uso é muito simples. Defina-o no lado do servidor:
Conjunto de cabeçalho Access-Control-arel-origin *
Essa configuração aceita solicitações de domínio cruzado para todos os nomes de domínio, você também pode especificar URLs específicos ou também pode limitar o nome do domínio:
Cabeçalho Conjunto de cabeçalho Access-Control-allow-origin http://www.test.com
No entanto, a limitação dessa abordagem é que ela exige que o cliente a suporte e o servidor execute configurações relevantes. Quando ambos são satisfeitos, o domínio cruzado através do CORS não apenas suporta todos os tipos de solicitações HTTP, mas também os desenvolvedores podem usar o XMLHTTPREQUEST comum para iniciar solicitações e obter dados, que têm melhor manuseio de erros que o JSONP.
(2) Use JSONP para alcançar o Leapfrogging
Para os navegadores mais antigos, eles tendem a não apoiar os CORS; portanto, usar o JSONP para domínios cruzados também é uma maneira comum de usar o JSONP.
Sabemos que, ao carregar scripts de destino através da especificação SRC do elemento <Script> em uma página da Web, ele não é afetado pela política do mesmo origem, para que eles possam ser usados para solicitar dados de outros servidores. Essa tecnologia que usa elementos <Cript> como transmissão AJAX é chamada JSONP.
O princípio da implementação do JSONP é o seguinte:
function getjsonp (url, retorno de chamada) {var funcname = getUnikeName (); // Use timestamps ou consulte o contador de incrementos automáticos para obter o nome da função exclusivo url + = "? // Adicione o nome da função como um parâmetro ao URL var script = document.createElement ('script'); // Crie dinâmico tags de script // função de retorno de chamada getjsonp [funcname] = function (resposta) {try {callback (resposta); // Dados de resposta do processo} Finalmente {// Mesmo que a função ou resposta de retorno de chamada ligue um erro, limpe o conteúdo adicionado dinamicamente excluir getjsonp [funcname]; script.parentnode.removeChild (scipt); }} // aciona http request script.src = url; document.body.appendChild (script); }O JSONP também tem algumas desvantagens. Primeiro de tudo, o JSONP suporta GET, mas não suporta o método post. Além disso, as solicitações do AJAX são usadas usando elementos <Cript>, o que significa que a página da web pode executar qualquer código JavaScript enviado pelo servidor remoto. Portanto, essa tecnologia não deve ser usada para servidores que não confiam.
(3) Use Window.name para domínio cruzado
O objeto da janela possui um atributo de nome, que possui um recurso: ou seja, durante o ciclo de vida de uma janela, todas as páginas carregadas pela janela compartilham uma janela.name e cada página leu e grava permissões no window.name. Window.Name persiste em todas as páginas carregadas por uma janela e não será redefinido devido ao carregamento de uma nova página. Portanto, os dados podem ser transmitidos nas páginas de diferentes fontes com o Window.name.
Se www.a.com/a.html quiser obter os dados em www.b.com/b.html, o princípio é o seguinte:
a) armazenar dados em window.name em b.html
b) Construa uma tag de iframe oculta (exibição: nenhuma) em A.HTML, assumindo que o ID está definido como proxy e SRC está definido com a mesma origem que a.html.
c) Obtenha dados em A.HTML através do código a seguir
var proxy = document.getElementById ('proxy'); proxy.onload = function () {var data = proxy.contentwindow.name; // get data}d) Remova elementos relacionados
(4) Use Window.PostMessage para cruzar o domínio
Este método é relativamente simples. Na página A, use windowobj.postMessage (mensagem, Targetorigin) para enviar informações para a página de destino e, na página B, as informações são obtidas ouvindo eventos da mensagem. Este método é um novo método no HTML5 e não pode ser usado para navegadores mais antigos, como IE6 e IE7.
4 Como melhorar o desempenho do site
Consulte os outros dois artigos do blogueiro:
Algumas sugestões para melhorar o desempenho do site
Algumas sugestões para melhorar o desempenho do site 2
Novo conteúdo será atualizado continuamente ...
Autor do blog: Vicfeel