Part1 CSS ذات الصلة
1 ما هي العناصر المضمّنة والكتل؟
تشمل العناصر المضمنة الشائعة (العناصر داخل الخط) A ، B ، Span ، I ، EM ، المدخلات ، SELECT ، IMG ، إلخ.
تشمل عناصر الكتلة الشائعة Div ، UL ، LI ، H1 ~ H6 ، Talbe ، OL ، UL ، TD ، P ، إلخ.
2 العائمة ذات الصلة
يشير التصميم العائم إلى إزالة عنصر من دفق الدفق/المستند العادي حتى يتمكن من التحرك إلى اليسار واليمين حتى تلتقي الحافة الخارجية بالحافة التي تحتوي على المربع أو صندوق عائم آخر. لا ينتمي مربع عائم إلى دفق عادي في مستند. عندما يطفو عنصر ما ، فلن يؤثر ذلك على تخطيط عناصر مستوى الكتلة ولكنه سيؤثر فقط على ترتيب العناصر المضمنة.
وذلك على وجه التحديد لأن العنصر العائم مفصلاً عن دفق المستند الذي لا يعرفه العنصر الأم الخاص به وجوده ، لذلك سوف يتصرف على ارتفاع 0. بغض النظر عن كيفية تغيير العنصر العائم ، فإن العنصر الأصل لن يلفه به. وتسمى هذه الظاهرة أيضا "انهيار الارتفاع".
في المثال التالي ، بغض النظر عن كيفية تغيير ارتفاع #Floatdom ، يكون الارتفاع #parent دائمًا 0 ، مما يؤدي إلى عدم قدرة حدود العنصر الأصل على فتحها ، ولا يمكن عرض الخلفية ، إلخ.
<div id = "parent"> <div id = "floatdom" style = "float: left ؛ width: 300px ؛ الارتفاع: 300px ؛"> <div style = "clear: كلا"> </div>
بسبب وجود انهيار للغاية (وهو ما لا نتوقع في كثير من الأحيان) ، يجب مسح العائمة. فيما يلي عدة طرق لمسح العائمة:
• أضف عناصر بأسلوب "واضح: كلاهما" بعد العناصر العائمة
<div id = "parent"> <div id = "floatdom" style = "float: left ؛ width: 300px ؛ الارتفاع: 300px ؛"> <div style = "clear: كلا"> </div>
يمكنك أيضًا إضافة علامات BR ، والتي تأتي مع واضحة: كلتا السمات
<div id = "parent"> <div id = "floatdom" style = "float: left ؛ width: 300px ؛ الارتفاع: 300px ؛"> <br/> </viv>
إن مزايا استخدام هذه الطريقة لمسح العائمة هي أنه من السهل الفهم ، وسهل الإتقان ، والعيوب واضحة أيضًا. تتم إضافة العديد من الملصقات التي لا معنى لها ، وهو أمر مؤلم للغاية في الصيانة اللاحقة.
• أضف النمط "الفائض: مخفي" إلى العنصر الأصل
<div id = "parent" style = "overflow: hidden"> <div id = "floatdom" style = "float: left ؛ width: 300px ؛ height: 300px ؛"> </div>
لا توجد مشكلات هيكلية ودليلية بهذه الطريقة وكمية الكود صغيرة جدًا. ومع ذلك ، عندما يزداد المحتوى ، لن يتم لف المحتوى تلقائيًا ، وسيتم إخفاء المحتوى ، ولا يمكن عرض العناصر التي تحتاج إلى التغلب عليها.
• الاستخدام: بعد العنصر الزائف
<type type = "text/css"> .clearfix: بعد {content: "." ؛ العرض: كتلة ؛ الارتفاع: 0 ؛ الرؤية: مخفية ؛ واضح: كلاهما ؛ } .clearfix { *Zoom: 1 ؛ } </style> <div id = "parent"> <div id = "floatdom" style = "float: left ؛ width: 300px ؛ height: 300px ؛"> </viv>باستخدام هذه الطريقة ، تحتاج فقط إلى إضافة فئة إلى العنصر الهدف ، وهو أيضًا الطريقة الأكثر استخدامًا في الوقت الحالي.
مرجع
iyunlu.com/view/css-xht
3. الفرق بين التصميم النسبي والتخطيط المطلق
الفرق الأكثر أهمية بين التخطيط النسبي والتخطيط المطلق هو ما إذا كان يتم فصله عن تدفق المستند.
لا يتم فصل التصميم النسبي عن تدفق المستند ، أي بعد تحديد التصميم النسبي للعنصر ، لا يزال تدفق المستند يحافظ على موضعه الأصلي. من خلال تعيين خصائص مثل العلوي واليسرى ، يمكن أن يضع إزاحة بالنسبة للموضع الأصلي.
يتم فصل التصميم المطلق عن تدفق المستند ، أي أن العناصر الموجودة في تدفق المستند لا تعرف وجود عنصر التصميم المطلق. يكون وضع التصميم المطلق بالنسبة للعناصر ذات التصميم النسبي أو التصميم المطلق في العنصر الأصل. إذا لم يكن هناك أي منها ، فهو يتعلق بتخطيط الجسم.
4 مربع نموذج
يحدد نموذج المربع نموذج عرض عنصر ، بما في ذلك المحتوى (المحتوى) ، الحشو (الهامش الداخلي) ، الحدود (الحدود) والهامش (الهامش الخارجي). يوجد حاليًا معايير طراز مربع ، أحدهما هو نموذج الصندوق القياسي لـ W3C ، والآخر هو طراز IE Box ، الذي يعتمد معايير Microsoft الخاصة.
الفرق بين هذين النموذجين الصندوق هو أساسا في حساب عرض العناصر. العرض المحدد في CSS في الوضع القياسي هو عرض المحتوى ، والعرض الذي يشغله العنصر بأكمله في الصفحة ، وصيغة الحساب هي:
نسخة الكود كما يلي:
dom_width = عرض + حشوة + حدود + هامش
في نموذج IE Box ، يكون العرض المحدد في CSS هو المحتوى + الحدود + الحدود. لذلك ، في نموذج مربع IE ، يكون العرض الذي يشغله العنصر بأكمله في الصفحة (نفس الارتفاع)
نسخة الكود كما يلي:
dom_width = العرض + هامش
في CSS3 ، يتم الاحتفاظ بنموذجين مربعين باستخدام box-sizing . عندما نضع box-sizing: content-box (الافتراضي) ، فإننا نعتمد نموذج المربع القياسي لـ W3C. عندما نضع box-sizing:border-box ، نستخدم طراز IE Box.
5 CSS إعادة تعيين (إعادة تعيين)
يحتوي كل متصفح على بعض الأنماط التي تأتي معها ، وغالبًا ما تختلف الأنماط التي تأتي معها في كل متصفح ، مما يجلب بعض الإزعاج لتخطيطنا. لذلك ، في الممارسة العملية ، غالبًا ما يكون من الضروري "مسح" نمط CSS للمتصفح ، أي إعادة تعيين CSS. أبسط رمز إعادة ضبط هو كما يلي:
*{الهامش: 0 ؛ الحشو: 0 ؛}على الرغم من أن هذه الطريقة بسيطة ، إلا أنها "عنيفة" للغاية ، لأن العديد من العناصر مثل Div و LI لا تحتوي على أنماط الهامش أو الحشو بشكل افتراضي ، وهو ما يسبب الكثير من التكرار. الطريقة الأكثر موصى بها لكتابة رمز إعادة تعيين وفقا لاحتياجاتك.
مرجع:
www.zhangxinxu.com/wordpress/2010/08/html5-css-reset
6 CSS اختراق
نظرًا لأن المتصفحات المختلفة لديها تحليل ودعم مختلف لـ CSS ، فإن هذا سيؤدي إلى عرض رمز CSS نفسه في متصفحات مختلفة. هذا يتطلب اختراق CSS لحل مشكلة توافق المتصفحات المختلفة. وتسمى عملية كتابة أنماط مختلفة للمتصفحات المختلفة CSS Hack.
هناك العديد من الأشكال الشائعة من اختراق CSS:
• خصائص الاختراق
على سبيل المثال ، يمكن لـ IE6 التعرف على _width و *width ، ولكن في IE7 يمكن أن يتعرف على *width ، ولكن لا يمكنه التعرف على _width ، لا يتم التعرف على أي منهما في Firefox.
• حدد حرف الاختراق
على سبيل المثال ، يمكن لـ IE6 التعرف على *html .class{} ، ويمكن لـ IE7 التعرف على *+html .class{} أو *:first-child+html .class{} .
• الظروف اختراق
IE الشرح الشرطي عبارة عن بيان منطقي غير قياسي قدمته Microsoft منذ IE5. على سبيل المثال ، لجميع IES:
<!
لـ IE6 وتحت:
<! [إذا lt ie 7]> <! الكود الخاص بك> <!
لا يسري هذا النوع من الاختراق على CSS فحسب ، بل يسري أيضًا على جميع الرموز المكتوبة في بيانات الحكم.
مرجع
//www.vevb.com/css/226888.html
7 تدهور رشيق وتعزيز تدريجي
يشير التحسين التدريجي إلى صفحات بناء المتصفحات المنخفضة للاحتفالات لضمان الوظائف الأساسية ، ثم تحسين التأثيرات والتفاعلات والتحسينات الأخرى والوظائف الإضافية للمتصفحات المتقدمة لتحقيق تجربة مستخدم أفضل.
يشير التصنيف الأنيق إلى بناء وظائف كاملة من البداية ثم متوافقة مع متصفحات الإصدار السفلي.
الفرق بين الاثنين هو أن التخفيضات الأنيقة تبدأ بوضع معقد في الراهن ومحاولة تقليل توريد تجربة المستخدم ، في حين يبدأ التحسين التدريجي بإصدار أساسي وظيفي للغاية ويتم توسيعه بشكل مستمر لتلبية احتياجات البيئات المستقبلية. التدهور (الانحلال الوظيفي) يعني النظر إلى الوراء ؛ في حين أن التحسين التدريجي يعني التطلع إلى الأمام مع ضمان أن يكون أساسه في منطقة آمنة.
8 أخبرنا عن مشكلات توافق المتصفح التي تمت مواجهتها
• الهوامش الداخلية والهوامش الخارجية المعروضة في متصفحات مختلفة مختلفة. على سبيل المثال ، تحتوي علامة UL على قيمة حشوة في Firefox افتراضيًا ، بينما في الهامش IE فقط له قيمة.
باستخدام إعادة تعيين CSS (انظر المادة 5)
• خطأ الهامش المزدوج لـ IE6 ، يكون الهامش في الأصل 10 بكسل بعد عوام العنصر على مستوى الكتلة ، لكن IE يفسره على أنه 20 بكسل.
قم بتعيين شاشة العنصر على مستوى الكتلة على الخط
• لا يتم دعم الضعف في IE6
تتمثل وظيفة الضعف في الحفاظ على الحد الأدنى من الارتفاع عندما يكون لدى الحاوية محتوى أقل ، حتى لا يدمر تأثير التصميم أو تصميم واجهة المستخدم. عند زيادة المحتوى في الحاوية ، يمكن للحاوية تمتد تلقائيًا للتكيف مع التغييرات في المحتوى.
يمكن حل هذا من خلال:
#TargetDom {background: #ccc ؛ MINIight: 100px ؛ الارتفاع: Auto! مهم ؛ الارتفاع: 100px ؛ الفائض: مرئي ؛ }• وظيفة الطريقة لأحداث الربط في ربط الأحداث القياسي هي AddEventListener ، بينما يستخدم IE Attachevent
من خلال الحكم الشرطي ، اكتب بيانين ملزمين أو استخدم مكتبات إطار الويب مثل jQuery لربطها.
• المتصفحات القياسية تتبنى التقاط الأحداث ، بينما تعتمد IE آلية فقاعة الأحداث
في وقت لاحق ، اعتقد المعيار أن الفقاعة كانت أكثر منطقية ، واستخدمت المعلمة الثالثة لتعيين addeventListener لتكون متوافقة مع آليتين ، وكانت فقاعة الأحداث هي القيمة الافتراضية.
• سمة الحدث في معالجة الأحداث تختلف عن تلك الموجودة في المتصفحات القياسية.
يتم إحضار المتصفح القياسي كمعلمة ، ويتم الحصول على IE في النافذة. العنصر المستهدف هو e.srcelement. المتصفح القياسي هو E.Target.
Part2 Other
1 فهم رموز حالة HTTP شائعة الاستخدام
200 OK كل شيء على ما يرام ، وثيقة الاستجابة إلى طلبات GET و POST يليها.
201 قام الخادم الذي تم إنشاؤه بإنشاء المستند ويرد رأس الموقع عنوان URL الخاص به.
202 تم قبول الطلب ، ولكن لم يتم الانتهاء من المعالجة.
304 لم يتم تعديل العميل ، قام العميل بتخزين المستندات ويصدر طلبًا مشروطًا (عادةً ما يوفر رأسًا معدلًا إذا كان العميل يريد فقط تحديث المستندات من التاريخ المحدد). يخبر الخادم العميل أنه يمكن استخدام المستند الأصلي المخزن المؤقت.
400 حدث خطأ في بناء الجملة في طلب طلب سيء.
404 لم يتم العثور على المورد في الموقع المحدد لا يمكن العثور عليه. هذا هو أيضا استجابة شائعة الاستخدام.
405 لا يُسمح بأسلوب الطلب (Get ، Post ، Head ، Delete ، Put ، Trace ، وما إلى ذلك) لا ينطبق على المورد المحدد. (جديد لـ HTTP 1.1)
500 خطأ خادم داخلي واجه الخادم موقفًا غير متوقع ولم يتمكن من إكمال طلب العميل.
502 عندما يعمل خادم البوابة السيئة كبوابة أو وكيل ، من أجل إكمال الطلب للوصول إلى الخادم التالي ، يقوم الخادم بإرجاع رد غير قانوني.
2 طلب AJAX المكتوب بخط اليد
// mock طريقة xmlhttprequest في ie5 و ie6 if (window.xmlhttprequest === undefined) {window.xmlhttprequest = function () {try {return new ActivexObject ("msxml2.xmlhtp.6.0") ؛ // متاح ، استخدم أحدث كائن ActiveX} catch (e1) {try {return new ActivexObject ("msxml2.xmlHttp.3.0") ؛ // غير قادر ، التراجع عن الإصدار السابق} catch (e2) {رمي خطأ جديد ("xmlhttprequest غير مدعوم") ؛ }}}}}} // 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.ResponSetext) ؛ }} ؛ request.send (null) ؛} // وظيفة post request وظيفة xhrpost (url ، البيانات ، رد الاتصال) {var request = new xmlhttprequest () ؛ request.Open ('post' ، url ، true) ؛ request.setRequestHeader ('نوع المحتوى' ، 'application/json') ؛ request.OnReadyStateChange = function () {if (request.ReadyState === 4 && request.status == 200) {callback && callback (request) ؛ }} ؛ request.send (json.stringfy (data)) ؛}هذا هو الاستخدام التقليدي لـ XMLHTTPrequest. يقترح XMLHTTPREQUEST المستوى 2 العديد من الطرق الجديدة ، ويأتي CORS التي نذكرها غالبًا من هذه الطريقة.
لمعرفة المزيد حول XHR2 الموصى بها XMLHTTPREQUEST المستوى 2 دليل المستخدم
3 قضايا النطاق عبر المجال
عندما نطلب بيانات من خوادم أخرى من خلال Ajax على الصفحة ، سيواجه العميل مشاكل في المجال بسبب السياسة المتماثلة للمتصفح لـ JavaScript. تشير ما يسمى السياسة ذات الأصل من نفس إلى برنامج نصي لا يمكن إلا أن يطلب الموارد من نفس المصدر (نفس اسم المجال ، رقم المنفذ ، البروتوكول).
إذا كان عنوان الخدمة الذي طلبه XMLHTTPrequest أعلاه يختلف عن الملف الحالي ، فسيظهر الخطأ التالي في المتصفح:
إذن كيف تحل هذا النوع من مشكلة النطاق المتقاطع؟
(1) استخدم cors إلى المجال المتقاطع
"مشاركة الموارد المتقاطعة ، CORS for Short). CORS هي القدرة على التوسع في XHR2. طريقة الاستخدام بسيطة للغاية. قم بتعيينها على جانب الخادم:
مجموعة رأس مجموعة الوصول-البالغة-الأوليجين *
سيقبل هذا الإعداد طلبات النطاق المتقاطع لجميع أسماء النطاقات ، يمكنك أيضًا تحديد عناوين URL محددة ، أو يمكنك أيضًا الحد من اسم المجال:
رأس مجموعة Access-Control-allow-origin http://www.test.com
ومع ذلك ، فإن الحد من هذا النهج هو أنه يتطلب من العميل دعمه والخادم لإجراء الإعدادات ذات الصلة. عندما يكون كلاهما راضيًا ، لا يدعم النطاق المتقاطع من خلال CORS جميع أنواع طلبات HTTP فحسب ، بل يمكن للمطورين أيضًا استخدام XMLHTTPrequest العادي لبدء الطلبات والحصول على البيانات ، التي لديها معالجة أخطاء أفضل من JSONP.
(2) استخدم JSONP لتحقيق Leapfrogging
بالنسبة للمتصفحات القديمة ، فإنها لا تميل إلى دعم CORS ، لذا فإن استخدام JSONP للتجول عبر المجال هو أيضًا وسيلة شائعة لاستخدام JSONP.
نحن نعلم أنه عند تحميل البرامج النصية المستهدفة من خلال مواصفات SRC لعنصر <script> في صفحة ويب ، لا يتأثر بسياسة الأصل من نفس ، بحيث يمكن استخدامها لطلب البيانات من خوادم أخرى. تسمى هذه التقنية التي تستخدم <script> عناصر Ajax Transmission JSONP.
مبدأ تنفيذ JSONP هو كما يلي:
دالة getJsonp (url ، callback) {var funcname = getUniquename () ؛ // استخدم الطوابع الزمنية أو الرجوع إلى عداد التلقائي التلقائي للحصول على عنوان url url + = "؟؟" + funcname ؛ // إضافة اسم الوظيفة كمعلمة إلى url var script = document.createElement ('script') ؛ // بناء علامات البرنامج النصي بشكل ديناميكي // وظيفة رد الاتصال getjsonp [funcname] = function (response) {try {callback (response) ؛ // Process Response Data} أخيرًا {// حتى إذا كانت وظيفة رد الاتصال أو الاستجابة تلمي خطأً ، قم بمسح المحتوى المضافة ديناميكيًا حذف getjsonp [funcname] ؛ script.parentnode.removechild (Scipt) ؛ }} // trigger http request script.src = url ؛ document.body.appendchild (script) ؛ }JSONP لديه أيضا بعض العيوب. بادئ ذي بدء ، يدعم JSONP GET ولكن لا يدعم طريقة البريد. بالإضافة إلى ذلك ، يتم استخدام طلبات AJAX باستخدام <script> عناصر ، مما يعني أنه يمكن لصفحة الويب تنفيذ أي رمز JavaScript يرسله الخادم البعيد. لذلك ، لا ينبغي استخدام هذه التكنولوجيا للخوادم التي لا تثق.
(3) استخدم window.name إلى المجال المتقاطع
يحتوي كائن النافذة على سمة اسم ، والتي لها ميزة: أي ، خلال دورة حياة النافذة ، تشارك جميع الصفحات المحملة بواسطة النافذة نافذة. اسم ، وكل صفحة قد قرأت وكتابة أذونات إلى window.name. يستمر window.name في جميع الصفحات المحملة بواسطة نافذة ولن يتم إعادة تعيينها بسبب تحميل صفحة جديدة. لذلك ، يمكن تمرير البيانات على صفحات من مصادر مختلفة مع window.name.
إذا أراد www.a.com/a.html الحصول على البيانات في www.b.com/b.html ، فإن المبدأ هو كما يلي:
أ) تخزين البيانات في window.name في b.html
ب) قم ببناء علامة مخفية (Display: None) Iframe في A.HTML ، على افتراض أن المعرف تم تعيينه على الوكيل وأن SRC يتم تعيينه على نفس الأصل مثل A.HTML.
ج) الحصول على البيانات في A.HTML من خلال الكود التالي
var proxy = document.getElementById ('proxy') ؛ proxy.onload = function () {var data = proxy.contentWindow.name ؛ // Get Data}د) إزالة العناصر ذات الصلة
(4) استخدم window.postmessage لعبور المجال
هذه الطريقة بسيطة نسبيا. في الصفحة A ، استخدم windowobj.postmessage (الرسالة ، Targetorigin) لإرسال المعلومات إلى الصفحة المستهدفة ، وفي الصفحة B ، يتم الحصول على المعلومات من خلال الاستماع إلى أحداث الرسائل. هذه الطريقة هي طريقة جديدة في HTML5 ولا يمكن استخدامها للمتصفحات القديمة مثل IE6 و IE7.
4 كيفية تحسين أداء الموقع
يرجى الرجوع إلى مدون المدون الأخرى:
بعض الاقتراحات حول تحسين أداء الموقع
بعض الاقتراحات حول تحسين أداء الموقع 2
سيتم تحديث محتوى جديد بشكل مستمر ...
مؤلف المدونة: Vicfeel