CSS3:box-sizing 怪异盒模型

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <link rel="stylesheet" href="style/box.css">
</head>
<body>


标准盒模型
<hr />
    <div class="bag">
        <div class="shoes_box">
            <div class="shoes">
        鞋子
    </div>
    </div>
    </div>
    
怪异盒模型
<hr />
    <div class="bag1">
        <div class="shoes_box1">
            <div class="shoes1">
        鞋子
    </div>
    </div>
    </div>

</body>
</html>
复制代码
复制代码
/*盒子模型*/
.shoes{
    width: 100px;
    height: 100px;
    background: #F69A0B;
    text-align: center;line-height: 100px;
    color: #fff;
}

.shoes_box{
    padding: 10px;
    width: 100px;
    height: 100px;
    background: #FE6403;
    border: 5px solid #02C3F5;
}
.bag{
    width: 130px;
    height: 130px;
    margin:100px;
}


/*怪异盒模型*/
.shoes1{
    width: 100px;
    height: 100px;
    background: #F69A0B;
    text-align: center;line-height: 100px;
    color: #fff;
}

.shoes_box1{
    padding: 10px;
    width: 130px;
    height: 130px;
    background: #FE6403;
    border: 5px solid #02C3F5;
    box-sizing:border-box;
}
.bag1{
    width: 130px;
    height: 130px;
    margin:100px;
}
复制代码

 

posted @   tinyphp  Views(527)  Comments(0Edit  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 上周热点回顾(1.20-1.26)
点击右上角即可分享
微信分享提示

喜欢请打赏

扫描二维码打赏

了解更多