[ المتصفحات المشاركة في الاختبار : IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ]
[ نظام التشغيل : ويندوز]
دعونا نلقي نظرة على الكود أولاً:
تشغيل مربع التعليمات البرمجية
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<الرأس>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="الصفحة الرئيسية" />
<title>استخدام تغيير حجم الصندوق لتنفيذ إطار تقليد div</title>
<نمط النوع = "نص/CSS">
* {الهامش:0؛}
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
أتش تي أم أل، الجسم { الارتفاع: 100٪؛}
.top { الموضع: نسبي؛ الهامش العلوي: -100 بكسل؛
.side { الموضع: الارتفاع النسبي: 100%؛ الخلفية: #fc0؛ العرض: 200 بكسل؛
.main { الموضع: الفائض النسبي: الارتفاع: 100%؛ الخلفية: #f30؛}
.أسفل { الموقف: الارتفاع النسبي: 100px الخلفية: #f60؛}
</نمط>
</الرأس>
<الجسم>
<div class="top">
قمة
</div>
<div class="side">
جانب
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="main">
رئيسي
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="bottom">
قاع
</div>
</الجسم>
</html>
[Ctrl+A تحديد كافة النصائح: يمكنك تعديل جزء من الكود أولاً ثم الضغط على تشغيل]
الأجزاء الرئيسية :
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
المبدأ هو على الأرجح هذا :
ألف كلمة لا تستحق صورة من خلال المقارنة قبل وبعد الجراحة التجميلية، يجب أن يكون الجميع قادرين على رؤية تأثير تغيير حجم الصندوق: صندوق حدودي.
يجب على الطلاب الذين يفهمون تغيير حجم الصندوق أن يعرفوا أنه يأتي من عالم CSS3 البعيد عن Weiguo، لذا فإن IE6/IE7 غير مدعوم، لكنني مسؤول جدًا وأقول: هذا العرض التوضيحي متوافق عادةً مع IE6/IE7.
لأنه...
ضمن IE6/IE7، تكون قيمة حجم الصندوق الافتراضية <html> هي border-box (ملاحظة: IE7 غير طبيعي بعض الشيء، وقد تعافى الوعي بعد تجاوز السعة: مخفي، وهو ما لن يؤثر على التشغيل العادي لـ هذا العرض). ،
السؤال الآن هو ما إذا كان يجب استخدام هذه الطريقة، فلنقارن المزايا والعيوب، ويمكنك أن تقرر بنفسك:
من الأفضل استخدام طريقة تحديد المواقع المطلقة. تتمتع هذه الطريقة حاليًا بميزتين رئيسيتين:
أكبر عيوبه هو أنه غير مرن. إذا لم يكن هناك IE6، أعتقد أنني سأختار بالتأكيد طريقة تحديد المواقع المطلقة.
فيما يلي عرض توضيحي لمثال التطبيق.
تشغيل مربع التعليمات البرمجية
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<الرأس>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="الصفحة الرئيسية" />
<title>استخدام تغيير حجم الصندوق لتنفيذ إطار تقليد div</title>
<نمط النوع = "نص/CSS">
* {الهامش:0؛}
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
أتش تي أم أل، الجسم { الارتفاع: 100٪؛}
.top { الموضع: نسبي؛ الهامش العلوي: -100 بكسل؛
.side { الموضع: الارتفاع النسبي: 100%؛ الخلفية: #fc0؛ العرض: 200 بكسل؛
.main { الموضع: الفائض النسبي: الارتفاع: 100%؛ الخلفية: #f30؛ فهرس ع:2؛}
.main iframe { الارتفاع: 100%; العرض: 100% الخلفية:#fff;
.أسفل { الموقف: الارتفاع النسبي: 100px الخلفية: #f60؛}
</نمط>
</الرأس>
<الجسم>
<div class="top">
قمة
</div>
<div class="side">
جانب
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="main">
<iframeframeborder="0" src=" http://www.g.cn/"></iframe >
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="bottom">
قاع
</div>
</الجسم>
</html>
[Ctrl+A جميع نصائح التحديد: يمكنك تعديل جزء من الكود أولاً، ثم اضغط على تشغيل]
مشكلة يجب ملاحظتها :
لا تقم بإعطاء الفائض: مخفيًا للنص، فسوف يخفي أي شيء خارجه بلا رحمة الأشياء، بما في ذلك الجزء العلوي/السفلي (الرأس/التذييل)؛
نقطة مهمة يجب فهمها :
طريقة توليد ارتفاع [100%+(N)px]: div { height:100%; )بكسل;} .