標題:
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。
#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;
}
複製代碼
歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://istak.org.tw/seed/)
Powered by Discuz! 7.2