border-sizing属性详解和应用
生活随笔
收集整理的這篇文章主要介紹了
border-sizing属性详解和应用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
box-sizing用于更改用于計算元素寬度和高度的默認的 CSS 盒子模型。它有content-box、border-box和inherit三種取值。inherit指的是從父元素繼承box-sizing表現形式，不再冗贅。
width = width = border padding 內容寬度 height = border padding 內容高度
1. 屬性講解
content-box
默認值，也是css2.1中的盒子模型。在計算
width和 height時候，不計算 border、 padding和 margin。 高度、寬度都只是內容高度。border-box
css3新增。 width和 height屬性包括內容，內邊距和邊框，但不包括外邊距。計算公式：
2. 考慮盒子模型的margin
從上面可以知道，即時是
border-box也是不計算 margin，只是多余計算了 border和 padding。 因為border和padding都是盒子模型的一部分，但是margin標記的是盒子和盒子的間距。所以， border-box的解釋很符合常理。問題來了，如果有時候一定要設置
margin，怎么做到自由控制來保證兼容？例如，我們下面要設置一個撐滿頁面的盒子元素，而且有外邊距干擾，怎么做？實現如下效果圖：
代碼：源碼下載
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>yuanxin.me</title><style type="text/css">*{margin: 0;padding: 0;}#app {box-sizing: border-box; /* 指定計算方式 */margin: 10px; /* 外邊距干擾 *//* 利用 css3 的 calc */width: calc(100vw - 2*10px);height: calc(100vh - 2*10px);}</style> </head> <body><div id="app"></div> </body> </html>所以，當需要計算外邊距(margin)，可以配合css3中的四則運算（
calc ）來使用。3. 使用建議
根據項目中的使用經驗和w3c的建議，推薦將
box-sizing屬性設置為border-box。 * {margin: 0;padding: 0; } div {box-sizing: border-box; }4. 關于
歡迎技術交流，引用請注明出處。
個人網站：godbmw.com
原文鏈接：border-sizing屬性詳解和應用
本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=0a0b1jb&title=border-sizing屬性詳解和應用
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的border-sizing属性详解和应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html 01前沿-web介绍
- 下一篇： td过长，将固定宽度table撑开