我们想设计一个w=180px;h=100px的div;
.demo1 {
width: 180px;
height: 100px;
background: pink;
padding: 10px;
border: 1px solid #c1c1cc;
margin: 5px;
}
<div class="demo1">
我是div
</div>
但是现在变成了 202*122的div元素;
这并不是我们的初衷
如何解决
有两种方式:
(1) 使用怪异盒子
.demo1 {
width: 180px;
height: 100px;
background: pink;
padding: 10px;
border: 1px solid #c1c1cc;
margin: 5px;
box-sizing: border-box;//添加这一句变成怪异盒子
}
这样在项目中的实际运用场景:小程序中很多使用需要使用怪异盒子;
(2)使用宽度分离原则
.demo1 {
width: 180px;
height: 100px;
background: pink;
margin: 5px;
}
.son {
padding: 10px;
border: 1px solid #c1c1cc;
/* 如果父级元素的宽度固定是100px
子元素的width默认值是auto; ( widh:auto )
就会如同流水一般,自动填满整个父级元素
*/
}
<div class="demo1">
<div class="son">
我是div
</div>
</div>
原文地址:https://www.cnblogs.com/IwishIcould
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。