显示模式
在 CSS 中，显示模式用于定义 HTML 元素的显示方式。通过显示模式，我们可以控制元素是以何种方式进行布局和显示。
笔记内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示模式</title>
<style>
span{
/*
显示模式：
none：不显示且不占位置
inline：按行内元素显示
block：按块元素显示
inline-block：按行内块元素显示，会显示在一行，但是显示在一行内的元素之间会有间隔
注：一个内联元素设置为 display:block 后，不能有内部的嵌套块元素
*/
display: block;
/* 下面一组可一起设置，详见：https://www.cnblogs.com/Webzhoushifa/p/9510856.html */
display:flex; /* 设置元素弹性浮动，一般设置在父元素上，默认里面的盒子水平分布 */
flex:1; /* 设置父盒子中每个子元素占用的份数 */
flex-direction:column; /* 弹性浮动的元素竖直排列，默认 row 水平排列；row-reverse：表示将子元素逆序的水平排列 */
justify-content:center; /* 弹性浮动的元素在排列轴上的中间 */
align-items:center; /* 弹性浮动的元素在交叉轴上中间对齐 */
/* 控制元素隐藏或显示 */
visibility: visible; /* visible(显示)/hidden(隐藏，但仍占据原位置) */
overflow: visible; /* 默认值。超出父元素内容不会被修剪，会呈现在元素框之外。*/
overflow: hidden; /* 超出父元素内容会被隐藏 */
overflow: scroll; /* 超出父元素内容浏览器会显示滚动条，以便查看 */
overflow: auto; /* 如果内容超出，则浏览器会显示滚动条，以便查看 */
overflow: inherit; /* 规定从父元素继承 overflow 属性的值 */
overflow-y: auto; /* 竖直方向出现滚动条 */
overflow-x: auto; /* 水平方形出现滚动条 */
/* 让文字超出部分以省略号显示，用以下三行代码（文字只能单行） */
overflow: hidden; /* 文字超出部分隐藏 */
white-space: nowrap; /* 强制文字在一行内显示 */
text-overflow: ellipsis; /* ellipsis 若文字超出以省略号显示；clip 不以省略号显示，而是简单的剪切 */
/* 让文字超出部分以省略号显示，用以下代码（文字可以多行） */
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 显示几行 */
}
</style>
</head>
<body>
<span>我是span标签</span>
</body>
</html>
