一些我不常用的css属性

1.1turn

1turn：一圈，一个圆共一圈。
90deg = 0.25turn。
transform: rotate(1turn);

2. -webkit-tap-highlight-color

浅谈 -webkit-tap-highlight-color属性

CSS3 鲜为人知的属性-webkit-tap-highlight-color的理解

❤️-webkit-tap-highlight-color

这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮，设置颜色的alpha值为0即可。
✨示例：设置高亮色为50%透明的红色:
-webkit-tap-highlight-color: rgba(255,0,0,0.5);
浏览器支持: 只有iOS(iPhone和iPad).

❤️-webkit-text-size-adjust

1.当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用 html{-webkit-text-size-adjust:none;}

2.-webkit-text-size-adjust放在body上会导致页面缩放失效

3.body会继承定义在html的样式

4.用-webkit-text-size-adjust不要定义成可继承的或全局的

❤️outline：none

1.在pc端为a标签定义这个样式的目的是为了取消ie浏览器下点击a标签时出现的虚线。ie7及以下浏览器还不识别此属性，需要在a标签上添加hidefocus=“true”

2.input，textarea{outline:none} 取消chrome下默认的文本框聚焦样式

3.在移动端是不起作用的，想要去除文本框的默认样式可以使用-webkit-appearance，聚焦时候默认样式的取消是-webkit-tap-highlight-color。看到一些移动端reset文件加了此属性，其实是多余。

❤️-webkit-appearance: none;

消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式
⚠️不同type的input使用这个属性之后表现不一。text、button无样式，radio、checkbox直接消失

❤️-webkit-user-select: none;

禁止页面文字选择 ，此属性不继承，一般加在body上规定整个body的文字都不会自动调整

❤️-webkit-touch-callout:none;

禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加

safe-area-inset-bottom

网页适配 iPhoneX，就是这么简单

@support判断是否支持该属性，如果支持的话，就执行下面的语句

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  .g-bottom-fixed, .bottom-fixed {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #fff;
  }
}

antialiased

CSS3 属性 font-smoothing 字体平滑处理和抗锯齿渲染

-webkit-font-smoothing:none | subpixel-antialiased | antialiased

• none：对低像素的文本比较好
• subpixel-antialiased：默认值
• antialiased：抗锯齿很好

-moz-osx-font-smoothing: inherit | grayscale

• inherit：默认值
• grayscale：抗锯齿很好

display

display 属性可以设置元素的内部和外部显示类型 display types。元素的外部显示类型 outer display types 将决定该元素在流式布局中的表现（块级或内联元素）；元素的内部显示类型 inner display types 可以控制其子元素的布局（例如：flow layout，grid 或 flex）。

❤️contents

网上的解释了一大堆我也没看懂，在浏览器里的最直观表现就是选中时不像其他元素一样，没有任何框，这可能让我们调试的时候有些不自在，只剩下它自身的内容

❤️list-item

❤️table

如果需要的话，可以使用一整套显示值来强制非表元素的行为类似于表元素。它很少见，但有时可以使您在利用表的独特定位功能的同时，对代码“更具语义”。

div {
  display: table;
  display: table-cell;
  display: table-column;
  display: table-colgroup;
  display: table-header-group;
  display: table-row-group;
  display: table-footer-group;
  display: table-row;
  display: table-caption;
}

使用时，只需模仿普通表结构即可。简单的例子（😅这是纯手动的做一个表格呀～）：

<div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell;">
      Gross but sometimes useful.
    </div>
  </div>
</div>

css图标的制作和使用

css字体图标的制作和使用

theme-color

目前适用于手机端，pc端好像不起作用呢
<meta name=“theme-color” content="#000000" />

font-variant-ligature

https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-variant-ligatures

设置某些连体字的样式
比如法语中的"oe"的连字形式为"œ".

• normal // 渲染连字
• none // 不渲染
• common-ligatures
• …