以我所主，为我所用

CSS 图文样式的规则和常见用法

2 min read

CSS 图文样式的规则和常见用法是什么？

  • 如何支持小于 12px 的文字
    • zoom
  • zoom: 50%，表示缩小到原来的一半
  • zoom: 0.5，表示缩小到原来的一半
  • 需要考虑兼容性
  • 缩放会改变元素占据的空间大小，触发重排
    ```html






    Document
    测试10px 测试12px - transform: scale()
  • 只对可以定义宽高的元素有效
  • 缩放不会改变元素占据的空间大小，页面布局不会发生变化
    html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .span1 { font-size: 20px; display: inline-block; transform: scale(0.5); } .span2 { font-size: 12px; } </style> </head> <body> <span class="span1">测试10px</span> <span class="span2">测试12px</span> </body> </html>
  • line-height 继承规则
    • 写具体数值，如 line-height: 30px，则继承该值
    • 写比例：如 line-height: 2/15，则继承该比例
    • 写百分比：如 line-height: 200%，则继承计算出来的值
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>line-height 继承问题</title>
    <style type="text/css">
      body {
        font-size: 20px;
        line-height: 200%;
      }
 
      p {
        /* 行高为40px */
        background-color: #ccc;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <p>这是一行文字</p>
  </body>
</html>

Graph View

Backlinks