本帖最後由 陳育霖 於 2023-8-29 12:21 編輯
盒子寬度與高度 box-sizing
box-sizing: content-box|padding-box|border-box; 預設為content-box。- #div1 {
- width: 300px; height: 80px;
- border: 5px solid green;
- box-sizing: border-box;
- }
- #div2 {
- width: 300px; height: 80px;
- border: 5px solid green;
- box-sizing: padding-box;
- }
- #div3 {
- width: 300px; height: 80px;
- border: 5px solid green;
- box-sizing: content-box;
- }
複製代碼 overflow 處理
overflow-x (overflow-y): visible 顯示超出的內容、hidden 不顯示也不提供捲軸、scroll 不顯示但可拉捲軸、auto 瀏覽器決定- #div1 {
- width: 200px; height: 100px; border: thin solid green;
- overflow-x: visible;
- }
- #div2 {
- width: 200px; height: 100px; border: thin solid green;
- overflow-x: hidden;
- }
- #div3 {
- width: 200px; height: 100px; border: thin solid green;
- overflow-x: scroll;
- }
複製代碼 |