box-sizing:
作用：
设置盒子尺寸的定义标准，可以以内容区为准，也可以以border为准
说明：
可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中
常用值：
(content-box)：元素指定的width和height是以内容区域为基准，当加入内边距和边框时会将元素撑大 （传统盒子）
(border-box)：元素指定的width和height是以边框为基准，当加入内边距和边框时元素大小将不发生改变 （新盒子）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3之user-interface属性</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
margin: 20px auto;
padding: 10px;
border: 5px solid red;
}
div.old {
/* 以内容为基准的盒子模式（传统模式） */
box-sizing: content-box;
-webkit-box-sizing: content-box;
background-color: lightpink;
}
div.new {
/* 以边框为基准的盒子模式（新模式） */
box-sizing: border-box;
-webkit-box-sizing: border-box;
background-color: deepskyblue;
}
</style>
</head>
<body>
<div class="old"></div>
<hr>
<div class="new"></div>
</body>
</html>
93
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
