HTML5系列代码：盒⼦尺⼨的计算⽅法height 属性设置元素的⾼度。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>盒⼦尺⼨的计算⽅法</title>
<style type="text/css">
div {
margin:5px;
width:200px;/* 宽度200px */
height:80px;/* ⾼度80px */
background-color:#fe0;
border:10px solid #f90;/* 边框宽度为10px */
padding:10px;/* 内边距宽度为10px */
font-weight:bold;
font-size:18px;
line-height:40px;
}
/* 属性值border-box */
.s1 {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-
moz-box-sizing:border-box;
}
/* 属性值padding-box */
.s2 {
box-sizing:padding-box;
-webkit-box-sizing:padding-box;
-moz-box-sizing:padding-box;
}
/* 属性值content-box */
.s3 {
box-sizing:content-box;
-
webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
borderbox
}
</style>
</head>
<body>
<div class="s1">border-box</div>
<div class="s2">padding-box</div>
<div class="s3">content-box</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。