一些特殊的样式记录

1. chrome显示小于12px的字号

现在chorme只能显示12px及以上的字号，如果想要显示12px一下的字号，就需要用到css的transform属性。

// js文件
<p  class="test">test</p>

// css文件
.test {
font-size:16px;
-webkit-transform: scale(0.625); 
}

这样新的字号就是 10px；
但是这样会导致p元素整体缩小，影响p的宽度，如果原理p的宽度是 width:100%,那设置了 transform 知乎，宽度会变成 100%*0.625 = 62.5%；这个需要注意一下。另外，transform 只能影响块状元素，所以，如果是打算为行内元素设置 transform ，需要先设置 display:inline-block。

2. 逻辑属性

我们现在很多属性的都是属于物理属性，当出现需要从右到左开始阅读的内容时，页面排版就需要逻辑属性维护。如：

中文
阿拉伯语
可以设置如下的逻辑属性

<style>
  section {
    text-align: start; /* start 逻辑值 */
  }
h2 {
  border-inline-start: .3em solid #ccc; /* border-inline-start 逻辑属性 */
  padding-inline-start: .5em; /* padding-inline-start 逻辑属性 */
}
</style>

物理值，是相对页面的。包括 left right top bottom。
逻辑值（下文也称“流相对值”），是相对内容流的。包括：
start end
inline-start inline-end inline
block-start block-end block

3. CSS实现三角形

.box{
     width: 0;
     height: 0;
     border-top: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid transparent;
     border-left: 50px solid black;
}