<![CDATA[A.PAO designSTUDIO BLOG]]> https://blog.apao.idv.tw/index.php zh-tw https://blog.apao.idv.tw/post// <![CDATA[box-sizing 容器寬度的應用]]> apao <apao@www.apao.idv.tw> Tue, 19 Dec 2017 01:37:12 +0000 https://blog.apao.idv.tw/post// box-sizing 似乎很不錯。但是做比較複雜的CSS設計時，有優點有缺點。
優點：可以快速地讓母容器縮小至所設定的大小。
缺點：但是內部尺寸卻不是很好計算。包括其內的子容器大小如果有其他設定，img, span, a, 等改變diaplay屬性後還是要經過計算

點擊在新視窗中瀏覽此圖片

▼box-sizing 將內容縮小至容器寬度（似乎高度沒有縮小）
-webkit-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>

▼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>

Tags - , , ]]> https://blog.apao.idv.tw/post//#blogcomment <![CDATA[[評論] box-sizing 容器寬度的應用]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 https://blog.apao.idv.tw/post//#blogcomment