重温css盒模型以及如何让盒子隐藏的常见方式

「这是我参与11月更文挑战的第26天，活动详情查看：2021最后一次更文挑战」

盒子模型是前端的基础知识，也经常被提起，今天我们来重新聊聊CSS盒模型，以及聊聊如何让一个元素隐藏起来的几种方式。

css盒模型

CSS盒子本质就是用于装页面上元素的矩形区域；CSS中的盒子模型有两种，包括 IE盒模型和 W3C标准盒模型

两种盒模型最主要的区别就是width 的包含范围，在标准模型中，width 指 content部分的宽度，在IE盒模型中，width 表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：

• 标准盒模型的盒子宽度：左右border+左右 padding+width
• IE盒模型的盒子宽度：width

在 CSS3中引入了box-sizing属性，box-sizing:content-box表示标准盒模型；box-sizing:border-box表示的是 IE盒模型；而box-sizing:padding-box这个属性值的宽度包含了左右padding+width

元素隐藏

让一个盒子隐藏起来的常见的几种方式有：visibility=hidden和opacity=0以及display:none

虽然他们都可以把元素隐藏起来，但是他们之间有说差别，例如：有些会影响页面布局，有些不会。

下面具体来说说

1. opacity=0 表示该元素隐藏起来了，但不会改变页面布局，而且如果该元素已经绑定一些事件，如 click 事件，那么点击该区域，也能触发点击事件。本质上它就是让你肉眼看不见而已，它还是在那里的

2. visibility=hidden 也表示该元素隐藏起来了，也不会改变页面布局，但是它不会触发该元素已经绑定的事件

3. display=none 把元素隐藏起来，会改变页面布局，可以理解成在页面中把该元素删除掉一样

以上就是盒模型的内容，欢迎点赞、关注和评论，感谢你的阅读！！！