五、元素的显示模式 块元素、行内元素、行内块元素特点区别 常用标签
1.块元素/块级元素（block）
独占一行，从上到下排列；
默认宽度撑满父元素，默认高度由内容撑开；
可通过CSS设置宽高。
常见块元素：div、p、ul、li、table、h1-h6、form等
2.行内元素/内联元素（inline）
不独占一行，一行中不能容纳的会在下一行继续从左到右排列；
默认宽度、默认高度都由内容撑开；
不能通过CSS设置宽高（width 和 height）。（margin 和 padding 左右有效，上下无效）。
常见行内元素：span、a、i、label、strong、em等
3.行内块元素（inline-block）
除了可以通过CSS设置宽高外，其他和行内元素相同。
常见行内块元素：img、input、button、select等
4.如何把行内元素变为行内块元素或块元素？
设置元素display属性为 inline-block 或 block 。
5.空元素
上面的块元素、行内元素、行内块元素是从显示模式上区分的。
还有一种划分方式是从结构上看，即标签有没有闭合标签，能不能包裹内容。
例如<div></div>、<p></p>、<span></span>这一类标签有闭合标签，中间包裹内容，就不是空元素。
常见空元素：img、input、br、hr等。
六、display属性常用值
-
block：块元素；
-
inline：行内元素；
-
inline-block：行内块元素；
-
none：隐藏（下一题详细说明）；
-
flex：弹性盒布局，是现在最常用的布局方式。
七、display: none; 和 visibility: hidden; 的区别
两者都是 CSS 属性，用于控制元素的可见性。
1. display: none;
元素完全从文档流中移除，不仅不可见还不再占据空间；
页面布局会重新计算；
不参与任何交互；
子元素也全部消失。
2. visibility: hidden;
元素仍处于文档流中，不可见，但仍占据空间；
页面布局不会重新计算；
仍可交互只是不可见；
子元素会继承 visibility: hidden; ，若设置子元素 visibility: visible; 则子元素可以单独显示。
补充：这里可以搜一下文档流的概念，个人理解是文档流就像一群人在地上排队，有的人飘到天上就是脱离文档流，脱离之后排在后面的人就会往前挪补上这个人的位置。display: none；就相当于队伍里彻底没有这个人了，后面的人会补上，但 visibility: hidden; 只是让这个人隐身，实际上他还在，后面的人不能往前动。
写在后面：打算开一个八股系列，主要是想鼓励自己坚持学习。有错误的地方欢迎大家指出。