محورها: CSS-تخطيط

عندما تخطيط الصفحة غالبا ما يكون ضروريا لجعل محورها CSS-الطريقة: على سبيل المثال، لتوسيط الوحدة الرئيسية. هناك عدة حلول لهذه المشكلة، كل منها عاجلا أم آجلا سوف تضطر إلى استخدام أي المبرمج.

محاذاة النص إلى مركز

في كثير من الأحيان لأغراض الزينة تريد تعيين النص تتمحور، CSS في هذه الحالة، للحد من وقت الفرض. في وقت سابق هذا وقد تم استخدام HTML-سمات، ولكن الآن المعيار المطلوب لمحاذاة النص مع ورقة الأنماط. وعلى النقيض من كتلة التي تريد تغيير الحشو الخارجي في محاذاة CSS من النص في منتصف تتم مع خط واحد:

• مواءمة النصوص: المركز؛

ورثت هذه الخاصية، وتنتقل من الأم لجميع الأطفال. فإنه لا يؤثر فقط على النص ولكن أيضا إلى عناصر أخرى. لهذا الغرض، ينبغي أن تكون أحرف صغيرة (على سبيل المثال، فترة) أو صف كتلة (أي كتل التي تحدد الملكية العرض: كتلة). كما يسمح هذا الخيار الأخير لك لتغيير العرض والارتفاع للعنصر، وأكثر مرونة التشكيل من المسافة البادئة.

الصفحات في كثير من الأحيان محاذاة السمة لنفسه علامة. هذا على الفور يجعل رمز غير صالحة، منذ اعترف W3C السمة محاذاة عفا عليها الزمن. استخدامه على صفحة غير مستحسن.

كتلة تركزت

إذا كنت ترغب في تعيين محاذاة شعبة في الوسط، يمكن CSS تقديم تماما وسيلة مريحة: استخدام هامش الحشو الخارجي. الحشو يمكن تحديد كعناصر كتلة، وخط كتلة. يجب أن تكون القيمة Svoysva 0 (الحشو العمودي)، والسيارات (تسنن التلقائي أفقيا):

• هامش: 0 السيارات.

الآن يتم إدراج هذا الخيار صحيحا تماما. استخدام الحشو الخارجي كما يسمح لك لتعيين محاذاة للوسط: خاصية CSS-هامش تسمح لنا حل الكثير من المشاكل المرتبطة بعنصر تحديد المواقع على الصفحة.

محاذاة الحافة اليسرى أو اليمنى من كتلة

أحيانا CSS-الطريقة لا تتطلب محاذاة مركز، ولكن لا بد من وضع كتل المقبلة اثنين، واحد من الجانب الأيسر والآخر - من الناحية اليمنى. لهذا هناك خاصية الطفو، والتي يمكن أن تأخذ واحدة من ثلاث قيم: اليسار واليمين أو لا شيء. دعونا نقول لديك اثنين من القطع التي ينبغي أن توضع جنبا إلى جنب. ثم رمز على النحو التالي:

• .left {تعويم: غادر؛}
• .right {تعويم: الحق}

إذا كان هناك كتلة الثالث، الذي يجب أن يكون موجودا تحت كتل الأولين (على سبيل المثال، تذييل الصفحة)، فمن الضروري أن يسجل ميزة واضحة:

• .left {تعويم: غادر؛}
• .right {تعويم: الحق}
• تذييل {واضح: كلا}

حقيقة أن الكتل مع الطبقات من سقوط اليسار واليمين من تدفق الكلي، وهذا هو، كل عناصر أخرى تجاهلت وجودها من العناصر الانحياز. الملكية واضحة: كل من يسمح كتلة تذييل أو أي مرئية البعض عجلت من تدفق الخلايا ويمنع التفاف (تعويم) على كل من اليسار واليمين. ولذلك، في هذا المثال، تم تهجير تذييل الصفحة إلى الأسفل.

المحاذاة العمودية

هناك حالات حيث لا يكفي لضبط محاذاة وسط CSS-الطرق، يجب أيضا تغيير الوضع الرأسي للكتلة الطفل. أي خط أو صف كتلة عنصر يمكن الضغط على الحافة العلوية أو السفلية، وتقع في منتصف العنصر الأصل أو أن يكون في مكان التعسفي. غالبا ما تتطلب محاذاة وسط كتلة، فإنه يستخدم السمة محاذاة رأسية. لنفترض أن هناك كتلتين، واحدة متداخلة ضمن غيرها. في هذه الوحدة الداخلية - العنصر الصف كتلة (عرض: مضمنة كتلة). فمن الضروري لتحقيق المواءمة بين الطفل كتلة الرأسي:

• محاذاة الحدود العليا - .child {رأسية محاذاة: أعلى}؛
• تركز - .child {رأسية محاذاة: منتصف}؛
• محاذاة الحافة السفلية - .child {رأسية محاذاة: أسفل}؛

في العناصر كتلة لا ينطبق الصوت محاذاة النص، أو محاذاة رأسية.

مشاكل محتملة مع وحدات متوافقة

أحيانا الدرجة محاذاة وسط CSS-الطريقة يمكن أن يسبب صعوبة تذكر. على سبيل المثال، عند استخدام تعويم: على سبيل المثال، هناك ثلاث كتل:. أولا، .second و.third. الكتل الثانية والثالثة تكمن في المقام الأول. عنصر مع فئة تركت الانحياز الثانية، وكتلة الماضي - على اليمين. بعد مواءمة أسقطت اثنين من الدفق. إذا لم يتم تحديد العنصر الأصلي ارتفاع (على سبيل المثال، 30em)، وسوف تتوقف على امتداد ذروة الوحدات المصرفية التابعة. لتجنب هذا الخطأ، واستخدام "هل" - وحدة خاصة، الذي يرى .second و.third. CSS رمز:

• .second {تعويم: اليسار}
• .third {تعويم: الحق}
• .clearfix {الطول: 0؛ واضح: على حد سواء؛}

الزائفة غالبا ما تستخدم: بعد، والذي يسمح أيضا للعودة الكتل في مكانها عن طريق خلق psevdorasporki (في المثال في شعبة مع الطبقة تقع داخل الحاوية ويضم .left. أولا و.right):

• .left {تعويم: اليسار}
• .right {تعويم: الحق}
• .container: بعد {المحتوى: ''؛ عرض: الجدول؛ واضح: على حد سواء؛}

الخيارات المذكورة أعلاه - وأكثرها شيوعا، وإن كانت هناك بعض الاختلافات. يمكنك أن تجد دائما أسهل وأكثر راحة وسيلة لخلق psevdorasporki من خلال التجارب.

مشكلة أخرى كثيرا ما واجهت تخطيط - المواءمة بين عناصر خط كتلة. بعد كل منهم يتم إضافة مساحة تلقائيا. التعامل معها يساعد على الممتلكات الهامش، الذي تم تعريفه من قبل المسافة البادئة السلبية. هناك طرق أخرى، والتي تستخدم أقل كثيرا، على سبيل المثال، إعادة تعيين حجم الخط. في هذه الحالة، فإن خصائص العنصر الأصل تسجل FONT-SIZE: 0. اذا كانت واقعة ضمن كتل من النص، عاد خصائص عناصر خط كتلة لحجم الخط المطلوب. على سبيل المثال، حجم الخط: 1em. والطريقة ليست دائما مريحة، لذلك يستخدم كثيرا أكثر شيوعا نسخة مع هوامش الخارجية.

محاذاة كتل يسمح لك لإنشاء صفحات جميلة وظيفية: التخطيط العام والتخطيط، وموقع السلع في المحلات التجارية، والصور على موقع صغير.