css 宽度分离原则
我们想设计一个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/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/IwishIcould/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_201214043958支付宝收款码.jpg?a=1607924145179)
支付宝
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_20121604194271E6E296CCB71A007F4E22073D5EB64A.jpg)
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。