Board logo

標題: Box Model 設計-盒子(二) [打印本頁]

作者: 陳育霖    時間: 2023-8-29 12:14     標題: Box Model 設計-盒子(二)

本帖最後由 陳育霖 於 2023-8-29 12:21 編輯

盒子寬度與高度 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. }
複製代碼





歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://istak.org.tw/seed/) Powered by Discuz! 7.2