1. rem

默认字号

  • rem是相对html根元素来说的；浏览器默认的font-size为16px，也就是说默认 1rem为16px。
  • 鉴于此，一些网页定义 根元素 font-size为10/16 = 0.675em，那么这个时候1rem为10px。

  • 16px为继承值

  • 而使用rem前，一般都需要加入一些js代码，通过判断屏幕宽度去计算根[html]的font-size,代码为：

  1. (function() {
  2.  function autoRootFontSize() {
  3.   document.documentElement.style.fontSize = Math.min(screen.width, document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px';}
  4.   window.addEventListener('resize', autoRootFontSize);
  5.   autoRootFontSize();
  6. })();

而不需要使用js去计算font-size，直接使用CSS的为解决问题的重点：

  1. /* 基于UI width=750px DPR=2的页面 */
  2. html {
  3.     font-size: calc(100vw / 7.5);
  4. }

2. vw vh

vw:

  • 1vh表示屏幕可视宽度的1%

vh:

  • 1vh表示屏幕可视高度的1%

calc：

  • calc()函数用于动态计算长度值,可以组合不同的单位,特别需要注意的是运算符前后都需要保留一个空格

dpr：

  • window.devicePixedlRatio (物理像素),就是一个比例，IPhone4开始，dpr为2 ，这个东西的作用是设计稿用750px，一个按钮的设计为100px，那么CSS书写就是50px，详细一点的解释为：https://juejin.cn/post/6844903704567644167

3. 使用nth-child()选择指定元素

demo p:nth-child(2):表示id为demo的元素下的第二个p标签

4. 使用writing-mode排版竖文

writing-mode:vertical-lr

5. 使用 text-align-last对齐两端文本

text-align-last:justify


6. css一行文本超出

  1. p{
  2.     overflow:hidden;
  3.   white-space:nowrap;
  4.   text-overflow:ellipsis;
  5. }

7.多行文本超出

  1. .div{
  2.     display: -webkit-box;
  3.   -webkit-box-orient:vertical;
  4.   -webkit-line-clamp:3;
  5.   overflow:hidden
  6. }

8.iOS手机容器滚动条滑动不流畅

  1. .div {
  2.     overflow:auto;
  3.   -webkit-box-scrolling:touch;
  4. }

9.使用CSS写出一个三角形图表

  1. .div {
  2.     height:0;
  3.   width:0;
  4.   border:10px solid #transparent;
  5.   border-top-color:red;
  6. }

10.contenteditable

html中大部分标签是不可以编辑的，但是添加了contentditable属性后，标签会变成可编辑状态。