خصائص CSS البعد
خصائص CSS البعد تسمح لك للسيطرة على ارتفاع وعرض عنصر.
هذا العنصر لديه عرض من 100٪.
تحديد الطول والعرض
و height و width واستخدام خصائص لضبط ارتفاع وعرض عنصر.
و height و width يمكن تعيين لصناعة السيارات (هذا هو الافتراضي. يعني أن المتصفح بحساب الطول والعرض)، أو أن تكون محددة في القيم طول، مثل px, cm ، وما إلى ذلك، أو في المئة (%) من كتلة تحتوي على .
ملاحظة: height و width خصائص لا تشمل الحشو، والحدود، أو الهوامش. وضعوا على ارتفاع / عرض من داخل المنطقة الحشو، والحدود، وهامش العنصر!
يظهر المثال التالي <div> العنصر الذي يبلغ ارتفاعه 100 بكسل وعرض 500 بكسل:
تعيين الحد الأقصى ل-عرض
و max-width يستخدم الملكية لتعيين الحد الأقصى لعرض عنصر.
و max-width يمكن تحديد قيم الطول، مثل px, cm ، وما إلى ذلك، أو في المئة (%) من كتلة تحتوي على، أو مجموعة لا شيء (وهذا هو الافتراضي. يعني أنه لا يوجد أي أقصى عرض).
المشكلة مع <div> يحدث أعلاه عند نافذة المتصفح هو أصغر من عرض العنصر (500px). ثم يضيف متصفح شريط التمرير الأفقي إلى الصفحة.
باستخدام max-width بدلا من ذلك، في هذه الحالة، سوف يحسن التعامل مع المتصفح من نوافذ صغيرة.
نصيحة: اسحب نافذة المتصفح لأصغر من 500px واسعة، لمعرفة الفرق بين عناصر div اثنين!
ملاحظة: قيمة max-width يتجاوز خاصية width .
يظهر المثال التالي <div> العنصر الذي يبلغ ارتفاعه 100 بكسل وبحد أقصى العرض 500 بكسل:
انها محاولة لنفسك - أمثلة
تعيين الطول والعرض من العناصر
يوضح هذا المثال كيفية تعيين الطول والعرض من العناصر المختلفة.
ضبط ارتفاع وعرض صورة باستخدام المئة
يوضح هذا المثال كيفية تعيين الطول والعرض للصورة باستخدام قيمة في المئة.
تعيين مين العرض وماكس-عرض عنصر
يوضح هذا المثال كيفية وضع حد أدنى للعرض وأقصى عرض لها عنصر باستخدام قيمة بكسل.
مجموعة دقيقة الارتفاع والحد الأقصى للطول عنصر
يوضح هذا المثال كيفية وضع حد أدنى للارتفاع وأقصى ارتفاع عنصر باستخدام قيمة بكسل.
اختبر نفسك مع تمارين!
جميع خصائص CSS البعد
| الملكية | وصف |
|---|---|
| height | يحدد ارتفاع عنصر |
| max-height | يحدد الحد الأقصى لارتفاع عنصر |
| max-width | يحدد الحد الأقصى لعرض عنصر |
| min-height | يحدد الحد الأدنى لارتفاع عنصر |
| min-width | يحدد الحد الأدنى لعرض عنصر |
| width | يحدد عرض عنصر |