css盒子模型，注图，源码详解_盒模型源码-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37617413/article/details/105199004

什么是盒子模型

CSS 盒子模型（Box Modle）可以用来对元素进行布局，包括内边距（padding），边框（border），外边距（margin），和实际内容（content）这几个部分。

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像

盒子模型的类型以及区别

盒子模型分为两种第一种是W3c标准的盒子模型（标准盒模型）、第二种IE标准的盒子模型（怪异盒模型）

当前大部分的浏览器支持的是W3c的标准盒模型，也保留了对怪异盒模型的支持，当然IE浏览器沿用的是怪异盒模型。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。

区别在于IE盒模型border、padding都包含在width里面

标准盒子模型：content + border + padding + margin；
IE盒子模型：width(content+border+padding)+margin;

看下面这个例子：

显示效果：

在这里插入图片描述

附上源码，两种盒模型做了对比

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            font-size: 16px;
            color: #ffffff;
            text-align: center;
        }

        /* 显示盒模型   */
        /* 标准盒模型计算规则 
        元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；
        元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。
        元素的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + border的左右宽度；
        元素的总高度 = 元素（element）的height + padding的上下边距的值 ＋ border的上下宽度。
        */
        .box {
            /* 高度和宽度 */
            height: 200px;
            width: 200px;
            background-color: pink;
            /* 边框的宽度 */
            border: 10px solid blue;
            /* 内边距 */
            padding: 10px;
            /* 外边距*/
            margin: 100px;
        }

        /* 此处引入子div只是为了显示content的区域 */
        .child {
            height: 100%;
            width: 100%;
            background-color: crimson;
        }

        .ie_box {
            /* 高度和宽度 */
            height: 200px;
            width: 200px;
            background-color: pink;
            /* 边框的宽度 */
            border: 10px solid blue;
            /* 内边距 */
            padding: 10px;
            /* 外边距*/
            margin: 100px;
            /* 改为ie盒模型（怪异盒子模型） */
            box-sizing: border-box;
        }

        /* 此处引入子div只是为了显示content的区域 */
        .ie_child {
            height: 100%;
            width: 100%;
            background-color: crimson;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="child">
            我是标准盒模型啊<br><br>
            height: 200px;<br>
            width: 200px;<br>
            左右padding:10px，border:10px，实际宽度240px
        </div>
    </div>
    <div class="ie_box">
        <div class="ie_child">
            我是IE盒模型啊<br><br>
            height: 200px;<br>
            width: 200px;<br>
            左右padding:10px，border:10px，实际宽度200px
        </div>
    </div>
</body>

</html>

盒模型的选择

如果是定义了完整的doctype的标准文档类型，无论是哪种模型情况，最终都会触发标准模式，

如果doctype协议缺失，会由浏览器自己界定，在IE浏览器中IE9以下（IE6.IE7.IE8）的版本触发怪异模式，其他浏览器中会默认为W3c标准模式。
css可以通过设置box-sizing来改变
box-sizing:border-box; IE盒模型
box-sizing:content-box;标准盒模型

这个在float的时候经常这样设置，防止因边框和padding加入引起的宽度撑大等问题

如有问题请联系我~

欢迎加入QQ群:
在这里插入图片描述