H5C3练习总结12.16 （小米商城右侧悬浮菜单）--怪异盒子，calc()

（一）遇到的问题

这个代码自己又写了一遍，最后又发现一个知识漏洞，最后一个点琢磨琢磨

 看上面手机APP那个盒子和旁边的放图片的盒子都是设置的width:100px;但是效果很明显旁边的盒子更大，因为我设置了padding:15px;所以更大

我开始还在想盒子被撑开了？当我调小图片的尺寸能够多余30px的时候还是总体盒子不变

所以！一直有一个误区！我们设置的width只是内容的宽度，padding,margin,border本来就要加在总体盒子大小中

（二）知识点

盒子总宽度 = width + padding + border 

盒子总高度 = height + padding + border 

也就是，width/height 只是内容高度，不包含 padding和 border值

（三）怪异盒子

怪异盒子是指在CSS中，元素的盒模型表现与标准盒模型不同的情况。在标准盒模型中，元素的宽度和高度只包括内容区域，而在怪异盒子模型中，元素的宽度和高度还包括了边框和内边距。

怪异盒子模型可以通过设置CSS属性box-sizing来实现。具体来说，box-sizing: content-box可以将怪异盒子变为标准盒子，而box-sizing: border-box可以将标准盒子变为怪异盒子。

在移动端开发中，由于屏幕空间有限，怪异盒子模型更常用，因为它可以更好地控制元素的尺寸和布局。

以下是一个示例，演示了怪异盒子的使用：

<style>
    .box {
        width: 200px;
        height: 100px;
        padding: 10px;
        border: 1px solid black;
        box-sizing: border-box; /* 将标准盒子变为怪异盒子 */
    }
</style>

<div class="box">
    这是一个怪异盒子
</div>

在上面的示例中，通过设置box-sizing: border-box，元素的宽度和高度包括了边框和内边距，而不会撑开元素的尺寸。

box-sizing属性的三个值：
content-box，border-box，inherit

• content-box

chrome浏览器默认的盒子属性值。
content-box的width和height从content算起，不包含border和padding。

• border-box

IE浏览器默认的盒子属性值。
border-box的width和height从border算起,包含border和padding

• inherit

inherit 关键字指定一个属性应从父元素继承它的值。
 

 （四）calc()函数

用于计算麻烦的宽度，交给浏览器

calc()函数支持 “+”, “-”, “*”, “/” 运算，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。

运算符前后都需要保留一个空格！！！！！

注意：

1. 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
2. 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

语法：calc(expression) 

（五）em与rem单位值

em和rem都是CSS中的长度单位，用于设置元素的尺寸大小。

其中，em是相对长度单位，它的值相对于父元素的字体大小而定，如果没有设置字体大小，则相对于浏览器默认字体大小。

而rem是相对于根元素（即html元素）的字体大小而定，因此rem更为稳定。一般来说，使用rem作为单位可以更好地实现响应式布局。

举个例子：如果父元素的字体大小为16px，那么1em就等于16px，2em就等于32px。如果根元素的字体大小为16px，那么1rem就等于16px，2rem就等于32px。

懂！今天的内容写完了晚安。