您的位置：首页 > 其它

box-sizing的学习和认识

2016-03-22 13:54 330 查看

先上自己写的DEMO代码

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>box-sizing的学习</title>
</head>
<style>
.one {
width: 50px;
height: 50px;
background-color: blue;
}

.two {
width: 50px;
height: 50px;
background-color: red;
padding: 10px;
}

.three {
width: 50px;
height: 50px;
background-color: yellow;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>

<body>
<!--
作者：43352901@qq.com
时间：2016-03-22
描述：针对DIV 的 box-sizing的学习
结论：设置box-sizing时，使用的padding，不会增加DIV的整体宽高
-->

<div class="one">1
</div>
<div class="two">2
</div>
<div class="three">3
</div>
</body>

</html>

　　

结论：

设置box-sizing时，使用的padding，不会增加DIV的整体宽高

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航