عند استخدام كتل div بتنسيق HTML ولا يمكن ربط منتصف الكتل بإحكام، فلا يمكن فعل أي شيء.
1. يمكنك إضافة واحد في المحتوى الأوسط لـ <head></head>
* {
الهامش:0;
الحشو: 0؛
}
جعل التباعد بين كافة الكتل صفرًا لا يتعارض مع هامش الحشو أدناه.
2. توجد مشكلة فجوة بين القسمين العلوي والسفلي
لقد قمت بكتابة 4 أقسام، موزعة لأعلى ولأسفل، مع ترك مسافة بينها، وكان الكود والتأثير كما يلي:
.div1{
الارتفاع: 100 بكسل؛
لون الخلفية: أزرق؛
الموقف:نسبي؛
}
.div2 {
الارتفاع: 100 بكسل؛
لون الخلفية: أزرق بنفسجي؛
الموقف:نسبي؛
}
.div3{
الارتفاع: 100 بكسل؛
لون الخلفية: أحمر؛
الموقف:نسبي؛
}
.div4{
الارتفاع: 100 بكسل؛
لون الخلفية: أصفر؛
الموقف:نسبي؛
}
<الجسم>
<div class="div1" </div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</الجسم>
ثم حاولت إضافة هامش: 0 إلى كل div لإزالة التباعد بين div. الكود كما يلي:
.div1{
الارتفاع: 100 بكسل؛
لون الخلفية: أزرق؛
الموقف:نسبي؛
الهامش: 0;
}
.div2 {
الارتفاع: 100 بكسل؛
لون الخلفية: أزرق بنفسجي؛
الموقف:نسبي؛
الهامش: 0;
}
.div3{
الارتفاع: 100 بكسل؛
لون الخلفية: أحمر؛
الموقف:نسبي؛
الهامش: 0;
}
.div4{
الارتفاع: 100 بكسل؛
لون الخلفية: أصفر؛
الموقف:نسبي؛
الهامش: 0;
}
وتبقى النتيجة دون تغيير، ولكن لا تزال هناك ثغرات، كما هو موضح أدناه:
بعد ذلك، قمت بالبحث في بايدو ووجدت طريقة لتعيين حجم الخط، كما هو موضح في الكود والتأثير التالي:
الجسم {حجم الخط: 0؛}
.div1{
الارتفاع: 100 بكسل؛
لون الخلفية: أزرق؛
الموقف:نسبي؛
}
.div2 {
الارتفاع: 100 بكسل؛
لون الخلفية: أزرق بنفسجي؛
الموقف:نسبي؛
}
.div3{
الارتفاع: 100 بكسل؛
لون الخلفية: أحمر؛
الموقف:نسبي؛
}
.div4{
الارتفاع: 100 بكسل؛
لون الخلفية: أصفر؛
الموقف:نسبي؛
}
يركز الكود أعلاه على إضافة body{font-size:0;}، ويكون التأثير كما يلي:
يمكنك أن ترى أن الفجوة بين الجزء العلوي والسفلي من div قد تم إزالتها، ومع ذلك، لا تزال هناك فجوة بين الجزء العلوي واليسار.
وهذا ما فعلته، بإضافة body{margin:0px;}، الكود كما يلي:
الجسم {الهامش: 0px؛}
الجسم {حجم الخط: 0؛}
.div1{
الارتفاع: 100 بكسل؛
لون الخلفية: أزرق؛
الموقف:نسبي؛
}
.div2 {
الارتفاع: 100 بكسل؛
لون الخلفية: أزرق بنفسجي؛
الموقف:نسبي؛
}
.div3{
الارتفاع: 100 بكسل؛
لون الخلفية: أحمر؛
الموقف:نسبي؛
}
.div4{
الارتفاع: 100 بكسل؛
لون الخلفية: أصفر؛
الموقف:نسبي؛
}
التأثير هو كما يلي:
كما ترون، تم القضاء على جميع الثغرات.
ومع ذلك، لا تزال هناك مشكلة، وهي أن ضبط حجم الخط:0 سيؤدي إلى اختفاء جميع الخطوط.
هذه هي الطريقة التي قمت بها بحل هذه المشكلة: أضف div داخل div وأعد ضبط حجم خط div الداخلي، على سبيل المثال: Font-size:30px;.
الحل الأمثل!
3. DIV+CSS واضح: كلاهما يزيل مشكلة إنشاء فجوة فوق div بعد التعويم.
نحن نعلم أنه في بعض الأحيان يؤدي استخدام تعويم css إلى إنشاء تعويم css. في هذا الوقت، نحتاج إلى تنظيف التعويم، ويمكننا استخدام سمة النمط الواضحة لتحقيق ذلك.
ومع ذلك، بعد استخدام واضح: كلاهما لمسح العوامات، غالبًا ما تظهر فجوة بيضاء فوق القسم حيث يتم تطبيق واضح: كلاهما.
الحل هو إضافة overflow:hidden إلى القسم الموجود أعلى هذا القسم.
<div class="a اختبأ">
<div class="bms_2_1_1 fl">~عبور المحيط لرؤيتك</div>
<div class="bms_2_1_2 fl"><img src="__STATIC__/images/male.png" width="18" height="18"/></div>
</div>
<div class="b cle hid">بكين</div>
وصف النمط:
.cle{واضح:كلاهما؛}
.هيد {تجاوز: مخفي؛}
.fl{ تعويم: يسار؛}
.fr{ تعويم: يمين؛}
هذه هي الطريقة لحل فجوة div التي سببها واضح: كلاهما في هذه الأيام.
لماذا استخدام واضح: كلاهما في div؟ ويرجع ذلك أساسًا إلى أن النص الموجود في div b لا يمكن محاذاته إلى اليسار حتى إذا تم تعيين text-align:left في CSS، لذا يتم استخدام Clear:كلاهما في هذه الحالة.
بعض الأسئلة:
(1) لماذا يعتبر text-align:left للنص الصيني في div غير صالح؟
(2) لماذا يمكن أن يؤدي استخدام Clear:كلاهما إلى حل المشكلة عندما يكون text-align:left غير صالح؟
(3) لماذا يؤدي استخدام Clear:كلاهما إلى خلق فجوات؟
(4) لماذا يؤدي استخدام overflow:hidden; في نفس المستوى div أعلاه إلى حل مشكلة الفجوة أدناه؟
دعونا ندرس القضايا المذكورة أعلاه بالتفصيل عندما تتاح لنا الفرصة في المستقبل.
تلخيص:
عندما يستخدم div واضح: كلاهما لإنشاء فجوة، فإنك تحتاج إلى إضافة تجاوز: مخفي؛ إلى القسم الشقيق الموجود فوقه لإزالة الفجوة.