自定义 ol/li 序号样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ol {
  counter-reset: li;  // 创建计数器
}
ol li {
  position: relative;
  padding-left: 30px;
}
ol li::before {
  content: counter(li) ".";
  counter-increment: li;  // 递增计数器
  position: absolute;
  left: 0;
  font-size: 28px;
  color: rgba(0, 0, 0, .8);
}

font-display属性

这个属性指定了文档在远程字体下载和可用时的展示策略，如果你的网站中用到了远程字体；

关于远程字体渲染策略，有三个部分：

  • 阻塞期：表示浏览器会block文档以等待字体的下载。阻塞期字体无法顺利加载时，浏览器会使用备选字体
  • 交换期：当字体在交换期完成加载时，需要把上一步渲染的备选字体替换为目标字体
  • 失败期：上述周期内无法下载字体则自动适应回退字体。

这里我们重点关注前两个，阻塞期、交换期的不同时长的组合对应了font-display属性的不同值：

  • block：表示文档会block一段时间（阻塞期大概3s）来等待远程字体文件的下载，该时间内字体如没有完成下载，使用备选字体，等远程字体下载完毕后再进行替换。
  • swap：表示文档不会block(极短的阻塞期< 1s)，直接使用备选字体，远程字体下载完毕后再进行替换。
  • fallback：表示文档不会block(极短的阻塞期< 1s)，直接使用备选字体，并且在交换期（大概是2s）内下载完毕则进行字体替换，否则放弃使用远程字体。
  • optional：表示文档不会block(极短的阻塞期< 1s)，这么短时间内字体完成加载则使用字体否则放弃使用。
  • auto：自动模式，由浏览器决定（chrome下行为跟swap类似）

文本超出显示省略号

单行文本

1
2
3
4
5
6
p{
  overflow: hidden;/*超出部分隐藏*/
  text-overflow:ellipsis;/* 超出部分显示省略号 */
  white-space: nowrap;/*规定段落中的文本不进行换行 */
  width: 250px;/*需要配合宽度来使用*/
}

多行文本

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

1
2
3
4
5
6
7
p{
  display: -webkit-box;/* 必须结合的属性，将对象作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical;/* 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-line-clamp: 3;/* 限制在一个块元素显示的文本的行数 */
  overflow: hidden;/*超出部分隐藏*/
  text-overflow:ellipsis;/* 超出部分显示省略号 */
}

上下左右居中

左右居中

当display: block时，将元素本身的margin-left与margin-right设定为auto，就可以左右居中。

1
margin: 0 auto;

当display: inline/inline-block时，将父元素(容器)设定text-align: center就可左右居中。

1
text-align: center;

上下左右居中

方法一： Position Absolute（对齐元素本身）

子元素css样式如下：

1
2
3
4
5
position: absolute;
top: 50%;
left: 50%;
// 此时子元素的左上角已经对齐父元素正中心
transform: translateX(-50%) translateY(-50%);

or

1
2
3
4
position: absolute;
bottom: 50%;
right: 50%;
transform: translateX(50%) translateY(50%);

方法二： Flexbox（对齐元素内容）

父元素css样式如下：

1
2
3
display: flex;
justify-content: center;
align-items: center;

方法三： Display Table（对齐元素内容）

父元素css样式如下：

1
display: table;

子元素css样式如下：

1
2
3
display: table-cell;
vertical-align: middle;
text-align: center;

设置表格单元格宽度

网页中插入表格时，设置了表格的宽度，则会根据表格宽度拉伸；但是有时候内容过长时，就会拉伸的很难看，所以就需要固定表格宽度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table>
    <thead>
        <tr>
        <th class="number">序号</th>
        <th class="color">颜色</th>
        <th class="text">HEX格式</th>
        <th class="text">RGB格式</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td class="number">1</td>
        <td class="color" bgcolor="lightpink">    </td>
        <td class="text">#FFB6C1</td>
        <td class="text">255,182,193</td>
        </tr>
    </tbody>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
table {
    table-layout:fixed;
    word-wrap: break-word;
}
.number {
    width: 10%;
}
.color {
    width: 10%;
}
.text {
    width: 40%;
}
// 表格固定布局
table {
    table-layout: fixed;
    word-break: break-all;
    word-wrap: break-word;
}
  • table-layout:fixed 表示：

列宽由表格宽度和列宽度设定。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

  • word-break:break-all 表示：

word-break 属性规定自动换行的处理方法。break-all允许在单词内换行。

  • word-wrap: break-word 表示：

word-wrap 属性允许长单词或 URL 地址换行到下一行。break-word就表示在长单词或 URL 地址内部进行换行。

table-layout, word-break, word-wrap这三个属性都是关于固定宽度显示控制的;

对一般的浏览器来说，只需要其中一个就可以完成控制了.

使图片重叠放置

方法

父级元素 样式设置：

1
position: relative;

子元素 样式设置：

1
position: absolute;

这样就可以达到子元素相对父级元素定位了。

示例

1
2
3
4
5
<div class="images">
    <img class="img1" src="/images1.jpg">
    <img class="img2" src="/images2.jpg">
    <img class="img3" src="/images3.jpg">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.images {
    position: relative;
}
.images .img2 {
    display: block;
    position: absolute;
    border-radius: 10px;
    width: 50%;
    top: 10%;
    left: 50%;
}
.images .img3 {
    display: block;
    position: absolute;
    border-radius: 50%;
    width: 10%;
    top: 50%;
    left: 50%;
}

参考链接