盒模型：正常盒子: content-box 和怪异盒子: border-box 特点

日晞

已于 2023-08-07 16:23:12 修改

阅读量183

点赞数

分类专栏：布局与事件 HTML-CSS 文章标签： css 前端 html5

于 2021-08-16 17:38:02 首次发布

本文链接：https://blog.csdn.net/weixin_44644385/article/details/119737757

版权

HTML-CSS 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

布局与事件

8 篇文章 0 订阅

订阅专栏

盒子从外到里的顺序是： margin, border,padding,content

正常盒子

设置（默认）：

box-sizing:content-box

特点:content == width(如下图)

怪异盒子

设置：

box-sizing:boder-box

特点:

padding + boder + content == width(如下图所示)

那想一想：这两张图片，哪个盒子大一些呢？

答案：正常盒子大一些，首先：这个大小是指boder:1px solid black 所展示的边框大小，所以就是看offsetwidth 大小，而正常盒子offsetwidth大一些。

上图的调试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        div {
            width: 100px;
            height: 100px;
            padding: 10px;
            border: solid 1px #aaa;
            margin: 10px;
            /* 这里决定是否是怪异盒子 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <!-- 盒子的offsetWidth是多少？ 122px -->
    <div></div>
    <script>
        console.log('怪异盒子的offsetWidth是'+document.querySelector('div').offsetWidth)
    </script>
</body>
</html>