CSS3「box-sizing: border-box; 」讓內距和邊框不改變元素的寬度與高度
2018/09/22
萌芽站長
3,295 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
jQuery.qrcode:純前端生成 QR Code
📆 2019-09-25
📁
網站技術, JavaScript, jQuery
Ionicons:精美開源圖標、Material & iOS 風格、可運用在網站上
📆 2019-01-18
📁
網站技術, HTML, CSS, JavaScript
GitHub Desktop:建立、上傳專案教學,公開自己的專案到 GitHub 吧!
📆 2019-04-04
📁
軟體介紹, 軟體應用, 網路應用, 網站技術
HTML <a> download 屬性讓連結可直接執行下載
📆 2021-10-22
📁
網站技術, HTML
jQuery「jquery.rss」將 RSS 轉成 HTML
📆 2017-07-14
📁
網站技術, jQuery, RSS
自動隱藏且可直接使用的網頁回頂部按鈕
📆 2021-11-30
📁
網站技術, HTML, CSS, JavaScript, jQuery
Free Online Image Map Generator:自動生成 HTML Image Map 影像地圖原始碼
📆 2018-10-25
📁
網路應用, 網站技術, HTML
Cloudflare SSL Test:測試網站 SSL 是否正確
📆 2019-02-28
📁
網路應用, 網站技術
留言區 / Comments
萌芽論壇