當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

border-sizing属性详解和应用

發布時間：2023/12/2 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 border-sizing属性详解和应用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

box-sizing用于更改用于計算元素寬度和高度的默認的 CSS 盒子模型。它有content-box、border-box和inherit三種取值。inherit指的是從父元素繼承box-sizing表現形式，不再冗贅。

1. 屬性講解

content-box

默認值，也是css2.1中的盒子模型。在計算

width和 height時候，不計算 border、 padding和 margin。 高度、寬度都只是內容高度。

border-box

css3新增。 width和 height屬性包括內容，內邊距和邊框，但不包括外邊距。

計算公式：

width = width = border padding 內容寬度

height = border padding 內容高度

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属性详解和应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。