Teil1 CSS verwandt
1 Was sind die Inline-Element- und Blockelemente?
Gemeinsame Inline-Elemente (Inline-Elemente) umfassen A, B, Span, I, EM, Eingabe, Select, IMG usw.
Gemeinsame Blockelemente umfassen Div, UL, Li, H1 ~ H6, Talbe, OL, UL, TD, P usw.
2 schwebende verwandte
Ein schwimmendes Layout bezieht sich auf das Entfernen eines Elements aus einem normalen Stream/Dokument -Stream, damit es sich links und rechts bewegen kann, bis die äußere Kante die Kante enthält, die die Box oder eine andere schwimmende Box enthält. Eine schwimmende Box gehört nicht zu einem normalen Stream in einem Dokument. Wenn ein Element schwimmt, wirkt es sich nicht auf das Layout von Elementen auf Blockebene aus, sondern wirkt sich nur auf die Anordnung von Inline-Elementen aus.
Gerade weil das schwimmende Element vom Dokumentstrom getrennt ist, kennt sein übergeordnetes Element seine Existenz nicht, so dass es sich als Höhe von 0 verhalten wird. Egal wie sich das schwimmende Element ändert, sein übergeordnetes Element wird es nicht mit ihm einwickeln. Dieses Phänomen wird auch als "Höhenkollaps" bezeichnet.
Im folgenden Beispiel, unabhängig davon, wie sich die Höhe #Floatdom ändert, ist die Höhe #parent immer 0, was dazu führt, dass der Rand des übergeordneten Elements nicht geöffnet werden kann, der Hintergrund kann nicht angezeigt werden usw.
<div id = "parent"> <div id = "floatdom" style = "float: links; width: 300px; Höhe: 300px;"> <div style = "clear: beide"> </div>
Aufgrund der Existenz von stark zusammengebrochenem (was oft nicht das ist, was wir erwarten), muss das Schwimmen gelöscht werden. Hier sind verschiedene Möglichkeiten, um das Schwimmen zu klären:
• Fügen Sie Elemente mit "Clear: Beides" -Stil nach schwebenden Elementen hinzu
<div id = "parent"> <div id = "floatdom" style = "float: links; width: 300px; Höhe: 300px;"> <div style = "clear: beide"> </div>
Sie können auch BR -Tags hinzufügen, die mit klar sind: beide Attribute
<div id = "parent"> <div id = "floatdom" style = "float: links; width: 300px; Höhe: 300px;"> <br/> </div>
Die Vorteile der Verwendung dieser Methode zum Löschen von Schwimmern sind, dass es leicht zu verstehen ist, leicht zu meistern ist und die Nachteile auch offensichtlich sind. Es werden viele bedeutungslose Etiketten hinzugefügt, was in späterer Wartung sehr schmerzhaft ist.
• Fügen Sie dem übergeordneten Element den Stil "Überlauf: versteckt" hinzu
<div id = "Eltern" style = "Überlauf: Hidden"> <div id = "floatdom" style = "float: links; Breite: 300px; Höhe: 300px;"> </div>
Auf diese Weise gibt es keine strukturellen und semantischen Probleme und die Menge an Code ist sehr gering. Wenn der Inhalt jedoch zunimmt, wird der Inhalt nicht automatisch verpackt und der Inhalt wird versteckt, und die Elemente, die überflutet werden müssen, können nicht angezeigt werden.
• Verwendung: Nach Pseudoelement
<style type = "text/css"> .clearFix: After {Inhalt: ". Anzeige: Block; Höhe: 0; Sichtbarkeit: versteckt; klar: beides; } .clearFix { *Zoom: 1; } </style> <div id = "parent"> <div id = "floatdom" style = "float: links; Breite: 300px; Höhe: 300px;"> </div>Mit dieser Methode müssen Sie dem Zielelement nur eine Klasse hinzufügen, die derzeit auch die am häufigsten verwendete Methode ist.
Referenz
iyunlu.com/view/css-xht
3.. Der Unterschied zwischen relativem Layout und absolutem Layout
Der wichtigste Unterschied zwischen relativem Layout und absolutem Layout ist, ob es vom Dokumentfluss getrennt ist.
Das relative Layout ist nicht vom Dokumentfluss getrennt, dh nach dem Einstellen des relativen Layouts des Elements behält der Dokumentfluss seine ursprüngliche Position weiter. Durch Einstellen von Eigenschaften wie oben und links kann es seinen Offset in Bezug auf die ursprüngliche Position einstellen.
Das absolute Layout ist vom Dokumentfluss getrennt, dh die Elemente im Dokumentenfluss kennen die Existenz des absoluten Layoutelements nicht. Die Positionierung des absoluten Layouts ist relativ zu den Elementen mit relativem Layout oder absolutem Layout im übergeordneten Element. Wenn keiner existiert, ist es relativ zum Körperlayout.
4 Boxmodell
Das Boxmodell definiert die Anzeigeform eines Elements, einschließlich Inhalt (Inhalt), Polsterung (innerer Rand), Rand (Grenze) und Rand (äußerer Rand). Derzeit gibt es zwei Boxmodellstandards, eine ist das W3C -Standard -Box -Modell und das andere ist das IE -Box -Modell, das die eigenen Standards von Microsoft annimmt.
Der Unterschied zwischen diesen beiden Boxmodellen liegt hauptsächlich in der Berechnung der Elementbreite. Die in CSS im Standardmodus definierte Breite ist die Breite des Inhalts, die Breite, die durch das gesamte Element auf der Seite besetzt ist, und die Berechnungsformel lautet:
Die Codekopie lautet wie folgt:
DOM_WIDTH = Breite + Padding + Rand + Rand
Im IE -Box -Modell ist die in CSS definierte Breite von Inhalt + Padding + Rand. Daher ist im IE -Box -Modell die Breite, die durch das gesamte Element auf der Seite besetzt ist (die gleiche Höhe)
Die Codekopie lautet wie folgt:
DOM_WIDTH = Breite + Rand
In CSS3 werden zwei Boxmodelle mithilfe box-sizing zurückgehalten. Wenn wir box-sizing: content-box (Standard), übernehmen wir das W3C-Standard-Box-Modell. Wenn wir box-sizing:border-box einstellen, verwenden wir das IE-Box-Modell.
5 CSS zurückgesetzt (zurücksetzen)
Jeder Browser hat einige Stile, die damit verbunden sind, und die damit verbundenen Stile sind in jedem Browser oft unterschiedlich, was unserem Layout einige Unannehmlichkeiten bringt. Daher ist es in der Praxis oft notwendig, den CSS -Stil des Browsers zu "klären", dh CSS zurückgesetzt. Der einfachste Reset -Code ist wie folgt:
*{Margin: 0; Polsterung: 0;}Obwohl diese Methode einfach ist, ist sie zu "gewalttätig", da viele Elemente wie Div und Li nicht standardmäßig Rand- oder Polsterstile haben, was gleichbedeutend mit viel Redundanz ist. Der empfohlene Weg, um Reset -Code entsprechend Ihren Anforderungen zu schreiben.
Referenz:
www.zhangxinxu.com/wordpress/2010/08/html5-css-reset
6 CSS Hack
Da verschiedene Browser unterschiedliche Analysen und Unterstützung für CSS haben, führt dies zur Anzeige desselben CSS -Codes in verschiedenen Browsern. Dies erfordert CSS -Hack, um das Kompatibilitätsproblem verschiedener Browser zu lösen. Dieser Prozess des Schreibens verschiedener Stile für verschiedene Browser heißt CSS -Hack.
Es gibt mehrere gemeinsame Formen von CSS -Hack:
• Eigenschaften Hack
Zum Beispiel kann IE6 _width und *width erkennen, aber in IE7 kann *width erkennen, aber kann _width nicht erkennen, keiner von ihnen wird in Firefox erkannt.
• Wählen Sie Character Hack
Zum Beispiel kann IE6 *html .class{} erkennen, und IE7 kann *+html .class{} oder *:first-child+html .class{} erkennen.
• Bedingungen Hack
IE bedingte Annotation ist eine nicht standardmäßige logische Anweisung von Microsoft seit IE5. Zum Beispiel für alle IES:
<! [Wenn dh]> <! Ihr Code> <! [Endif]>
Für IE6 und unten:
<! [Wenn lt dh 7]> <! Ihr Code> <! [endif]>
Diese Art von Hack wirkt sich nicht nur auf CSS aus, sondern wirkt sich auch auf alle in Urteilsanweisungen verfassten Codes.
Referenz
//www.vevb.com/css/226888.html
7 anmutige Abbau und fortschreitende Verbesserung
Progressive Verbesserung bezieht sich auf das Aufbau von Seiten für Browser mit niedriger Version, um die grundlegendsten Funktionen zu gewährleisten, und dann die Verbesserung der Effekte, Interaktionen und anderer Verbesserungen und zusätzlicher Funktionen für fortschrittliche Browser, um eine bessere Benutzererfahrung zu erzielen.
Elegant Downgrade bezieht sich auf die Erstellung vollständiger Funktionen von Anfang an und dann mit Browsern mit niedrigerer Version kompatibel.
Der Unterschied zwischen den beiden besteht darin, dass elegante Herabstufungen mit einem komplexen Status quo beginnen und versuchen, das Versorgung mit Benutzererfahrung zu verringern, während die allmähliche Verbesserung mit einer sehr einfachen, funktionalen Version beginnt und kontinuierlich erweitert wird, um den Anforderungen künftiger Umgebungen zu erfüllen. Abbau (funktionaler Zerfall) bedeutet zurückblicken; Eine allmähliche Verbesserung bedeutet zwar nach vorne zu freuen und gleichzeitig sicherzustellen, dass sich die Grundlage in einem sicheren Bereich befindet.
8 Erzählen Sie uns von Problemen der Browserkompatibilität
• Die in verschiedenen Browsern angezeigten inneren Ränder und äußeren Ränder sind unterschiedlich. Zum Beispiel hat das UL -Tag standardmäßig einen Padding -Wert in Firefox, während in IE nur Margin einen Wert hat.
Verwenden von CSS Reset (siehe Artikel 5)
• Der doppelte Margenfehler von IE6 ist ursprünglich 10px, nachdem das Element auf Blockebene schwimmt, aber IE interpretiert ihn als 20px.
Stellen Sie die Elementanzeige auf Blockebene auf Inline ein
• MIN-Höhe wird in IE6 nicht unterstützt
Die Funktion der Minenhöhe besteht darin, eine Mindesthöhe aufrechtzuerhalten, wenn der Container weniger Inhalt hat, um den Layout- oder UI-Design-Effekt nicht zu zerstören. Wenn der Inhalt im Container zunimmt, kann sich der Container automatisch an Änderungen des Inhalts anpassen.
Dies kann gelöst werden durch:
#Targetdom {Hintergrund: #ccc; min-hohe: 100px; Höhe: Auto! Wichtig; Höhe: 100px; Überlauf: sichtbar; }• Die Methodefunktion von Bindungsereignissen in der Standard -Ereignisbindung ist addEventListener, während der IE AttafEvent verwendet
Schreiben Sie durch bedingte Beurteilung zwei Bindungsanweisungen oder verwenden Sie Web -Framework -Bibliotheken wie JQuery zum Binden.
• Standard -Browser übernehmen die Ereigniserfassung, während der IE den Ereignisblasenmechanismus annimmt
Später glaubte der Standard, dass die Blase vernünftiger sei, und verwendete den dritten Parameter, um den AddEventListener so einzustellen, dass er mit zwei Mechanismen kompatibel war, und die Ereignisblase war der Standardwert.
• Das Ereignisattribut in der Ereignisverarbeitung unterscheidet sich von dem in Standardbrowsern.
Der Standardbrowser wird als Parameter eingereicht und IE im Fenster. Event erhalten. Das Zielelement ist e.srcelement. Der Standardbrowser ist E.Target.
Teil2 Andere
1 Verstehen Sie die häufig verwendeten HTTP -Statuscodes
200 ok alles ist in Ordnung, das Antwortdokument auf die Anfragen von GET und Post folgt.
201 Der erstellte Server hat das Dokument erstellt und der Standortheader gibt seine URL.
202 akzeptiert, dass die Anfrage angenommen wurde, die Verarbeitung wurde jedoch nicht abgeschlossen.
304 Nicht geändert, der Client hat Dokumente gepuffert und eine bedingte Anfrage ausgestellt (in der Regel den Header mit dem modifizierten Sinne, der angibt, dass der Client nur Dokumente aktualisieren möchte als das angegebene Datum). Der Server teilt dem Kunden mit, dass das ursprüngliche gepufferte Dokument weiterhin verwendet werden kann.
400 Ein Syntaxfehler ist in einer schlechten Anfrageanforderung aufgetreten.
404 Nicht gefunden, dass die Ressource an der angegebenen Stelle nicht gefunden werden kann. Dies ist auch eine häufig verwendete Antwort.
405 Methode ist nicht zulässig, die Anforderungsmethode (Get, Post, Head, Löschen, Put, Trace usw.) nicht zulässig ist, ist nicht für die angegebene Ressource anwendbar. (Neu für HTTP 1.1)
500 Interner Serverfehler Der Server stieß auf eine unerwartete Situation und konnte die Anfrage des Kunden nicht abschließen.
502 Wenn der Bad Gateway -Server als Gateway oder Proxy fungiert, wird der Server eine illegale Antwort zurückgibt, um die Anfrage zum Zugriff auf den nächsten Server zu vervollständigen.
2 handgeschriebene Ajax -Anfrage
// Die xmlhttpRequest -Methode in IE5 und IE6 if (window.xmlhttpRequest === und definiert) {window.xmlhttpRequest = function () {try {trink {trink {trink New ActiveXObject ("msxml2.xmlHttp.6.6.0"); // verfügbar, verwenden Sie das neueste ActiveX -Objekt} catch (e1) {try {return New ActiveXObject ("msxml2.xmlhttp.3.0"); // nicht in der Lage, frühere Version} catch (e2) {neuer Fehler werfen ("xmlhttprequest wird nicht unterstützt"); }}}}}} // Anforderungsfunktion 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.responseText); }}; request.send (null);} // post request function xhrpost (url, data, radback) {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 (Daten));};}Dies ist die traditionelle Verwendung von XMLHTTPrequest. XMLHTTPrequest Level 2 schlägt viele neue Methoden vor, und die CORs, die wir häufig erwähnen, stammen auch aus dieser Methode.
Um mehr über XHR2 zu erfahren, empfohlene XMLHTTPrequest Level 2 Benutzerhandbuch
3 Cross-Domänen-Probleme
Wenn wir Daten von anderen Servern über AJAX auf der Seite anfordern, hat der Kunde aufgrund der homologen Richtlinie des Browsers für JavaScript Cross-Domänen-Probleme. Die sogenannte gleichorientierte Richtlinie bezieht sich auf ein Skript, das nur Ressourcen aus derselben Quelle anfordern kann (gleiche Domänenname, Portnummer, Protokoll).
Wenn sich die von XMLHTTPrequest angeforderte Serviceadresse von der aktuellen Datei unterscheidet, wird im Browser der folgende Fehler angezeigt:
Wie kann man diese Art von Cross-Domain-Problem lösen?
(1) Verwenden Sie CORs, um Cross-Domain
"Cross-Origin-Ressourcenfreigabe, kurz CORS). CORS ist eine Fähigkeit, in XHR2 zu erweitern. Die Verwendungsmethode ist sehr einfach. Stellen Sie sie auf der Serverseite fest:
Header Set Access-Kontroll-Owl-Origin *
Diese Einstellung akzeptiert Cross-Domain-Anforderungen für alle Domain-Namen, Sie können auch bestimmte URLs angeben oder den Domain-Namen begrenzen:
Header Set Access-control-allow-origin http://www.test.com
Die Einschränkung dieses Ansatzes besteht jedoch darin, dass der Client ihn und den Server zur Ausführung relevanter Einstellungen unterstützen müssen. Wenn beide erfüllt sind, unterstützt Cross-Domain durch CORS nicht nur alle Arten von HTTP-Anforderungen, sondern auch die ordentliche XMLHTTPREquest können die Anforderungen initiieren und Daten erhalten, die eine bessere Fehlerbehandlung haben als JSONP.
(2) Verwenden Sie JSONP, um Sprungbreiten zu erreichen
Bei älteren Browsern tendieren sie tendenziell keine CORs. Die Verwendung von JSONP für Cross-Domain ist daher auch eine häufige Möglichkeit, JSONP zu verwenden.
Wir wissen, dass beim Laden von Zielskripten durch die SRC-Spezifikation des <Skript> -Elements auf einer Webseite nicht von der gleichen Richtlinie betroffen ist, sodass sie verwendet werden können, um Daten von anderen Servern anzufordern. Diese Technologie, die <Script> Elemente als AJAX -Übertragung verwendet, heißt JSONP.
Das Prinzip der JSONP -Implementierung lautet wie folgt:
Funktion getJsonp (URL, Callback) {var funcname = getuniquename (); // Zeitstempel verwenden oder auf den automatischen Inkrement-Zähler beziehen, um den eindeutigen Funktionsnamen url + = "? Callback =" + funcname zu erhalten; // Funktionsname als Parameter zum url var script = document.createelement ('script') hinzufügen; // dynamisch bauen Skript -Tags // Rückruffunktion getJsonp [funcname] = function (response) {try {callback (Antwort); // Prozessantwortdaten} Schließlich {// Auch wenn die Rückruffunktion oder die Antwort einen Fehler auslöst, löschen Sie den dynamisch hinzugefügten Inhalt von Inhalt löschen getJsonP [funcname]; script.parentnode.removechild (Scipt); }} // http request script.src = url; document.body.appendchild (script); }JSONP hat auch einige Nachteile. Zunächst unterstützt JSONP -unterstützt die Post -Methode, aber nicht. Darüber hinaus werden AJAX -Anforderungen mithilfe von <Script> -Anements verwendet, was bedeutet, dass die Webseite jeden vom Remote -Server gesendeten JavaScript -Code ausführen kann. Daher sollte diese Technologie nicht für Server verwendet werden, denen nicht vertraut.
(3) Verwenden Sie das Fenster. NAME, um die Domäne zu domäne
Das Fensterobjekt enthält ein Namensattribut, das eine Funktion hat: Dh während des Lebenszyklus eines Fensters werden alle Seiten, die vom Fenster geladen werden, ein Fenster teilen. NAME, und auf jeder Seite wurden Berechtigungen in das Fenster gelesen und schreiben. NAME. Fenster.Name bleibt auf allen Seiten bestehen, die über ein Fenster geladen werden und aufgrund des Ladens einer neuen Seite nicht zurückgesetzt werden. Daher können Daten auf Seiten aus verschiedenen Quellen mit Fenster übergeben werden.
Wenn www.a.com/a.html die Daten unter www.b.com/b.html erhalten möchte, lautet das Prinzip wie folgt:
a) Daten in Fenster speichern. NAME IN B.HTML
b) Erstellen Sie ein verstecktes (Display: None) iFrame -Tag in A.HTML, vorausgesetzt, die ID ist auf Proxy und SRC auf denselben Ursprung eingestellt wie A.HTML.
c) Daten in A.HTML durch den folgenden Code erhalten
var proxy = document.getElementById ('Proxy'); proxy.onload = function () {var data = proxy.contentWindow.name; // Data} abrufen}d) Entfernen Sie verwandte Elemente
(4) Verwenden Sie Fenster.
Diese Methode ist relativ einfach. Verwenden Sie in Seite A windowObj.postMessage (Nachricht, TargetOrigin), um Informationen an die Zielseite zu senden, und in Seite B werden Informationen erhalten, indem Nachrichtenereignisse anhören. Diese Methode ist eine neue Methode in HTML5 und kann nicht für ältere Browser wie IE6 und IE7 verwendet werden.
4 So verbessern Sie die Website der Website
Bitte beachten Sie die beiden anderen Artikel des Bloggers:
Einige Vorschläge zur Verbesserung der Website -Leistung
Einige Vorschläge zur Verbesserung der Website -Leistung 2
Neue Inhalte werden kontinuierlich aktualisiert ...
Blog -Autor: Vicfeel