با سلام لظفا یک توضیحی در مورد box-sixing و over flow و prespective بدید ممنون میشم.
خصوصیت box_sizing می توانید عناصر را در یک ناحیه fit کند. با استفاده از خصوصیت های Width و Height تنها اندازه محتوا (Content) تعیین می شود و برای محاسبه اندازه واقعی Box، اندازه (Padding و Border و Margin) نیز باید به این اندازه اضافه شوند.
برای مثال، اگر بخواهید دو box که دارای حاشیه هستند کنار هم قرار گیرند، می توانید خاصیت box-sizing را "border-box" تنظیم کنید. این کار مرورگر را وادار می کند، تا box را با طول مشخص شده نمایش دهد و border , padding را داخل box قرار می دهد (box-sizing روی margin تاثیری ندارد).
برای نمایش دادن scroll bar و یا مخفی کردن آن از این صفت استفاده میکنیم. در واقع زمانی که محتویات داخل یک box با سایز مشخص بیشتر میشود ، ما با تعیین مخفی بودن یا نمایش دادن scrollbar برای box مشخص میکنیم که ادامه محتویات را نمایش بدهد یا خیر.
یکی از صفت های جدید CSS3 می باشد که یک عنصر سه بعدی در چند پیکسلی دید کاربر قرار میگیرد. این خصوصیت به شما اجازه می دهد تا دور نمای عناصر سه بعدی را تغییر دهید تا نمای آنها تغییر یابند. مثال زیر گویای این موضوع است :
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150px;
-webkit-perspective:150px; /* Safari and Chrome */
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">HELLO</div>
</div>
</body>
</html>
هیچ کاربری تا کنون از این پست تشکر نکرده است
با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)