浏览器的盒子
聊到盒子模型，终于可以给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
上一篇： 前端怎么实现搜索内容关键字标红
下一篇： C语言每日练习之二叉堆