Part1 CSS lié
1 Quels sont les éléments en ligne et en blocs?
Les éléments en ligne courants (éléments en ligne) comprennent A, B, Span, I, EM, entrée, sélection, IMG, etc.
Les éléments de bloc commun comprennent Div, UL, Li, H1 ~ H6, Talbe, OL, UL, TD, P, etc.
2 liés flottants
Une disposition flottante fait référence à la suppression d'un élément d'un flux de flux / document normal afin qu'il puisse se déplacer à gauche et à droite jusqu'à ce que son bord extérieur rencontre le bord contenant la boîte ou une autre boîte flottante. Une boîte flottante n'appartient pas à un flux normal dans un document. Lorsqu'un élément flotte, il n'affectera pas la disposition des éléments au niveau du bloc mais n'affectera que la disposition des éléments en ligne.
C'est précisément parce que l'élément flottant est séparé du flux de documents que son élément parent ne connaît pas son existence, il se comportera donc comme une hauteur de 0. Peu importe comment l'élément flottant change, son élément parent ne l'enveloppera pas avec. Ce phénomène est également appelé "effondrement de hauteur".
Dans l'exemple suivant, quelle que soit la façon dont la hauteur #floatdom change, la hauteur #parent est toujours 0, ce qui entraînera une étendue de la bordure de l'élément parent, l'arrière-plan ne peut pas être affiché, etc.
<div id = "parent"> <div id = "floatdom" style = "float: gauche; width: 300px; height: 300px;"> <div style = "clear: les deux"> </ div>
En raison de l'existence de fortement effondrés (ce qui n'est souvent pas ce que nous attendons), les flottants doivent être éliminés. Voici plusieurs façons d'éliminer les flottants:
• Ajouter des éléments avec des éléments "clairs: à la fois" après des éléments flottants
<div id = "parent"> <div id = "floatdom" style = "float: gauche; width: 300px; height: 300px;"> <div style = "clear: les deux"> </ div>
Vous pouvez également ajouter des balises BR, qui sont claires: les deux attributs
<div id = "parent"> <div id = "floatdom" style = "float: gauche; largeur: 300px; hauteur: 300px;"> <br/> </ div>
Les avantages de l'utilisation de cette méthode pour effacer les flottants sont qu'il est facile à comprendre, facile à maîtriser et que les inconvénients sont également évidents. De nombreuses étiquettes dénuées de sens sont ajoutées, ce qui est très douloureux dans le maintien ultérieur.
• Ajouter le style "débordement: caché" à l'élément parent
<div id = "parent" style = "overflow: Hidden"> <div id = "floatdom" style = "float: gauche; largeur: 300px; hauteur: 300px;"> </div>
Il n'y a pas de problèmes structurels et sémantiques de cette manière et la quantité de code est très faible. Cependant, lorsque le contenu augmentera, le contenu ne sera pas automatiquement enveloppé et le contenu sera caché, et les éléments qui doivent être débordés ne peuvent pas être affichés.
• Utilisation: après pseudo-élément
<style type = "text / css"> .clearfix: après {contenu: "."; Affichage: bloc; hauteur: 0; Visibilité: cachée; Clear: les deux; } .clearfix {* zoom: 1; } nousEn utilisant cette méthode, il vous suffit d'ajouter une classe à l'élément cible, qui est également la méthode la plus couramment utilisée à l'heure actuelle.
Référence
iyunlu.com/view/css-xht
3. La différence entre la disposition relative et la disposition absolue
La différence la plus essentielle entre la disposition relative et la disposition absolue est de savoir s'il est séparé du flux de documents.
La disposition relative n'est pas séparée du flux de document, c'est-à-dire après avoir réglé la disposition relative de l'élément, le flux de document maintient toujours sa position d'origine. En définissant des propriétés telles que le haut et la gauche, il peut définir son décalage par rapport à la position d'origine.
La disposition absolue est séparée du flux de documents, c'est-à-dire que les éléments du flux de documents ne connaissent pas l'existence de l'élément de mise en page absolue. Le positionnement de la disposition absolue est relatif aux éléments avec une disposition relative ou une disposition absolue dans l'élément parent. Si aucune n'existe, elle est relative à la disposition du corps.
Modèle à 4 boîtes
Le modèle de boîte définit la forme d'affichage d'un élément, y compris le contenu (contenu), le rembourrage (marge intérieure), la bordure (limite) et la marge (marge extérieure). Il existe actuellement deux normes de modèle de boîtes, l'une est le modèle de boîte standard W3C, et l'autre est le modèle IE Box, qui adopte les propres normes de Microsoft.
La différence entre ces deux modèles de boîtes est principalement dans le calcul de la largeur des éléments. La largeur définie en CSS en mode standard est la largeur du contenu, la largeur occupée par l'élément entier de la page, et la formule de calcul est:
La copie de code est la suivante:
Dom_width = largeur + rembourrage + bordure + marge
Dans le modèle IE Box, la largeur définie dans CSS est le contenu + padding + bordure. Par conséquent, dans le modèle IE Box, la largeur occupée par l'élément entier de la page est (la même hauteur)
La copie de code est la suivante:
Dom_width = largeur + marge
Dans CSS3, deux modèles de boîtes sont conservés à l'aide de box-sizing . Lorsque nous définissons box-sizing: content-box (par défaut), nous adoptons le modèle de boîte standard W3C. Lorsque nous définissons box-sizing:border-box , nous utilisons le modèle IE Box.
5 réinitialisation CSS (réinitialisation)
Chaque navigateur a des styles qui l'accompagnent, et les styles qui l'accompagnent sont souvent différents dans chaque navigateur, ce qui apporte des inconvénients à notre mise en page. Par conséquent, dans la pratique, il est souvent nécessaire de "effacer" le style CSS du navigateur, c'est-à-dire que CSS réinitialise. Le code de réinitialisation le plus simple est le suivant:
* {margin: 0; rembourrage: 0;}Bien que cette méthode soit simple, elle est trop "violente", car de nombreux éléments tels que Div et Li n'ont pas de styles de marge ou de rembourrage par défaut, ce qui équivaut à une grande redondance. Le moyen le plus recommandé d'écrire du code de réinitialisation en fonction de vos besoins.
Référence:
www.zhangxinxu.com/wordpress/2010/08/html5-css-reset
6 CSS Hack
Étant donné que différents navigateurs ont des analyses et une prise en charge différents pour CSS, cela entraînera l'affichage du même code CSS dans différents navigateurs. Cela nécessite CSS Hack pour résoudre le problème de compatibilité des différents navigateurs. Ce processus d'écriture différents styles pour différents navigateurs est appelé CSS Hack.
Il existe plusieurs formes communes de piratage CSS:
• Hack Propriétés
Par exemple, IE6 peut reconnaître _width et *width , mais dans IE7 peut reconnaître *width , mais ne peut pas reconnaître _width , aucun d'eux n'est reconnu dans Firefox.
• Sélectionner un piratage de caractère
Par exemple, IE6 peut reconnaître *html .class{} , et IE7 peut reconnaître *+html .class{} ou *:first-child+html .class{} .
• Conditions Hack
IE Annotation conditionnelle est une instruction logique non standard fournie par Microsoft depuis IE5. Par exemple, pour tous les IE:
<! [Si ie]> <! Votre code> <! [endif]>
Pour IE6 et ci-dessous:
<! [Si lt ie 7]> <! Votre code> <! [endif]>
Ce type de piratage prend non seulement effet sur CSS, mais prend également effet sur tous les codes écrits dans des déclarations de jugement.
Référence
//www.vevb.com/css/226888.html
7 Dégradation gracieuse et amélioration progressive
L'amélioration progressive fait référence à la construction de pages pour les navigateurs à faible version afin d'assurer les fonctions les plus élémentaires, puis d'améliorer les effets, les interactions et autres améliorations et les fonctions supplémentaires pour les navigateurs avancés pour obtenir une meilleure expérience utilisateur.
Elegant Downgrade fait référence à la création de fonctionnalités complètes depuis le début, puis compatibles avec les navigateurs de version inférieure.
La différence entre les deux est que les rétrogradations élégantes commencent par un statu quo complexe et tentent de réduire la fourniture d'expérience utilisateur, tandis que l'amélioration progressive commence par une version très basique et fonctionnelle et est en continu pour répondre aux besoins des environnements futurs. La dégradation (désintégration fonctionnelle) signifie regarder en arrière; Alors que l'amélioration progressive signifie regarder vers l'avenir tout en veillant à ce que ses bases soient dans une zone sûre.
8 Parlez-nous des problèmes de compatibilité des navigateurs rencontrés
• Les marges intérieures et les marges extérieures affichées dans différents navigateurs sont différentes. Par exemple, la balise UL a une valeur de rembourrage dans Firefox par défaut, tandis que dans IE, la marge unique a une valeur.
Utilisation de la réinitialisation CSS (voir l'article 5)
• Bogue à double marge d'IE6, la marge est à l'origine 10px après l'avion au niveau du bloc, mais IE l'interprète comme 20px.
Définissez son affichage d'élément au niveau du bloc en ligne
• Min-Height n'est pas pris en charge dans IE6
La fonction de la hauteur min est de maintenir une hauteur minimale lorsque le conteneur a moins de contenu, afin de ne pas détruire l'effet de mise en page ou de conception de l'interface utilisateur. Lorsque le contenu du conteneur augmente, le conteneur peut s'étirer automatiquement pour s'adapter aux modifications du contenu.
Cela peut être résolu par:
#TargetDom {background: #ccc; Min-Height: 100px; Hauteur: Auto! IMPORTANT; hauteur: 100px; débordement: visible; }4
Grâce à un jugement conditionnel, écrivez deux instructions contraignantes ou utilisez des bibliothèques Web Framework telles que jQuery pour se lier.
• Les navigateurs standard adoptent la capture d'événements, tandis que IE adopte le mécanisme des bulles d'événements
Plus tard, la norme pensait que la bulle était plus raisonnable et a utilisé le troisième paramètre pour définir le toit de plateau pour être compatible avec deux mécanismes, et l'événement Bubble était la valeur par défaut.
• L'attribut d'événement dans le traitement des événements est différent de celui des navigateurs standard.
Le navigateur standard est apporté en tant que paramètre, et IE est obtenu dans Window.Event. L'élément cible est e.srcelement. Le navigateur standard est e.target.
Partie2 Autre
1 Comprendre les codes d'état HTTP couramment utilisés
200 ok tout va bien, le document de réponse aux demandes GET et POST suit.
201 Le serveur créé a créé le document et l'en-tête de localisation donne son URL.
202 accepté la demande a été acceptée, mais le traitement n'a pas été terminé.
304 Non modifié Le client a des documents tamponnés et émet une demande conditionnelle (fournissant généralement l'en-tête si modifié-modifié qui indique que le client souhaite uniquement mettre à jour les documents que la date spécifiée). Le serveur indique au client que le document tamponné d'origine peut continuer à être utilisé.
400 Une erreur de syntaxe s'est produite dans une mauvaise demande de demande.
404 Non trouvé que la ressource dans l'emplacement spécifié ne peut être trouvée. Il s'agit également d'une réponse couramment utilisée.
405 Méthode non autorisée La méthode de demande (obtenir, publier, diriger, supprimer, mettre, tracer, etc.) n'est pas applicable à la ressource spécifiée. (Nouveau pour HTTP 1.1)
500 Erreur du serveur interne Le serveur a rencontré une situation inattendue et n'a pas pu compléter la demande du client.
502 Lorsque le serveur Bad Gateway agit comme une passerelle ou un proxy, afin de terminer la demande d'accéder au prochain serveur, le serveur renvoie une réponse illégale.
2 demandes manuscrites ajax
// Mock la méthode xmlhttpRequest dans ie5 et ie6 if (window.xmlhttprequest === Undefined) {window.xmlhttprequest = function () {try {return new activeXObject ("msxml2.xmlHttp.6.0"); // Disponible, utilisez le dernier objet ActiveX} catch (e1) {try {return new activeXObject ("msxml2.xmlhttp.3.0"); // incapable, reculez la version antérieure} catch (e2) {throw new error ("xmlHttpRequest n'est pas pris en charge"); }}}}}} // get request function xhrget (url, callback) {var request = new XmlHttpRequest (); request.open ('get', url, true); request.onreadystateChange = function () {if (request.readystate === 4 && request.status == 200) {callback && callback (request.ResponSExt); }}; request.send (null);} // la fonction de demande de demande xhrPost (URL, data, rappel) {var request = new xmlhttprequest (); request.open ('post', URL, true); request.setRequestHeader («Content-Type», «Application / JSON»); request.onreadystateChange = function () {if (request.readystate === 4 && request.status == 200) {callback && callback (request); }}; request.send (json.stringfy (data));}Ceci est l'utilisation traditionnelle de XMLHttpRequest. XMLHTTPREQuest Level 2 propose de nombreuses nouvelles méthodes, et les COR que nous mentionnons souvent proviennent également de cette méthode.
Pour en savoir plus sur le guide de l'utilisateur Recommandé XHR2 Recommandé XMLHTTPREQUEST NIVEAL 2
3 problèmes de domaine croisé
Lorsque nous demandons des données à d'autres serveurs via Ajax sur la page, le client aura des problèmes de domaine croisé en raison de la politique homologue du navigateur pour JavaScript. La stratégie dite de même d'origine fait référence à un script qui ne peut demander que des ressources à partir de la même source (même nom de domaine, numéro de port, protocole).
Si l'adresse de service demandée par XMLHttpRequest ci-dessus est différente du fichier actuel, l'erreur suivante apparaîtra dans le navigateur:
Alors, comment résoudre ce type de problème de domaine croisé?
(1) Utiliser des COR pour croiser
"Partage de ressources croisées, CORS pour faire court). CORS est une capacité à se développer dans XHR2. La méthode d'utilisation est très simple. Définissez-le du côté du serveur:
En-tête Set Access-Control-Allow-Origin *
Ce paramètre acceptera les demandes de domaine croisé pour tous les noms de domaine, vous pouvez également spécifier des URL spécifiques, ou vous pouvez également limiter le nom de domaine:
En-tête Set Access-Control-allow-origin http://www.test.com
Cependant, la limitation de cette approche est qu'elle oblige le client à le prendre en charge et au serveur pour effectuer des paramètres pertinents. Lorsque les deux sont satisfaits, le domaine transversal via CORS prend non seulement tous les types de demandes HTTP, mais également les développeurs peuvent utiliser XMLHTTPRequest ordinaire pour lancer des demandes et obtenir des données, ce qui a une meilleure gestion des erreurs que JSONP.
(2) Utilisez JSONP pour réaliser un saut
Pour les navigateurs plus âgés, ils ont tendance à ne pas prendre en charge CORS, donc l'utilisation de JSONP pour le domaine croisé est également un moyen courant d'utiliser JSONP.
Nous savons que lors du chargement des scripts cibles via l'élément Src Spécification de <Script> dans une page Web, il n'est pas affecté par la politique d'origine même, afin qu'ils puissent être utilisés pour demander des données d'autres serveurs. Cette technologie qui utilise des éléments <cript> comme transmission AJAX s'appelle JSONP.
Le principe de la mise en œuvre de JSONP est le suivant:
function getjsonp (url, callback) {var funcname = getUniqueName (); // Utilisez des horodatages ou reportez-vous au compteur d'auto-incrémentation pour obtenir l'URL de nom de fonction unique + = "? Callback =" + funcname; // Ajouter le nom de la fonction en tant que paramètre à l'URL var script = document.createElement ('script'); // Création dynamique des balises de script // fonction de rappel getjsonp [funcname] = fonction (réponse) {try {callback (réponse); // Données de réponse de processus} Enfin {// Même si la fonction de rappel ou la réponse lance une erreur, effacez le contenu ajouté dynamiquement delete getjsonp [funcname]; script.parentnode.removechild (scipt); }} // déclencher le script de demande http.src = url; document.body.appendChild (script); }JSONP a également quelques inconvénients. Tout d'abord, les supports JSONP GET mais ne prennent pas en charge la méthode Post. De plus, les demandes AJAX sont utilisées à l'aide de <cript> éléments, ce qui signifie que la page Web peut exécuter n'importe quel code JavaScript envoyé par le serveur distant. Par conséquent, cette technologie ne doit pas être utilisée pour les serveurs qui ne font pas confiance.
(3) Utiliser la fenêtre.nom à traverser le domaine
L'objet Window a un attribut de nom, qui a une fonctionnalité: c'est-à-dire pendant le cycle de vie d'une fenêtre, toutes les pages chargées par la fenêtre partagent une fenêtre. Window.name persiste dans toutes les pages chargées par une fenêtre et ne sera pas réinitialisée en raison du chargement d'une nouvelle page. Par conséquent, les données peuvent être transmises sur des pages de différentes sources avec Window.Name.
Si www.a.com/a.html souhaite obtenir les données sur www.b.com/b.html, le principe est le suivant:
a) Stockez les données dans Window.Name en B.Html
b) Construisez une balise IFRAME HIDDEN (Affichage: Aucun) dans A.HTML, en supposant que l'ID est défini sur Proxy et SRC est défini sur la même origine que A.HTML.
c) Obtenir des données dans A.HTML via le code suivant
var proxy = document.getElementById ('proxy'); proxy.onload = function () {var data = proxy.contentwindow.name; // obtenir des données}D) supprimer les éléments connexes
(4) Utilisez la fenêtre.
Cette méthode est relativement simple. Dans la page A, utilisez WindowoBj.PostMessage (message, Targetorigin) pour envoyer des informations à la page cible, et dans la page B, les informations sont obtenues en écoutant les événements de message. Cette méthode est une nouvelle méthode dans HTML5 et ne peut pas être utilisée pour les navigateurs plus anciens tels que IE6 et IE7.
4 Comment améliorer les performances du site Web
Veuillez vous référer aux deux autres articles du blogueur:
Quelques suggestions sur l'amélioration des performances du site Web
Quelques suggestions sur l'amélioration des performances du site Web 2
Le nouveau contenu sera mis à jour en continu ...
Auteur du blog: VicFeel