怪异盒模型和标准盒模型

最新推荐文章于 2023-07-21 16:19:37 发布

where_slr

最新推荐文章于 2023-07-21 16:19:37 发布

阅读量1.3k

点赞数 1

分类专栏： css html

本文链接：https://blog.csdn.net/where_slr/article/details/74936646

版权

css 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

对怪异盒模型的介绍

怪异模式主要表现在IE内核的浏览器。

当不对doctype进行定义时，会触发怪异模式。
在标准模式下(box-sizing:content-box;)，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

在怪异模式下(box-sizing:border-box;)，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>怪异盒模型</title>
        <style type="text/css">
            *{
                margin:0;
                padding: 0;
            }
            #test1{
                box-sizing:border-box;
                /*怪异盒模型 
                    width（100px）=内容宽度+padding+border
                    实际容器所占区域宽度 = width（100px）+ margin
                */
                width: 100px;
                height:100px;
                margin: 10px;

                background-color: red;
            }
            #test2{
                box-sizing:content-box;
                /*标准盒模型 
                    width（100px） = 内容宽度
                    实际容器所占区域宽度 = width（100px）+ margin + padding + border
                */
                width: 100px;
                height:100px;
                margin: 10px;
                padding: 10px;
                border: 10px solid black;
                background-color: red;
            }
        </style>
        <script type="text/javascript"> 
        window.onload = function(){
            var test1 = document.getElementById("test1");
            console.log(test1.offsetWidth);
            var test2 = document.getElementById("test2");
            console.log(test2.offsetWidth);
        }                   
        </script>

    </head>
    <body>
        <div id="test1">怪异盒模型</div>
        <div id="test2">标准盒模型</div>
    </body>
</html>