当前位置： 移动技术网 > IT编程>脚本编程>Python > 浏览器的盒子

浏览器的盒子

2020年07月17日  | 移动技术网IT编程  | 我要评论

两种盒子模型


聊到盒子模型，终于可以给IE点个赞了。IE的怪异盒子模型给网页布局节省了很大的力气，个人觉得是一个很好的东西。
那么现在我们来详细了解一下：

IE怪异盒子

当你给盒子设置 box-sizing: border-box;后，它就变成IE怪异盒子了
关于IE的怪异盒子，有一个错误的说法是：
盒子的宽度 = width；盒子的高度 = height；

在现在的谷歌浏览器中

当你设置的宽度 > (左右)padding + (左右)border，高度 > (上下)padding + (上下)border时：
盒子的内容宽度 = 你设置的width；盒子的内容高度 = 你设置的height；

<style>
        div{
            box-sizing: border-box;
            width: 300px;
            height: 300px;
            padding: 100px;
            margin: 100px;
            background-color: #333;
        }
    </style>
</head>
<body>
    <div></div>
</body>

如图：
在这里插入图片描述
再让我们看一个小于的情况：

<style>
        div{
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            padding: 100px;
            margin: 100px;
            border: 10px solid #f00;
            background-color: #333;
        }
    </style>
</head>
<body>
    <div></div>
</body>

它的效果就是：
在这里插入图片描述

当你设置的宽度 < (左右)padding + (左右)border时：
盒子的内容宽度 = (左右)padding + (左右)border+ 0；
盒子的内容高度 = (上下)padding + (上下)border+ 0；

那么又一个疑惑来了

width < (左右)padding + (左右)border时，它的内容怎么办

内容为文字

这种情况会出现文字不换行的溢出
在这里插入图片描述
假如你在文字中出现了 “-” 符号，你就会发现一个有意思的现象
在这里插入图片描述

内容为盒子

同样，盒子也会溢出，它和文字一样，以内容部分为左上角溢出
在这里插入图片描述

普通盒子模型

默认的盒子模型就是box-sizing: content-box;也就是普通盒子模型。
普通盒子模型的计算方式：
盒子的总宽度 = width + (左右)margin + (左右)border + (左右)padding；
盒子的总高度 = height + (上下)margin+ (上下)border + (上下)padding；
盒子的内容宽度 = width + (左右)border + (左右)padding；
盒子的内容高度 = height + (上下)border + (上下)padding；

如图：
在这里插入图片描述

本文地址：https://blog.csdn.net/ttttqqqqq/article/details/107311292

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网