字体，字重，颜色，大小，行高
背景/边框
滚动/换行

字体族

  • 衬线字体serif
  • 非衬线字体
  • 等宽字体monospace
  • 非等宽字体
  • 手写体
  • 花体

font-family:"Microsoft YaHei", serif

多字体fallback 网络字体，自定义字体icon-font

自定义字体

  1. @font-face {
  2.     font-family: 'IF', // [字体名]
  3.   src: url('[font path]')
  4. }
  6. .custom-font {
  7.     font-family: IF;
  8. }

引用远程字体会出现跨域的问题

行高

内联元素的行高决定了它的父级元素所占据的高度（等于子元素行高最高的高度）

顶线和文字的顶部不一样，vertical-align(默认是baseline，基线对齐)

图片间隙问题：

  1. <div>
  2.     <span>文字</span>
  3.   <img src="1.png" />
  4. </div>

原因：img默认是一个inline元素，它会按照base line（基线）对齐，基线到底线之间是有空隙的 解决：

  • vertical-align: bottom;
  • display:inline-block;

背景

渐变色：linear-gradient

多背景叠加
背景图片和属性（雪碧图）
base64

边框

border-image
三角形

  1. .box {
  2.     width: 0px;
  3.   border-bottom: 30px solid red;
  4.   border-left: 20px solid transparent;
  5.   border-right: 20px solid transparent;
  7.   // border-radius: 20px; 扇形
  8. }

文字换行

  • overflow-wrap 通用换行控制
    • 是否保留单词
    • overflow-wrap:break-word
  • word-break 针对多字节文字
    • 中文句子也是单词
    • word-break:break-word

  • white-space 空白处是否断行

    单行文字省略：overflow: hidden;white-space: nowrap;text-overflow: ellipsis;

  • 多行文本溢出截断库：https://joe.sh/clamp-js

    1. <style>
    2. .block {
    3.   width: 400px;
    4.   background-color: #fff;
    5.   border: 3px solid #646464;
    6. }
    7. .block-content {
    8.   text-align: justify;
    9.   display: -webkit-box;
    10.   -webkit-line-clamp: 3;
    11.   overflow: hidden;
    12.   -webkit-box-orient: vertical;
    13.   padding: 1.5em 1.5em 0em 1.5em;
    14.   margin-bottom: 1.5em;
    15. }
    16. </style>
    17. <div class="block">
    18. <div class="block-content">
    19.   卡耐基对微笑有这样的描述：“它在家中产生，他不能买，不能求，不能借，不能偷，因为在人们得到它之前，对谁都是无用的东西，他给予后人之后，会使你得到别人的好感，它是疲倦者的休息，希望的阳光，悲哀者的力量，又是大自然免费赋予人们的一种解除苦难的良药。”
    20. </div>
    21. </div>