CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。
代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS3框大小</title>
<style type="text/css">
/*CSS3 box-sizing 属性在一个元素的 width
* 和 height 中包含 padding(内边距) 和 border(边框)。*/
* {
box-sizing: border-box;
}
.div1 {
width: 300px;
height: 100px;
border: 10px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 10px solid red;
box-sizing: border-box;
}
.div3 {
width: 300px;
height: 100px;
border: 10px solid green;
}
</style>
</head>
<body>
<div class="div1"></div><br>
<div class="div2"></div><br>
<div class="div3"></div><br>
</body>
</html>