我们想设计一个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>