一些特殊的样式记录

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

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

// js文件

test

// 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. 逻辑属性

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

中文在这里插入图片描述
阿拉伯语在这里插入图片描述
可以设置如下的逻辑属性


物理值,是相对页面的。包括 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;
}

你可能感兴趣的:(CSS)