vertical-align: 元素所在一行垂直方向的对齐，谁小的谁动！父元素中的子元素，只能控制行内元素！！！用在单元格内可以用来春之对齐。
text-aligh：文字对齐，left, right, center
img图片，是行内元素，高度和宽度会自适应
继承过来的样式是优先级最低的！！！
margin 0 auto来实现水平居中
这并不是一个HTML函数，而是一个CSS样式规则。·margin: 0 auto·; 的功能是：
设置元素的上外边距和下外边距为0。
左右外边距自动调整，使元素在其父容器中水平居中。
盒子模型中，父子元素通过overflow来控制避免子元素的margin覆盖父元素！也就是说在父元素中添加overflow为hidden来实现。
案例：
水平垂直居中
<style>.outer{background-color: red;width: 400px;height: 400px;overflow: hidden; /**/}.inner{background-color: yellow;width: 200px;height: 200px;margin: 0 auto;text-align: center; /*水平居中*/margin-top: 100px;line-height: 200px; /*垂直居中*/}</style>
</head>
<body><div class="outer"><div class="inner">hello</div></div>
块元素中行内元素水平垂直居中，行内元素可以当作文字处理！
<title>水平居中span</title><style>.outer{background-color: red;width: 400px;height: 400px;text-align: center; /*注意是父块中加text-align*/}.inner{background-color: yellow;line-height: 400px;}</style>
</head>
<body><div class="outer"><span class="inner">hello</span></div>
图片和文字垂直居中对齐
<style>.outer{background-color: red;width: 400px;height: 400px;text-align: center; /*注意是父块中加text-align*/line-height: 400px;font-size: 0;/*绝对的*/}.inner{font-size: 80px;background-color: yellow;vertical-align: middle; /*和一行的元素垂直对齐*/}img {vertical-align: middle; /*和一行的元素垂直对齐*/}</style></head><body><div class="outer"><span class="inner">出来玩啊</span><img src="https://common.cnblogs.com/images/wechat.png" alt="1212" /></div></body>元素之间的空白问题
行内元素和行内块元素之间！
<style>div {background-color: gray;height: 500px;font-size: 0px; /*给父元素设置font-size为0即可*/}span {background-color: red;font-size: 20px;}</style>
</head>
<body><div><span class="s1">hello</span><span class="s2">hello</span><span class="s3">hello</span></div>
overflow属性，元素超过边界的时候行为
clip：裁剪，也就是说不可见
text-overflow: ellipsis; 是一个CSS属性，用于处理文本溢出其容器时的显示方式。当文本内容超出容器宽度时，该属性会在文本末尾添加省略号（…），以表示被截断的内容。这通常与 overflow: hidden; 和 white-space: nowrap; 一起使用，确保文本不会换行并且超出部分被隐藏。
