CSS3「box-sizing: border-box; 」讓內距和邊框不改變元素的寬度與高度
2018/09/22
萌芽站長
3,520 0
網站技術 , CSS
過去站長寫網頁版面時常常會遇到一個問題,那就是 CSS3 屬性 padding (內距) 和 border (邊框) 的大小會影響這個元素的大小,也就是其 width (寬度) 和 height (高度),造成同樣的寬高下,因為不同的內距與邊框造成兩個或多個元素大小完全不同,影響美觀,所以那時都是手動計算寬度應該要多少才能符合同樣大小的原則,相當麻煩!不過我們現在有了 CSS3 的「box-sizing: border-box;」,以上所敘述的問題馬上獲得解決。
CSS3「box-sizing: border-box; 」的主要功能是讓 padding (內距) 和 border (邊框) 不改變元素本身的 width (寬度) 和 height (高度),所以固定寬高下,不管內距和邊框大小怎麼設定,這些元素大小都是相同的。
以下提供範例網頁原始碼的截圖與預覽結果:
▲示範截圖。
▲示範結果。
這是我第一次使用「CodePen」展示自己寫的網頁原始碼,非常感謝朋友的推薦!😉
✎ 參考資料 · References
贊助廣告 ‧ Sponsor advertisements
Node.js:Gulp 運行 Autoprefixer,批次處理 CSS 供應商前綴問題
📆 2019-03-27
📁
網站技術, CSS, JavaScript, Node.js, Gulp
【網站設計】jQuery NailThumb 創立高解析縮圖
📆 2015-06-24
📁
網站技術, jQuery
【論壇美化】全局框線美化
📆 2013-01-01
📁
網站技術, 架站程式, Discuz!
Git 版本控制:將專案上傳至遠端存放庫(使用 VS Code、GitHub)
📆 2019-09-24
📁
軟體應用, 網站技術, 程式設計
HTML「合併儲存格」讓表格內的儲存格(<th>,<td>)合併
📆 2018-09-26
📁
網站技術, HTML
Pingendo:RWD 網頁設計軟體、模板網頁製作、拖拉設計網頁
📆 2018-09-29
📁
軟體介紹, 網站技術
【論壇經營】Discuz! X3.1變更界面風格預設字體
📆 2014-08-14
📁
網站技術, 架站程式, Discuz!
JavaScript & CSS 陀螺儀使圖片三維翻轉
📆 2020-03-12
📁
網站技術, HTML, CSS, JavaScript
留言區 / Comments
萌芽論壇