码迷,mamicode.com
首页 > 其他好文 > 详细

标准盒模型和怪异盒模型的差异

时间:2019-11-23 18:36:51      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:back   code   http   order   盒模型   margin   nbsp   round   add   

标准盒模型(W3C盒模型)

 为了做对比,我打算让两个盒子的css样式一样;

 .w3c{
            width: 100px;
            height: 100px;
            padding: 5px;
            margin: 5px;
            border: 5px solid black;
            background: lightcoral;
        }
    <div class="w3c">

    </div>

这是标准盒模型的代码

怪异盒模型(IE盒模型)

       .ie{
            width: 100px;
            height: 100px;
            padding: 5px;
            margin: 5px;
            border: 5px solid black;
            background: lightgreen;
            box-sizing: border-box;
        }
    <div class="ie">

    </div>

对比呈现与分析

标准盒模型

技术图片

怪异盒模型

 

技术图片

标准盒模型和怪异盒模型的差异

标签:back   code   http   order   盒模型   margin   nbsp   round   add   

原文地址:https://www.cnblogs.com/linxim/p/11918735.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!