一、box-sizing属性
box-sizing属性的三个值:
content-box
,border-box
,inherit
- content-box
chrome浏览器默认的盒子属性值。
content-box的width和height从content算起,不包含border和padding。 - border-box
IE浏览器默认的盒子属性值。
border-box的width和height从border算起,包含border和padding - inherit
inherit 关键字指定一个属性应从父元素继承它的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="lanye" />
<meta name="description" content="HTML CSS JavaScript" />
<meta name="generator" content="" />
<meta name="keywords" content="HTML, CSS, JavaScript" />
<title>Document</title>
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->
<style>
/*content-box的width和height从content算起,不包含border和padding*/
.chrome {
width: 100px;
height: 100px;
background-color: green;
border: 5px solid black;
padding: 5px;
box-sizing: content-box;
}
/*border-box的width和height从border算起,包含border和padding*/
.ie {
border: 5px solid black;
box-sizing: border-box;
width: 100px;
height: 100px;
background-color: red;
padding: 5px;
position: relative;
bottom: 110px;
left: 10px;
}
</style>
</head>
<body>
<div class="chrome"></div>
<div class="ie"></div>
</body>
</html>
chrome显示如下:
IE显示如下:
二、 content-box和border-box的区别
- 当width和height属性设置为同一个值时,content-box的内容区域大小等于border-box整个盒子的大小。content-box额外多出来border和padding区域的大小。
- content-box的width,height与padding,border的大小无关。border-box的width,height与padding,border的大小有关。