zoukankan      html  css  js  c++  java
  • css 宽度分离原则

    
     我们想设计一个w=180px;h=100px的div;
    
     .demo1 {
         180px;
        height: 100px;
        background: pink;
        padding: 10px;
        border: 1px solid #c1c1cc;
        margin: 5px;
    }
    <div class="demo1">
        我是div
    </div>
    
    但是现在变成了 202*122的div元素;
    这并不是我们的初衷
    
    如何解决
    有两种方式:
    (1) 使用怪异盒子
     .demo1 {
         180px;
        height: 100px;
        background: pink;
        padding: 10px;
        border: 1px solid #c1c1cc;
        margin: 5px;
        box-sizing: border-box;//添加这一句变成怪异盒子
    }
    这样在项目中的实际运用场景:小程序中很多使用需要使用怪异盒子;
    
    (2)使用宽度分离原则
     .demo1 {
             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/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    C#的日期格式化输出
    c#使用wmi
    dll注入
    VBScript函数
    时间间隔取法
    抗衰老药物中国传统的食品
    Net资源泄露
    c# 内存共享、内存映射文件
    使用VS2005的 ClickOnce 技术实现按需下载组件
    .NET验证码页出错
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/13939071.html
Copyright © 2011-2022 走看看