Box Model 設計-盒子(二)

陳育霖

盒子寬度與高度 box-sizing
box-sizing: content-box|padding-box|border-box; 預設為content-box。

1. #div1 {
   
2.     width: 300px; height: 80px;
   
3.     border: 5px solid green;
   
4.     box-sizing: border-box;
   
5. }
   
6. #div2 {
   
7.     width: 300px; height: 80px;
   
8.     border: 5px solid green;
   
9.     box-sizing: padding-box;
   
10. }
    
11. #div3 {
    
12.     width: 300px; height: 80px;
    
13.     border: 5px solid green;
    
14.     box-sizing: content-box;
    
15. }

複製代碼

overflow 處理
overflow-x (overflow-y): visible 顯示超出的內容、hidden 不顯示也不提供捲軸、scroll 不顯示但可拉捲軸、auto 瀏覽器決定

1. #div1 {
   
2.     width: 200px; height: 100px; border: thin solid green;
   
3.     overflow-x: visible;
   
4. }
   
5. #div2 {
   
6.     width: 200px; height: 100px; border: thin solid green;
   
7.     overflow-x: hidden;
   
8. }
   
9. #div3 {
   
10.     width: 200px; height: 100px; border: thin solid green;
    
11.     overflow-x: scroll;
    
12. }

複製代碼