Ant Design -Divider组件源码css方向解析

笔者将根据官网上的Divider组件使用示例来讲解该组件css的实现方法，首先我们点进去 ant design divider使用示例，我们可以看到Divider一共有四种使用范例，下面我们一一从css的角度进行讲解。

水平分割线

实线

<div class="ant-divider ant-divider-horizontal" role="separator"></div>

.ant-divider {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #000000d9;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum";
    border-top: 1px solid rgba(0,0,0,.06);
}

.ant-divider-horizontal {
    display: flex;
    clear: both;
    width: 100%;
    min-width: 100%;
    margin: 24px 0;
}

根据以上代码，我们抽离出核心代码可以得知，实线是由一个高度为0，设置了border-top和上下margin的宽度，左右margin为0的div来实现的。

虚线

<div class="ant-divider ant-divider-horizontal ant-divider-dashed" role="separator">
</div>

根据html，我们得知，虚线水平分割线只是比实线多了ant-divider-dashed这个样式，我们可以看到样式的核心代码是设置了border-style为dashed属性实现了虚线的展示。

.ant-divider-dashed {
    background: 0 0;
    border-color: #0000000f;
    border-style: dashed;
    border-width: 1px 0 0;
}

带文字的分割线

文字居中

文字居中实现的难点在于，如何在文字左右两侧添加上分割线，且分割线总是均匀的占满父元素除文字以外的剩余空间。

<div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center" role="separator">
   <span class="ant-divider-inner-text">Text</span>
</div>

.ant-divider-inner-text {
    display: inline-block;
    padding: 0 1em;
}

.ant-divider-horizontal.ant-divider-with-text:before, 
.ant-divider-horizontal.ant-divider-with-text:after {
    position: relative;
    top: 50%;
    width: 50%;
    border-top: 1px solid transparent;
    border-top-color: inherit;
    border-bottom: 0;
    transform: translateY(50%);
    content: "";
}

布局实现重点：

(1) 分割线的来源：

通过css代码，我们得知，文字左右两侧的分割线是使用伪类在文字对应的元素之前和之后各插入一个包含content属性指定内容的行内元素，设置伪类元素的border-top,并且通过transform属性实现分割线的垂直居中。

(2)分割线宽度的设定

因为文字内容宽度是不确定的，我们希望两边的分割线总是占满父元素扣减文字内容的宽度的一半，那么这里使用的是flex布局，我们可以设置分割线的宽度为父元素的50%，由于flex布局默认flex-shrink为1，flex-grow为0，flex-basis为auto,那么会出现如下图两边分割线和文字同在一行，但是文字内容被挤压成多行的情况。

(3)如何让文字不被挤成多行？

源码里是设置span的white-space为nowrap不换行实现的。

笔者认为这里设置文字span的flex-shrink为0，也是可以实现文字不被挤压，完整展示的效果的。

文字靠左

.ant-divider-horizontal.ant-divider-with-text-left:before {
    top: 50%;
    width: 5%;
}
.ant-divider-horizontal.ant-divider-with-text-left:after {
    top: 50%;
    width: 95%;
}

这种情况，是在文字居中的情况的基础上，修改了左右分割线的宽度比例，左边分割线设置宽度为5%,右边分割线设置宽度为95%.

文字靠右

这种情况，同理文字靠左的情况，是在文字居中的情况的基础上，修改了左右分割线的宽度比例，左边分割线设置宽度为95%,右边分割线设置宽度为5%.

分割文字使用正文样式

ant-divider-plain.ant-divider-with-text {
    color: #000000d9;
    font-weight: 400;
    font-size: 14px;
}

如上，使用正文样式，只是设置了文字的粗细大小和颜色，使得有更轻量的分割文字样式。

垂直分割线

<div class="ant-divider ant-divider-vertical" role="separator"></div>

.ant-divider-vertical {
    position: relative;
    top: -0.06em;
    display: inline-block;
    height: 0.9em;
    margin: 0 8px;
    vertical-align: middle;
    border-top: 0;
    border-left: 1px solid rgba(0,0,0,.06);
}
.ant-divider {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #000000d9;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum";
    border-top: 1px solid rgba(0,0,0,.06);
}

根据源码得知，小竖线的实现是使用一个有一定高度，宽度为0的行内块元素的border-left来做的。
但是我们如何实现小竖线的垂直居中呢，小竖线是行内块元素，父元素是块级元素。
源码里使用了vertical-align属性，首先我们详细的解析一下这个css样式属性。

vertical-align的使用

(1) 使用方式一：在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式

这很容易理解，如果给一个表格的td加一个vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐。
(2) 使用方式二：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐
vertical-align:middle 是将元素盒子的垂直中点和父盒子的baseline加上父盒子的x-height的一半对齐。

如下图，当没有设置vertical-align属性的时候，这些行内元素是以基线对齐的。

当只给img设置vertical-align:middle后，图片的垂直中点和父盒子的baseline加上父盒子的x-height的一半对齐。

当只给text1和img设置vertical-align:middle后，text1和图片的垂直中点和父盒子的baseline加上父盒子的x-height的一半对齐。

所以Divider源码中，给分割线设置vertical-align为middle,目的是将分割线的元素盒子的垂直中点和父盒子的baseline加上父盒子的x-height的一半对齐。