#大有学问#

#头条创作挑战赛#

垂直对齐

作用

用于设置图片或者表单等行内块元素和文字的垂直对齐。

垂直对齐只针对行内元素或者行内块元素有效。

语法

vertical-align：baseline | top | middle | bottom ;

代码练习

练习思路：将图片和文字统一放在一个大盒子div中。

div {
  width: 500px;
  border: 1px solid black;
  margin-bottom: 5px;
}
img {
  height: 150px;
}

• baseline：基线对齐，也是垂直对齐的默认状态值。

 .vAB {
  /* 默认值：基线对齐 */
  vertical-align: baseline;
}

<div>
  <img src="../images/tb1.jpg" alt="">
  没有设置垂直对齐。
</div>
<div>
  <img src="../images/tb1.jpg" alt="" class="vAB">
  垂直对齐默认值：基线对齐。
</div>

• top：顶部对齐。

.vAT {
  /* 顶部对齐 */
  vertical-align: top;
}

<div>
  <img src="../images/tb1.jpg" alt="" class="vAT">
  垂直对齐默认值：顶部对齐。
</div>

• middle：居中对齐。

.vAM {
  /* 垂直居中对齐 */
  vertical-align: middle;
}

<div>
  <img src="../images/tb1.jpg" alt="" class="vAM">
  垂直对齐默认值：居中对齐。
</div>

• bottom：底线对齐。

注：这个跟基线对齐不一样。

默认情况下图片的外轮廓是有空白缝隙的。

基线对齐让文本跟图片的空白缝隙对齐。

底线对齐让文本跟图片的下边缘对齐，没有空白缝隙。

.vABo {
  vertical-align: bottom;
}

<div>
  <img src="../images/tb1.jpg" alt="" class="vABo">
  垂直对齐默认值：居中对齐。
</div>

基线对齐和底线对齐对比效果：

溢出文字使用省略号显示

• 单行文本溢出

用法步骤：

1.强制文本在一行显示

white-space: nowrap;

2.超出部分隐藏

overflow:hidden;

3.文字用省略号替代超出的部分。

text-overflow: ellipsis;

代码练习

设置一个盒子div，里面包含文本。

div {
  width: 200px;
  height: 40px;
  border: 1px solid black;
  margin: 5px;
}

单行文本省略号

.line {
  /* 强制文本一行显示 */
  white-space: nowrap;
}
.oneLine {
  /* 1.强制文本一行显示 */
  white-space: nowrap; 
  /* 2.超出的文本部分隐藏 */
  overflow: hidden;
  /* 3.设置溢出文字的样式为省略号 */
  text-overflow: ellipsis;
}

<div class="line">
  单行溢出文字没有使用省略号显示，默认状态
</div>
<div class="oneLine">
  单行溢出文字使用省略号显示
</div>

• 多行文本溢出

注：多行文本溢出有较大兼容性问题，适合于webkit内核浏览器，如谷歌浏览器。

用法步骤：

1.溢出部分隐藏

overflow: hidden;

2.溢出文本用省略号表示

text-overflow: ellipsis;

3.兼容性设置

/* 1.弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 2.限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 3.设置或检索伸缩和对象的子元素的排列方式 */
-webkit-box-orient: vertical;

代码练习

.moreLine {
  /* 溢出部分隐藏 */
  overflow: hidden;
  /* 溢出文本用省略号表示 */
  text-overflow: ellipsis;
  /* 兼容性设置：*/
  /* 1.弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 2.限制在一个块元素显示的文本的行数 */
  -webkit-line-clamp: 2;
  /* 3.设置或检索伸缩和对象的子元素的排列方式 */
   -webkit-box-orient: vertical;
}

<div>
  多行溢出文字，多行溢出文字，多行溢出文字，多行溢出文字，多行溢出文字，
  多行溢出文字，多行溢出文字，多行溢出文字，多行溢出文字。
</div>
<br><br><br><br>
<div class="moreLine">
  多行溢出文字省略号显示，多行溢出文字省略号显示，多行溢出文字省略号显示，
  多行溢出文字省略号显示，多行溢出文字省略号显示。
</div>

margin负值

当列表中的li标签添加边框和浮动后，中间部分的li边框两两挨在一起会显粗。

列表设置共同样式

ul {
  width: 200px;
  height: 80px;
  margin-bottom: 5px;
}
li {
  width: 50px;
  height: 80px;
  list-style: none;
  border: 1px solid black;
  float: left;
}

正常状态下浮动的列表

<ul>
  <li>默认</li>
  <li>默认</li>
  <li>默认</li>
</ul>

• 添加负值

向左移动边框像素值，使边框向左重叠一个边框值。

.mF li {
  margin-left: -1px;
}

<ul class="mF">
  <!-- 添加负值之后，从第二个盒子开始，盒子的左边框向左压住了前一个盒子的右边框 -->
  <li>负值</li>
  <li>负值</li>
  <li>负值</li>
</ul>

当给li标签添加鼠标悬停效果时，除右侧最后一个盒子之外，其他的盒子都无法显示右侧边框。

ul li:hover {
  border-color: blue;
}

• 添加相对定位

因为是第三个盒子向左移动1个边框值，故当鼠标悬停时，第二个盒子的右边框时被压住的，所以显示的仍是第三个盒子的左边框。

改变这个结果就是为li标签添加相对定位，因为相对定位是仍保留元素原来的位置的，所以当鼠标悬停时会整体显示该元素。

.rE li:hover {
  position: relative;
}

<ul class="mF rE">
  <!-- 添加相对定位，盒子仍占有原有位置 -->
  <li>相对定位</li>
  <li>相对定位</li>
  <li>相对定位</li>
</ul>

拜拜~