響應式網頁前端整合設計講義 TS-RWD-handout

1-12. CSS 範例再練習 (依需求挑選學習)

CSS3 區塊大小模式

版本	屬性	說明
3	box-sizing	設定區塊大小的模式。參考【英文版】【英文版】【簡中版】【簡中版】 box-sizing: content-box; 這是傳統預設的區塊大小模式 box-sizing: border-box; 這是新的區塊大小模式

範例已設定好的部份

<div id="b1"> <div id="b2"> 區塊大小 </div> </div>

<style>
#b1 { margin: 10px; border: 2px solid #666; padding: 20px; font-size: 30px; }
#b2 { width: 250px; height: 250px; background-color: lightsteelblue; }
</style>

測試區塊大小模式的設定

#b2 { 不加 border,不加 padding }

#b2 { border: 20px solid blue; } /* 傳統預設的區塊大小, 往外加 border 邊框 */

#b2 { border: 20px solid blue; padding: 40px; } /* 傳統預設的區塊大小, 往外加 border 及 padding */

#b2 { border: 20px solid blue; box-sizing: border-box; }
/* 新的區塊大小模式, 往內加 border 邊框 */

#b2 { border: 20px solid blue; padding: 40px; box-sizing: border-box; }
/* 新的區塊大小模式, 往內加 border 及 padding */

區塊大小