新盒模型 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