خلاصه انواع display
انواع display ها و توضیحات کامل آن ها ( سعی شده مهم ترین ها و کاربردی ترین های آن ها گفته شود )
مفهوم inline Element و block Element
inline Element : تگ هایی هستند که به اندازه خودشون میان و فضا میگیرند و اگر اندازه اون محتوای داخلشون کم باشه فضای کمتری میگیرند و اگر زیاد باشه زیاد میگیرند مثل تگ های a که اگر ازشون استفاده بکنیم به صورت متوالی میان و در یک سطر قرار میگیرند
block Element : این تگ ها علاوه بر محتوای خودشون به اندازه یک سطر هم میان و فضا اشغال میکنند و محتوای تگ بعدی رو به لاین بعدی میفرستن
1 - display : inline »
عناصر inline می توانند margin و / یا padding داشته باشند اما نمی توانند width و height داشته باشند. تعیین عرض و ارتفاع برای اینگونه عناصر اندازه آنها را تغییر نخواهد داد. نکته دیگر اینکه زمانی که به این عناصر padding و margin می دهید عناصر مجاورشان را در راستای افقی هول می دهند اما در راستای عمودی تاثیری بر روی آنها ندارند. در تصویر زیر متن مشخص شده عنصر span است که از همه جهت padding و margin گرفته است
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, repudiandae
eveniet. Aliquam nisi nostrum <span>emad</span> iusto aut veritatis, eum obcaecati.
Obcaecati eligendi temporibus quas officia quis <span>taghipour</span> eaque. Possimus magnam sed
sint.
</p>
</body> span {
padding: 10px;
margin: 10px;
background-color: red;
}
--------------------------------------------------------------------------------------------------------------------------------
2- display : inline-block » این ویژگی هم شبیه به inline است با این تفاوت که مقادیر عرض و ارتفاع اندازه آن را تغییر خواهند داد و همینطور margin و padding آنها بر روی عناصر مجاور آنها در هر دو راستای عمودی و افقی تاثیر خواهد گذاشت. استایل بالا رو در با پایین جایگزین کنین
--------------------------------------------------------------------------------------------------------------------------------
3- display : block »
در مقابل عناصر خطی, عناصری که چارچوب block دارند در حالت پیشفرض در یک خط با عناصر دیگر قرار نمی گیرند و کل فضای افقی را می گیرند (یعنی در حالت پیشفرض کل فضایی که عنصر نگهدارنده آن داشته باشد را اشغال می کند یا به معنای دیگر عرض بیشینه خواهد داشت). عناصر block در مقابل با عناصر inline می توانند هر نوع عنصری (block و inline) را درون خود داشته باشند.
span{
display: inline-block;
padding: 10px;
width: 100px;
height: 100px;
margin: 10px;
background-color: red;
}
--------------------------------------------------------------------------------------------------------------------------------
4- display : none » با استفاده از این ویژگی میاد و کل اون عنصر رو برای ما حذف اش میکند و جای اون رو بقیه عناصر پر میکنند حال اگر بخاهیم بیایم و جای خالی عنصر باقی مانده باشد از ویژگی visibility : hidden استفاده میکنیم که یک لاین خالی رو برای ما درست میکند و اون فضای اشغال شده رو برامون نشان میدهد
--------------------------------------------------------------------------------------------------------------------------------
5- display : inline-flex » رفتار عنصر را تبدیل به inline می کند و عناصر داخلی آن را بر اساس مدل flexbox در کنار هم می چیند.
--------------------------------------------------------------------------------------------------------------------------------
6- display : flex » برای چینش المان هامون در راستای عرض یعنی برای عنصر والدی که میایم و ازش استفاده میکنیم در محدوده های عرض قابل تغیر هستش و عناصر فرزند هم میتوانند هم در عرض و هم در طول والدشون تغیر بکنند این ماژول دارای ویژگی های زیر هست
container : عنصر نگهدارنده که حاوی المان های مختلف هستش و حکم والد عناصر رو دارد
item : به فرزندان عناصر والد میگویند
row / column / row-reverse / column-reverse : flex-direction
مشخص کردن جهت فرزندان در داخل عنصر والد
wrap / no-wrap : flex-wrap به طور کلی وقتی فرزندان به انتهای عنصر والدشون می رسند شروع میکنند و از مقدار عرض اشون کم میکنند تا در عنصر والد جا شوند اما این پراپرتی میاد و میگوید که فرزندان اگر به انتهای عنصر والد رسیدند به جای کم کردن عرض بیان و شکسته شوند و به لاین بعدی بروند و در آن جا قرار گیرند
flex-start / flex-end / center / space-between / space-around / space-evenly : justify-content
برای جابه جایی فرزندان در راستای عرض عنصر والدشون
flex-start / flex-end / center / baseline / stretch : align-item برای جا به جایی فرزندان در راستای طول عنصر والدشون
flex-start / flex-end / center / stretch / space-between / space-around : align-content
این ویژگی اجازه می دهد زمانی که عنصرهای داخلی بیشتر از یک ردیف هستند بتوان آن چند ردیف را نسبت به محور عمود هم ترازسازی کرد. تصویر زیر گویای ماجراست.
order : مقادیر عددی میگیرد برای جابه جایی عناصر فرزند باهم دیگه کاربرد دارد
flex-grow / flex-shrink / flex-basis : flex خلاصه نویسی
flex-grow : این عامل یک عدد صحیح می باشد که نشان می دهد یک عنصر داخلی چند برابر عنصرهای دیگر از فضای عنصر نگهدارنده سهم می برد. مثلا اگر همه عنصرها مقدار 1 را داشته باشند فضای عنصر نگهدارنده به صورت برابر بین عنصرهای داخلی تقسیم می شود اما اگر یکی از آنها مقدار 2 را بگیرد سهم آن دو برابر سهم دیگر عنصرهای داخلی می باشد.
flex-shrink : این عامل به ندرت مورد استقاده قرار می گیرد. کاربرد آن زمانی است که جمع اندازه های عنصرهای داخلی بیشتر از عنصر نگهدارنده شود و سرریز داشته باشیم. حال باید عنصرهای داخلی کمی آب شوند (shrink) تا از سرریز جلو گیری شود که این کم کردن اندازه عنصرهای داخلی با توجه به این عامل انجام می گیرد مثال زیر دا در نظر بگیرید:
flex-basis : می توان به هر عنصر یک مقدار flex-basis به صورت زیر اختصاص داد اول از همه این مقدار با توجه به جهت عنصر نگهدارنده به عرض یا ارتقاع به صورت خودکار تعلق میگیرد یعنی اگر جهت عنصر نگهدارنده row باشد این مقدار به عرض عنصرهای داخلی داده می شود و اگر column باشد به ارتقاع عنصرهای داخلی تعلق میگیرد
align-self : برای این کار از ویژگی align-self استفاده می کنیم که این ویژگی به عنصر داخلی تعلق می گیرد و مقادیر آن شبیه مقادیر align-items است.
--------------------------------------------------------------------------------------------------------------------------------
7- display : inline-grid » رفتار عنصر را تبدیل به inline می کند و عناصر داخلی آن را بر اساس مدل grid در کنار هم می چیند.
--------------------------------------------------------------------------------------------------------------------------------
8- display : grid » این ماژول کامل تر از فلکس هستش و از آن برای تراز المان هامون در ارتفاع یا ستون ها بهمون کمک میکند و مفاهیم grid-item & grid-container آن مشابه بالایی هستش
مفاهیم مهم اش Gap فاصله بین المان ها line خط فرضی بین دو المان ها
پراپرتی های مهم آن
grid-template-columns : برای مشخص کردن تعداد ستون ها استفاده میکنیم که میتوانیم در آن بیایم
و با مقدار auto تعداد ستون های یکسان بدهیم یاهم با مقادیر پیکسلی اندازه ستون ها رو مشخص کنیم
grid-template-rows : مشابه یکی بالایی هست ولی یکی بالایی بیشتر کاربرد دارد
grid-column-gap : برای مشخص کردن مقدار فاصله بین ستون ها هستش
grid-row-gap : برای مشخص کردن مقدار فاصله بین ردیف ها هستش
grid-row-gap / grid-column-gap : grid-gap
flex-start / flex-end / center / space-between / space-around / space-evenly : justify-content
برای جابه جایی فرزندان در راستای عرض عنصر والدشون
grid-column-start / grid-column-end : grid-column برای گرید بندی ستون هامون میایم و از این
استفاده میکنیم که مثلا میگوید از فلان لاین تا فلان لاین بیا و ادامه بده و خودتو بکشون
که این لاین بندی ها رو بیا و برای ستون ها انجام بده
grid-row-start / grid-row-end : grid-row مشابه یکی بالایی هست فقط برای ردیف ها هستش
نکته : مفهوم span برای گام برداشتن در گرید بندی ها
grid-template-areas : برای ستون دهی به صوتر ساده میایم و از این استفاده میکنیم و باید بیایم و از اسامی ها برای آن استفاده بکنیم
grid-area : نام هایی که دربالا گزاشته رو میایم و در این ها قرار میدهیم
9 - float که از آن برای شناور سازی عناصر میایم و استفاده میکنیم
که مشابه ان در متن ها texy-align هست که برای جابه جایی متن در چپ و راست و وسط متن امون استفاده میکنیم
float مقادیر right و left و none رو میگیرد
ما وقتی مثلا میایم و از یک عنصر مثلا یک تصویر میایم و از float در داخل آن استفاده میکنیم اون عنصر ما رو در اون قسمت خاصی که گفتیم میاد و شناور میکند و بقیه عناصر صفحه بدون در نظر گرفتن اون عنصر شناور سازی خودشونو حال چه block چه به صورت inline میان و انجام میدهند در کنار تصویر ما
حال اگر به این مشکل خوردیم که مثلا تصویرمون از اون محدوده پرنت خودش اومده و زده بود بیرون می توانیم به پرنت اش استایل overflow : auto رو بدهیم
( نکته استفاده از padding و margin ) در این عناصر برای شناور سازی ها هم یادتون باشه
استفاده از clearfix به ما میگوید که عنصری که float دارد رو فضای بعدش رو تمیز بکن و عناصر دیگه اش رو بیا و بنداز لاین بعد حال برای این کار ما یک تگ div بعد عنصر float امون درست میکنیم و یک کلاس با نام clearfix بهش میدهیم و در نهایت به اون کلاس استایل clearfix : both رو میدهیم
استایل clearfix می تواند مقادیر اش را با مقدار float بگیرد یعنی اگر فلوت left بود مقدار left بگیرد و یا right مقدار right بگیرد
راه دوم استفاده از شبه عناصر before و after هستش اونم به این صورت که بعد از عنصری که خاصیت float و ایناها دارد بیایم و استایل زیر رو بهش بدهیم
.clearfixs::after{
content: '';
clear:both;
display:table;
}
نکته » اگر در هنگام استفاده اومدیم و دیدیم که یک فاصله به طور خودکار بین عناصر ما در شناور سازی کردن داد می توانیم از یک هک استفاده بکنیم و استایل linehight : 0px رو بهش بدهیم