web前端入門到實戰：CSS box-sizing屬性的正確用法

時間 2019-12-20

標籤 web 前端入門實戰 css box sizing 屬性正確用法欄目 HTML 简体版

原文原文鏈接

CSS自定義屬性（變量）

CSS box-sizing屬性容許咱們在元素的總寬度和高度中包含填充和邊框。html

沒有CSS box-sizing屬性

默認狀況下，元素的寬度和高度計算以下： width + padding + border =元素的實際寬度 height + padding + border =元素的實際高度這意味着：當您設置元素的寬度/高度時，元素一般看起來比您設置的大（由於元素的邊框和填充被添加到元素的指定寬度/高度）。下圖顯示了兩個具備相同指定寬度和高度的<div>元素：前端

學習Q-q-u-n： 784783012 ，分享學習的方法和須要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ccs</title>
    <style>
        .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
        }

        .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<div class="div1">這個div更小(寬度爲300px，高度爲100px)。</div>
<br>
<div class="div2">這個div更大(寬度也是300px，高度也是100px)。</div>

</body>
</html>

box-sizing屬性解決了這個問題。web

使用CSS box-sizing屬性

box-sizing屬性容許咱們在元素的總寬度和高度中包含填充和邊框。若是box-sizing: border-box;在元素填充上設置而且邊框包含在寬度和高度中：瀏覽器

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

因爲使用它的結果box-sizing: border-box;很是好，許多開發人員但願他們頁面上的全部元素都以這種方式工做。下面的代碼確保以更直觀的方式調整全部元素的大小。許多瀏覽器已經box-sizing: border-box;用於許多表單元素（但不是所有 - 這就是輸入和文本區域在寬度上看起來不一樣的緣由：100％;）。將其應用於全部元素是安全和明智的：安全