Captain9911

CSS高级技巧

  • Oct 26, 2022

关键词：css, 技巧

鼠标样式

cursor

cursor: default;
  • default 默认样式，箭头
  • pointer 小手
  • text 文本输入
  • move 移动

表单轮廓线

outline

默认状态下，选中时会显示一个蓝色边框。

/* 去除轮廓线后，选中时不会显示蓝色边框。 */
outline: none;

/* 设置一个始终显示的轮廓线 */
outline: 2px solid red;

防止文本域拖拽

resize

/* 禁止拖拽改变文本域大小 */
resize: none;

行内元素对齐方式

vertical-align

只针对于 行内元素或者行内块元素，特别是行内块元素， **通常用来控制图片/表单与文字的对齐。

/* 默认状态，基线对齐 */
vertical-align: baseline;
  • baseline：基线对齐
  • top：顶线对齐
  • middle：中线对齐
  • bottom：底线对齐

解决图片底部有空隙问题

vertical-align

底部出现空隙的原因：默认为基线对齐 baseline

/* 转换为块级元素 */
/* display: block;*/

/* 顶部对齐，最常用 */
vertical-align: top;

文本换行

word-break

/* 默认规则 */
word-break: normal;
  • normal 默认规则
  • break-all 允许单词内换行
  • keep-all 只能在半角空格或连字符处换行

单行显示文本

white-space

/* 默认规则 */
white-space: normal;

/* 不换行，在同一行内显示所有文本，直到文本结束或br */
white-space: nowrap;

超出范围的文字显示省略号

text-overflow

/* 实现超出范围文字显示... 需要实现下面3步 */

/* 强制单行显示 */
white-space: nowrap;

/* 不显示超出范围的内容 */
overflow: hidden;

/* 超出范围则显示... */
text-overflow: ellipsis;

精灵技术

background-position

将多个小图标放在一张大图上，可避免网页同时进行多个请求。

/* 加载图片 */
background: url(images/jd.png) no-repeat;

/* 需要将背景图进行的位移 */
background-position: 0 -385px;

字体图标

font-family

/* 电脑中没有的字体，我们需要声明 */
@font-face {

    font-family: icomoon;
    src: url(fonts/icomoon.eot),
    url(fonts/icomoon.svg),
    url(fonts/icomoon.ttf),
    url(fonts/icomoon.woff);

    /* 其实只加载ttf也是可以的
    src: url(fonts/icomoon.ttf); */
}


span {
    font-family: "icomoon";
    /* 一定保证和上面的 font-family: 相同 */
    font-size: 100px;
    color: red;
}

.class1 {
    font-family: "icomoon";
    /* 一定保证和上面的 font-family: 相同 */
    font-size: 100px;
    color: blue;
}

.class1::before {
    content: "\e900";
}
Search