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