前端知识点display
分类
| 属性 | 说明 | 注意点 |
|---|---|---|
| inline | 行内元素 | - |
| inline-block | 行内块元素 | 左右会产生外边距，不同浏览器宽度不定 |
| block | 块元素 | - |
| none | 隐藏元素 | 实际元素还在，只是不显示，vue 的 v-show 实现方式 |
| flex | 弹性布局 | 查看 flex 介绍 |
| grid | 网格布局 | 查看 grid 介绍 |
| table | 表格布局 | 当前已不常用 |
| flow-root | 块元素 | 创建 BFC，可清除浮动，去除 margin 合并等 |
二值语法
display 支持二值写法，如下：
CSS
display: inline flow;
display: block flow;
display: inline flow-root;
display: block flow-root;
display: inline flex;
display: block flex;
display: inline grid;
display: block grid;display: inline flow;
display: block flow;
display: inline flow-root;
display: block flow-root;
display: inline flex;
display: block flex;
display: inline grid;
display: block grid;问题
1. display: inline-block 会产生什么问题？
会产生左右边距，产生原因类似 img 等标签，不同浏览器间边距不固定，无法通过 margin: 0 消除； 可以给其父元素设置 font-size: 0 消除，子元素都需要设置字体大小，不注意容易发现文字不显示，造成问题排查困难。
2. display: none 与 visibility: hidden 区别?
display: none- 会将元素从文档树中移除；
- 会触发回流与重绘；
- 其子元素全部隐藏；
visibility: hidden- 仍占据文档流中位置，但浏览器不会绘制该元素；
- 会触发重绘；
- 其子元素如果设置
visibility: visible，该子元素会显示； - 绑定的事件不会触发，如点击事件
Css3 的 transition 支持 visibility 属性，不支持 display。