December 19, 2017
box-sizing 似乎很不錯。但是做比較複雜的CSS設計時，有優點有缺點。
優點：可以快速地讓母容器縮小至所設定的大小。
缺點：但是內部尺寸卻不是很好計算。包括其內的子容器大小如果有其他設定，img, span, a, 等改變diaplay屬性後還是要經過計算
▼box-sizing 將內容縮小至容器寬度（似乎高度沒有縮小）
▼CSS部分
▼HTML部分
優點：可以快速地讓母容器縮小至所設定的大小。
缺點：但是內部尺寸卻不是很好計算。包括其內的子容器大小如果有其他設定，img, span, a, 等改變diaplay屬性後還是要經過計算
▼box-sizing 將內容縮小至容器寬度（似乎高度沒有縮小）
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
▼CSS部分
<style type="text/css">
div{margin: 20px auto 0 auto; text-align: center; padding: 40px;}
.boxNormal{
width: 350px;
height: auto;
border: #999999 solid 3px;
}
.boxSample{
width: 350px;
height: auto;
border: #000000 solid 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
div{margin: 20px auto 0 auto; text-align: center; padding: 40px;}
.boxNormal{
width: 350px;
height: auto;
border: #999999 solid 3px;
}
.boxSample{
width: 350px;
height: auto;
border: #000000 solid 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
▼HTML部分
<body>
<div class="boxNormal">width: 300px; height: 100px;<br>padding: 50px;
</div>
<div class="boxSample">width: 300px; height: 100px;<br>
padding: 50px;</div>
</body>
<div class="boxNormal">width: 300px; height: 100px;<br>padding: 50px;
</div>
<div class="boxSample">width: 300px; height: 100px;<br>
padding: 50px;</div>
</body>
手機版 nav line-hei
CSS3 動畫用設定 anima
0 Comment(s)
