新盒模型 box-sizing:border-box

box-sizing

CSS3中可以通過box-sizing來指定盒模型，可指定為content-box(預設值，标準盒子模型)、border-box(包括寬高内容内邊距邊框，但不包括外邊距)、 ，依此來改變計算盒子的方式。

1.屬性值

• content-box

  預設值，标準盒子模型。隻包括内容和寬高，不包括邊框(border)、内邊距(padding)、外邊距(margin)。

  尺寸計算公式：width=内容的度，height=内容高度。都不包括内容的邊框(border)和内外邊距(padding、margin);

  效果圖

  

  css代碼

*{margin:0;padding:0;}
        ul{
            width:500px;height:400px;background: pink;border: 1px solid #000;list-style: none;margin:30px auto;
        }
        li{box-sizing: content-box;
            width: 25%;height:50%;background:#666;float: left;text-align: center;
            border:20px solid red;
        }
           

html代碼

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
           

w3c釋義(https://www.w3school.com.cn/cssref/pr_box-sizing.asp )

• border-box(适合響應式中使用)

  width和height包括内容，内邊距(padding)、邊框(border), 但不包括外面據(margin)。 注：填充和邊框将在盒子内 *例如：.box(width:300px;border:20px solid pink;)，在浏覽器中呈現的寬度為300px的盒子。内容框不能為負 是以内容寬高會被壓縮 *

  效果圖

  

  css代碼

*{margin:0;padding:0;}
        ul{
            width:500px;height:400px;background: pink;border: 1px solid #000;list-style: none;margin:30px auto;
        }
        li{box-sizing: border-box;
            width: 25%;height:50%;background:#666;float: left;text-align: center;
            border:20px solid red;
        }
           

html代碼

<ul>
   <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
           

W3C釋義(https://www.w3school.com.cn/cssref/pr_box-sizing.asp )

• inherit

  繼承 父元素 box-sizing屬性的值

2.box-sizing相容寫法

box-sizing現代浏覽器都支援，IE家族隻有IE8版本以上才支援

Mozilla需要加上-moz-

Webkit核心需要加上-webkit-

Presto核心-o-

IE -ms-，box-sizing相容浏覽器時需要加上各自的字首

3.總結

content-box：CSS定義的寬高隻包含content的寬高

border-box：CSS定義的寬高包括了content，padding和border