box-sizing

作者: 张鸽 | 来源:发表于2018-04-22 13:05 被阅读0次

css属性总结
IE盒子模型和标准盒子模型
DAY04
30秒学懂 css(一)
day1
day04
CSS知识
box-sizing属性(CSS3新增属性)
面试总结css
盒模型+实现各种形状

box-sizing是CSS3的box属性之一，遵循css的盒模型(Box model)原理
css的盒模型(Box model)分为两种，第一种是W3C的标准模型，另一种是IE的传统模型
他们都是对元素计算尺寸的模型，但是计算的方式不同

W3C的标准模型：

/*content height表示元素内容高度
* content width表示元素内容宽度
*/
  /*元素空间尺寸*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  /*元素大小*/
  Element Height = content height + padding + border 
  Element Width = content width + padding + border

IE的传统模型

/*content height包含了元素内容高度，内距宽度，边框宽度
* content width包含了元素内容宽度，内距宽度，边框宽度
*/
/*元素空间尺寸*/
Element空间高度 = content height + margin
Element空间宽度 = content width + margin
/*元素大小*/
Element Height = content height
Element width = content width

box-sizing

语法：content-box | border-box | inherit

取值说明

1、content-box:此值为其默认值，即让元素维持W3C的标准盒模型，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height）

2、border-box:此值让元素维持IE传统的盒模型（IE6以下版本），也就是说元素的宽度/高度（width/height）等于元素内容的宽度/高度（content width/height）。

3、inherit: 此值让元素继承父类的box-sizing属性值

浏览器的兼容情况：
Chrome/Opera/IE（IE8版本以上）支持 box-sizing
FireFox 支持 -moz-box-sizing
Safari 支持 -webkit-box-sizing

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box img{
            width: 140px;
            height: 140px;
            padding: 10px;
            border: 20px solid orange;
            margin: 5px;
        }
        #content-box img{
            box-sizing: content-box;
        }
        #border-box img{
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="box" id="content-box">
    <img src="view.jpg"/></div>
<div class="box" id="border-box">
    <img src="view.jpg"/></div>
</body>
</html>

结果图：