简单记记display中inline、block、inline-block以及常见行内/块内元素

display常用属性值

none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline：内联元素

inline-block：内联块级元素

block：块元素

flex：弹性盒

display:none与visibility:hidden的区别

浏览器渲染的时候会涉及到重绘与回流的问题，前者隐藏后脱离文档流，不占据页面空间引发回流。后者隐藏后还占用空间，只引起重绘。因此优化的时候会有那么一条：建议用visibility:hidden替换display:none

另外，vue中的v-show指令，切换的就是元素的display样式

inline特点

1. 内联元素会在一条直线上排列，在同一行从左至右水平排列。直到一行排不下，才会换行。

2. 内联元素设置宽、高、margin和padding的上下无效（竖直无效）。

3. 内联元素设置line-height，margin左右和padding的左右有效（水平有效）。

4. 内联元素的宽高随标签里的内容而变化。

block 特点

1. 独占一行，多个block元素另起一行，默认情况下，block元素宽度自动填满其父元素宽度

2. block元素可以设置width,height属性。块元素即使设置了宽度,仍然是独占一行。

3. block元素可以设置margin和padding属性。

inline-block 特点

让block元素不再独占一行，多个block元素可以同排一行，且元素具有block的属性，可设置宽高

常见块内元素

---

常见行内元素




行内块级元素

、、