Part1 CSS Terkait
1 Apa elemen elemen inline dan blok?
Elemen inline umum (elemen in-line) termasuk A, B, Span, I, EM, Input, Select, IMG, dll.
Elemen blok umum termasuk Div, UL, Li, H1 ~ H6, Talbe, OL, UL, TD, P, dll.
2 terkait mengambang
Tata letak yang mengambang mengacu pada melepas elemen dari aliran aliran/dokumen normal sehingga dapat bergerak ke kiri dan ke kanan sampai tepi luarnya memenuhi tepi yang berisi kotak atau kotak mengambang lainnya. Kotak mengambang bukan milik aliran normal dalam dokumen. Ketika suatu elemen mengapung, itu tidak akan mempengaruhi tata letak elemen tingkat blok tetapi hanya akan mempengaruhi pengaturan elemen inline.
Justru karena elemen mengambang dipisahkan dari aliran dokumen bahwa elemen induknya tidak tahu keberadaannya, sehingga akan berperilaku sebagai ketinggian 0. Tidak peduli bagaimana elemen mengambang berubah, elemen induknya tidak akan membungkusnya dengan itu. Fenomena ini juga disebut "runtuh tinggi".
Dalam contoh berikut, terlepas dari bagaimana perubahan ketinggian #Floatdom, ketinggian #parent selalu 0, yang akan menyebabkan perbatasan elemen induk tidak dapat diregangkan terbuka, latar belakang tidak dapat ditampilkan, dll.
<Div id = "Parent"> <div id = "floatdom" style = "float: left; width: 300px; tinggi: 300px;"> <div style = "clear: keduanya"> </div>
Karena keberadaan yang sangat runtuh (yang sering tidak seperti yang kita harapkan), mengambang harus dibersihkan. Berikut adalah beberapa cara untuk membersihkan mengambang:
• Tambahkan elemen dengan gaya "jelas: keduanya" setelah elemen mengambang
<Div id = "Parent"> <div id = "floatdom" style = "float: left; width: 300px; tinggi: 300px;"> <div style = "clear: keduanya"> </div>
Anda juga dapat menambahkan tag BR, yang datang dengan jelas: kedua atribut
<Div id = "Parent"> <div id = "floatdom" style = "float: left; width: 300px; tinggi: 300px;"> <br/> </div>
Keuntungan menggunakan metode ini untuk membersihkan mengambang adalah mudah dimengerti, mudah dikuasai, dan kerugiannya juga jelas. Banyak label yang tidak berarti ditambahkan, yang sangat menyakitkan dalam pemeliharaan di kemudian hari.
• Tambahkan gaya "overflow: tersembunyi" ke elemen induk
<Div id = "Parent" style = "overflow: hidden"> <div id = "floatdom" style = "float: left; width: 300px; tinggi: 300px;"> </div>
Tidak ada masalah struktural dan semantik dengan cara ini dan jumlah kode sangat kecil. Namun, ketika konten meningkat, konten tidak akan dibungkus secara otomatis, dan konten akan disembunyikan, dan elemen -elemen yang perlu diliputi tidak dapat ditampilkan.
• Gunakan: Setelah elemen semu
<style type = "text/css"> .clearfix: After {content: "."; Tampilan: Blok; Tinggi: 0; Visibilitas: Tersembunyi; jelas: keduanya; } .clearfix { *zoom: 1; } </style> <div id = "parent"> <div id = "floatdom" style = "float: left; width: 300px; tinggi: 300px;"> </div>Dengan menggunakan metode ini, Anda hanya perlu menambahkan kelas ke elemen target, yang juga merupakan metode yang paling umum digunakan saat ini.
Referensi
iyunlu.com/view/csss-xht
3. Perbedaan antara tata letak relatif dan tata letak absolut
Perbedaan paling penting antara tata letak relatif dan tata letak absolut adalah apakah dipisahkan dari aliran dokumen.
Tata letak relatif tidak dipisahkan dari aliran dokumen, yaitu, setelah mengatur tata letak relatif elemen, aliran dokumen masih mempertahankan posisi aslinya. Dengan mengatur properti seperti atas dan kiri, ia dapat mengatur offset relatif terhadap posisi asli.
Tata letak absolut dipisahkan dari aliran dokumen, yaitu elemen -elemen dalam aliran dokumen tidak tahu keberadaan elemen tata letak absolut. Posisi tata letak absolut relatif terhadap elemen dengan tata letak relatif atau tata letak absolut dalam elemen induk. Jika tidak ada, itu relatif terhadap tata letak tubuh.
4 model kotak
Model kotak mendefinisikan bentuk tampilan suatu elemen, termasuk konten (konten), padding (margin dalam), perbatasan (batas) dan margin (margin luar). Saat ini ada dua standar model kotak, satu adalah model kotak standar W3C, dan yang lainnya adalah model IE Box, yang mengadopsi standar Microsoft sendiri.
Perbedaan antara kedua model kotak ini terutama dalam perhitungan lebar elemen. Lebar yang didefinisikan dalam CSS dalam mode standar adalah lebar konten, lebar yang ditempati oleh seluruh elemen di halaman, dan rumus perhitungan adalah:
Salinan kode adalah sebagai berikut:
Dom_width = lebar + padding + batas + margin
Dalam model kotak IE, lebar yang didefinisikan dalam CSS adalah konten + padding + perbatasan. Oleh karena itu, dalam model kotak IE, lebar yang ditempati oleh seluruh elemen di halaman adalah (sama dengan tinggi)
Salinan kode adalah sebagai berikut:
Dom_width = lebar + margin
Di CSS3, dua model kotak dipertahankan menggunakan box-sizing . Ketika kami mengatur box-sizing: content-box (default), kami mengadopsi model kotak standar W3C. Ketika kami mengatur box-sizing:border-box , kami menggunakan model kotak IE.
5 CSS Reset (Reset)
Setiap browser memiliki beberapa gaya yang menyertainya, dan gaya yang menyertainya seringkali berbeda di setiap browser, yang membawa ketidaknyamanan pada tata letak kami. Oleh karena itu, dalam praktiknya, seringkali perlu untuk "membersihkan" gaya CSS browser, yaitu reset CSS. Kode reset paling sederhana adalah sebagai berikut:
*{margin: 0; padding: 0;}Meskipun metode ini sederhana, terlalu "kekerasan", karena banyak elemen seperti Div dan Li tidak memiliki margin atau gaya bantalan secara default, yang sama dengan menyebabkan banyak redundansi. Cara yang lebih disarankan untuk menulis kode reset sesuai dengan kebutuhan Anda.
Referensi:
www.zhangxinxu.com/wordpress/2010/08/html5-csss-ress
6 CSS Hack
Karena browser yang berbeda memiliki penguraian dan dukungan yang berbeda untuk CSS, ini akan menghasilkan tampilan kode CSS yang sama di browser yang berbeda. Ini membutuhkan peretasan CSS untuk menyelesaikan masalah kompatibilitas dari berbagai browser. Proses penulisan gaya yang berbeda ini untuk browser yang berbeda disebut CSS Hack.
Ada beberapa bentuk umum Hack CSS:
• Properties Hack
Misalnya, IE6 dapat mengenali _width dan *width , tetapi di IE7 dapat mengenali *width , tetapi tidak dapat mengenali _width , tak satu pun dari mereka diakui di Firefox.
• Pilih Hack Karakter
Misalnya, IE6 dapat mengenali *html .class{} , dan IE7 dapat mengenali *+html .class{} atau *:first-child+html .class{} .
• Kondisi Hack
IE Anotasi Bersyarat adalah pernyataan logis non-standar yang disediakan oleh Microsoft sejak IE5. Misalnya, untuk semua IE:
<! [Jika yaitu]> <! Kode Anda> <! [Endif]>
Untuk IE6 dan di bawah:
<! [Jika LT IE 7]> <! Kode Anda> <! [Endif]>
Jenis hack ini tidak hanya berlaku pada CSS, tetapi juga berlaku pada semua kode yang ditulis dalam pernyataan penilaian.
Referensi
//www.vevb.com/css/226888.html
7 degradasi anggun dan peningkatan progresif
Peningkatan progresif mengacu pada membangun halaman untuk browser versi rendah untuk memastikan fungsi yang paling mendasar, dan kemudian meningkatkan efek, interaksi dan perbaikan lainnya dan fungsi tambahan untuk browser canggih untuk mencapai pengalaman pengguna yang lebih baik.
Downgrade yang elegan mengacu pada membangun fungsionalitas lengkap dari awal dan kemudian kompatibel dengan browser versi yang lebih rendah.
Perbedaan antara keduanya adalah bahwa penurunan peringkat yang elegan dimulai dengan status quo yang kompleks dan berupaya mengurangi pasokan pengalaman pengguna, sementara peningkatan bertahap dimulai dengan versi fungsional yang sangat mendasar dan terus diperluas untuk memenuhi kebutuhan lingkungan masa depan. Degradasi (peluruhan fungsional) berarti melihat ke belakang; Sementara peningkatan bertahap berarti melihat ke depan sambil memastikan bahwa fondasinya berada di area yang aman.
8 Ceritakan tentang masalah kompatibilitas browser yang dihadapi
• Margin dalam dan margin luar yang ditampilkan di browser yang berbeda berbeda. Misalnya, tag UL memiliki nilai bantalan di Firefox secara default, sedangkan di IE hanya margin memiliki nilai.
Menggunakan Reset CSS (lihat Pasal 5)
• Bug margin ganda IE6, margin awalnya 10px setelah elemen tingkat blok mengapung, tetapi IE menafsirkannya sebagai 20px.
Atur tampilan elemen level bloknya ke Inline
• Min-tinggi tidak didukung di IE6
Fungsi mine-height adalah mempertahankan ketinggian minimum ketika wadah memiliki lebih sedikit konten, agar tidak menghancurkan efek tata letak atau desain UI. Ketika konten dalam wadah meningkat, wadah dapat secara otomatis meregangkan untuk beradaptasi dengan perubahan konten.
Ini dapat diselesaikan dengan:
#targetDom {latar belakang: #ccc; Min-tinggi: 100px; Tinggi: Otomatis! Penting; Tinggi: 100px; meluap: terlihat; }• Fungsi metode mengikat peristiwa dalam pengikatan acara standar adalah addeventlistener, sementara IE menggunakan attachEvent
Melalui penilaian bersyarat, tulis dua pernyataan yang mengikat atau gunakan pustaka kerangka kerja web seperti jQuery untuk mengikat.
• Browser standar mengadopsi penangkapan acara, sementara IE mengadopsi mekanisme gelembung acara
Kemudian, standar percaya bahwa gelembung lebih masuk akal, dan menggunakan parameter ketiga untuk mengatur AddEventListener agar kompatibel dengan dua mekanisme, dan gelembung peristiwa adalah nilai default.
• Atribut acara dalam pemrosesan acara berbeda dari yang ada di browser standar.
Browser standar dibawa sebagai parameter, dan IE diperoleh di Window.event. Elemen target adalah e.srcelement. Browser standar adalah E.Sarget.
Part2 lainnya
1 Memahami kode status http yang umum digunakan
200 ok semuanya baik -baik saja, dokumen respons untuk permintaan GET dan POST berikut.
201 Server yang dibuat telah membuat dokumen dan header lokasi memberikan URL.
202 Menerima permintaan telah diterima, tetapi pemrosesan belum selesai.
304 Tidak dimodifikasi Klien telah buffered dokumen dan mengeluarkan permintaan bersyarat (biasanya memberikan header IF-Modified-Since yang menunjukkan bahwa klien hanya ingin memperbarui dokumen daripada tanggal yang ditentukan). Server memberi tahu pelanggan bahwa dokumen buffer asli dapat terus digunakan.
400 Terjadi kesalahan sintaks dalam permintaan permintaan yang buruk.
404 Tidak ditemukan sumber daya di lokasi yang ditentukan tidak dapat ditemukan. Ini juga merupakan respons yang umum digunakan.
405 Metode Tidak Diizinkan Metode Permintaan (Dapatkan, Posting, Kepala, Hapus, Puts, Trace, dll.) Tidak berlaku untuk sumber daya yang ditentukan. (Baru untuk HTTP 1.1)
500 Kesalahan Server Internal Server mengalami situasi yang tidak terduga dan tidak dapat menyelesaikan permintaan pelanggan.
502 Ketika server Gateway yang buruk bertindak sebagai gateway atau proxy, untuk menyelesaikan permintaan untuk mengakses server berikutnya, server mengembalikan balasan ilegal.
2 Permintaan Ajax tulisan tangan
// mock metode xmlHttpRequest di IE5 dan IE6 if (window.xmlHttpRequest === tidak terdefinisi) {window.xmlHttprequest = function () {coba {return new ActivexObject ("msxml2.xmlHtp.6.0"); // Tersedia, gunakan objek ActiveX terbaru} catch (e1) {coba {return new ActiveXObject ("msxml2.xmlhttp.3.0"); // tidak dapat, mundur dari versi sebelumnya} catch (e2) {throw new error ("xmlHttpRequest tidak didukung"); }}}}}} // Dapatkan fungsi permintaan 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);} // Posting fungsi permintaan xhrpost (url, data, callback) {var request = new XmlHttpRequest (); request.open ('post', url, true); request.setRequestheader ('tipe konten', 'aplikasi/json'); request.onReadyStateChange = function () {if (request.readyState === 4 && request.status == 200) {callback && callback (request); }}; request.send (json.stringfy (data));}Ini adalah penggunaan tradisional XmlHttpRequest. XMLHTTPREQUEST Level 2 mengusulkan banyak metode baru, dan CORS yang sering kita sebutkan juga berasal dari metode ini.
Untuk mempelajari lebih lanjut tentang XHR2 yang direkomendasikan XMLHTTPREQUEST Level 2 Panduan Pengguna
3 masalah lintas domain
Ketika kami meminta data dari server lain melalui AJAX di halaman, klien akan memiliki masalah lintas domain karena kebijakan homolog browser untuk JavaScript. Kebijakan asal-kata yang sama mengacu pada skrip yang hanya dapat meminta sumber daya dari sumber yang sama (nama domain yang sama, nomor port, protokol).
Jika alamat layanan yang diminta oleh XMLHTTPREQuest di atas berbeda dari file saat ini, kesalahan berikut akan muncul di browser:
Jadi bagaimana cara menyelesaikan masalah silang semacam ini?
(1) Gunakan CORS untuk domain silang
"Berbagi Sumber Daya Cross-Origin, CORS Singkatnya). CORS adalah kemampuan untuk memperluas di XHR2. Metode penggunaannya sangat sederhana. Atur di sisi server:
HEADER SET ACCESS-CONTROL-ALLOW-INIGIN *
Pengaturan ini akan menerima permintaan lintas domain untuk semua nama domain, Anda juga dapat menentukan URL tertentu, atau Anda juga dapat membatasi nama domain:
HEADER SET ACCESS-CONTROL-Allow-origin http://www.test.com
Namun, batasan pendekatan ini adalah bahwa ia mengharuskan klien untuk mendukungnya dan server untuk melakukan pengaturan yang relevan. Ketika keduanya terpenuhi, domain silang melalui COR tidak hanya mendukung semua jenis permintaan HTTP, tetapi juga pengembang dapat menggunakan XMLHTTPRequest biasa untuk memulai permintaan dan mendapatkan data, yang memiliki penanganan kesalahan yang lebih baik daripada JSONP.
(2) Gunakan JSONP untuk mencapai leapfrogging
Untuk browser yang lebih tua, mereka cenderung tidak mendukung COR, jadi menggunakan JSONP untuk domain silang juga merupakan cara umum untuk menggunakan JSONP.
Kita tahu bahwa ketika memuat skrip target melalui spesifikasi SRC dari elemen <script> di halaman web, itu tidak terpengaruh oleh kebijakan asal-kata yang sama, sehingga mereka dapat digunakan untuk meminta data dari server lain. Teknologi ini yang menggunakan elemen <script> sebagai transmisi AJAX disebut JSONP.
Prinsip implementasi JSONP adalah sebagai berikut:
fungsi getjsonp (url, callback) {var funcname = getUliquename (); // Gunakan cap waktu atau merujuk ke penghitung auto-increment untuk mendapatkan nama fungsi unik URL + = "? Callback =" + funcName; // tambahkan nama fungsi sebagai parameter ke url var skrip = document.createElement ('skrip'); // Dynamicly Build Script Tags // Callback Function GetJSONP [funcName] = function (response) {try {callback (response); // Proses Data Respons} Akhirnya {// Bahkan jika fungsi callback atau respons melakukan kesalahan, hapus konten yang ditambahkan secara dinamis hapus getJsonp [funcName]; script.parentnode.removechild (scipt); }} // pemicu http permintaan skrip.src = url; document.body.appendChild (skrip); }JSONP juga memiliki beberapa kelemahan. Pertama -tama, dukungan JSONP Get tetapi tidak mendukung metode pos. Selain itu, permintaan AJAX digunakan menggunakan elemen <ript>, yang berarti bahwa halaman web dapat menjalankan kode JavaScript yang dikirim oleh server jarak jauh. Oleh karena itu, teknologi ini tidak boleh digunakan untuk server yang tidak percaya.
(3) Gunakan window.name to cross-domain
Objek jendela memiliki atribut nama, yang memiliki fitur: yaitu, selama siklus hidup jendela, semua halaman yang dimuat oleh jendela berbagi jendela. Window.Name tetap ada di semua halaman yang dimuat oleh jendela dan tidak akan diatur ulang karena pemuatan halaman baru. Oleh karena itu, data dapat diteruskan pada halaman dari berbagai sumber dengan window.name.
Jika www.a.com/a.html ingin mendapatkan data di www.b.com/b.html, prinsipnya adalah sebagai berikut:
a) menyimpan data di window.name di B.html
b) Bangun Tag Hidden (Tampilan: Tidak Ada) iframe di A.html, dengan asumsi bahwa ID diatur ke Proxy dan SRC diatur ke asal yang sama dengan A.html.
c) Dapatkan data di A.html melalui kode berikut
var proxy = document.geteLementById ('proxy'); proxy.onload = function () {var data = proxy.contentWindow.name; // Dapatkan data}d) Hapus elemen terkait
(4) Gunakan window.postmessage untuk melintasi domain
Metode ini relatif sederhana. Di halaman A, gunakan windowobj.postmessage (pesan, targetorigin) untuk mengirim informasi ke halaman target, dan di halaman B, informasi diperoleh dengan mendengarkan acara pesan. Metode ini adalah metode baru dalam HTML5 dan tidak dapat digunakan untuk browser yang lebih tua seperti IE6 dan IE7.
4 Cara Meningkatkan Kinerja Situs Web
Silakan merujuk ke dua artikel blogger lainnya:
Beberapa saran untuk meningkatkan kinerja situs web
Beberapa saran untuk meningkatkan kinerja situs web 2
Konten baru akan diperbarui terus menerus ...
Penulis Blog: Vicfeel