首頁 >web前端 >css教學 >css中border-sizing屬性的用法

css中border-sizing屬性的用法

不言
不言原創
2018-07-28 09:59:482427瀏覽

這篇文章介紹給大家的文章內容是關於css中border-sizing屬性的用法,有很好的參考價值,希望可以幫助到有需要的朋友。

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

## 1. 屬性解說

#content-box
預設值,也是css2.1中的盒子模型。在計算widthheight時候,不計算borderpaddingmargin高度、寬度都只是內容高度


#border-boxcss3新增。 width

height

屬性包括內容,內邊距和邊框,但不包括外邊距。

計算公式:
  1. width = width = border padding 內容寬度
  2. height = border padding 內容高度

## 2. 考慮盒子模型的
margin從上面可以知道,即時是border-box也是不計算margin,只是多餘計算了border#和padding因為borderpadding都是盒子模型的一部分,但是margin標記的是盒子和盒子的間距。所以,

border-box

的解釋很符合常理。

問題來了,如果有時候一定要設定margin,怎麼做到自由控制來保證相容?例如,我們下面要設定一個撐滿頁面的盒子元素,而且有外邊距幹擾,怎麼做?
css中border-sizing屬性的用法實作如下效果圖:

程式碼:

原始碼下載

<!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>
  <p id="app">
  </p>
</body>
</html>
所以,當需要計算外邊距(margin),可以配合css3中的四則運算(calc

)來使用

## 3. 使用建議

根據專案中的使用經驗和w3c的建議,建議將box-sizing屬性設定為border-box。

* {
  margin: 0;
  padding: 0;
}
p {
  box-sizing: border-box;
}

相關建議:

如何用純CSS實作動態行駛的火車

css選擇符號有哪些? css選擇符的全面總結(附程式碼)#######

以上是css中border-sizing屬性的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn