CSS Layout

-

في هذا الدرس نتعرف على إمكانيات CSS في كيفية عرض العناصر HTML elements  باستخدام الخاصية display  حيث تعتبر هذه الخاصية من اهم الخصائص للتحكم بطريقة عرض العناصر. 

يتم في هذه الخاصية تعريف نوع rendering box المستخدم مع element 

وفي هذه الخاصية يتم التعامل مع elements بحيث يتم تحديد كيفية التعامل مع element ك block

او inline  وكيفية عرض element children بشكل flow layout، grid،

طريقة الكتابة :

display: value;

القيم Parameters or Arguments التي يمكن استخدامها :


القيمة 
الوصف
none

إخفاء العنصر (لن يتم عرض العنصر)

div { display: none; }

inline

العنصر سيولد inline element box،ويتم عرض العناصر بشكل متسلسل في نفس السطر

div { display: inline; }

امثلة على inline elements
⦁<span>
⦁<a>
⦁<img>
block

العنصر سيولد block element box ويتم عرض العناصر بشكل متسلسل فوق بعض

div { display: block; }

امثلة على block-level elements

⦁<div>

⦁<h1> - <h6>

⦁<p>

⦁<form>

⦁<header>

⦁<footer>

⦁<section>


inline-block

العنصر سيولد block element box يتصرف مثل inline element box

div { display: inline-block; }

list-item

العنصر سيولد block element box للمحتوى list-item inline box منفصل مضمّن

div { display: list-item; }

table

سيتصرف العنصر مثل عنصر <table> في HTML

div { display: table; }

table-caption

سيتصرف العنصر مثل عنصر < caption> في HTML

div { display: table-caption; }

table-column

سيتصرف العنصر مثل عنصر < col> في HTML

div { display: table-column; }

table-column-group

سيتصرف العنصر مثل عنصر < colgroup> في HTML

div { display: table-column-group; }

table-header-group

سيتصرف العنصر مثل عنصر < thead> في HTML

div { display: table-header-group; }

table-row-group

سيتصرف العنصر مثل عنصر < tbody > في HTML

div { display: table-row-group; }

table-footer-group

سيتصرف العنصر مثل عنصر < tfoot > في HTML

div { display: table-footer-group; }

table-row

سيتصرف العنصر مثل عنصر < tr> في HTML

div { display: table-row; }

table-cell

سيتصرف العنصر مثل عنصر < td> في HTML

div { display: table-cell; }

inherit

سيتم تطبيق خصائص parent element

div { display: inherit; }

الفرق بين  display: none; و visibility: hidden; 
في display: none  في هذه الخاصية يتم إخفاء element من صفحة HTML كما لو كان العنصر غير موجود.

مثال
 
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  display: none;
}
</style>
</head>
<body>
<h1 class="hidden">This is a hidden heading</h1>
<h1>This is a visible heading</h1>
</body>
</html>
طبق المثال في المتصفح وستلاحظ ان النتيجة إخفاء <h1> الثاني لأنه تم تطبيق class باسم hidden 



كما تلاحظ من النتيجة انه تم إخفاء <h1> الأول تمام وتم عرض <h1> الثاني بمكانه
visibility: hidden;:  يتم إخفاء العنصر element لكن يبقى العنصر يشغل مساحه كما لو كان غير مخفي(المساحه محجوزة في العرض)
مثال 

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  visibility: hidden;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
</body>
</html>
طيق المثال السابق ستكون النتيجة :


لاحظ ان مكان <h1> الأول باللون الاحمر محجوز لم يتم اخفاءه