日常使用css总结

在草稿箱里吃灰一年多的css总结，尽量保持更新...

• 文字可编辑
  contenteditable属性可实现，使用css也一样可以实现，那就是
  user-modify

  user-modify: read-only;
  user-modify: read-write;    支持富文本
  user-modify: write-only;
  user-modify: read-write-plaintext-only;    纯文本
  

• 禁用鼠标事件

  pointer-events:none;
  pointer-events:none + disabled = 完美禁用鼠标和键盘事件
  pointer-events:none + without href = 禁用a标签的鼠标和键盘事件
  
  

• 使用writing-mode排版竖文

  .vertical-text {
  	writing-mode: vertical-rl;
  	h3 {
  		padding-left: 20px;
  		font-weight: bold;
  		font-size: 18px;
  		color: $red;
  	}
  	p {
  		line-height: 30px;
  		color: $purple;
  	}
  }
  

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

text-align-last: justify;

• 使用:not()去除无用属性

.first-line span:not(:last-child)::after {
   	content: ",";
   }

• 使用object-fit规定图像尺寸
  要点：通过object-fit使图像脱离background-size的约束，使用来标记图像背景尺寸
• 使用letter-spacing排版倒序文本

  .reverse-text {
   font-weight: bold;
   font-size: 50px;
   color: $red;
   letter-spacing: -100px; // letter-spacing最少是font-size的2倍
  }
  

• 使用margin-left排版左重右轻列表
  使用flexbox横向布局时，最后一个元素通过margin-left:auto实现向右对齐
  代码：演示地址
• resize CSS 属性允许你控制一个元素的可调整大小性。
• 使用+或~美化选项框
  要点：使用+或~配合for绑定radio或checkbox的选择行为
  场景：选项框美化、选中项增加选中样式
  代码：演示地址
• 使用:focus-within分发冒泡响应
  要点：表单控件触发focus和blur事件后往父元素进行冒泡，在父元素上通过:focus-within捕获该冒泡事件来设置样式
  场景：登录注册弹框、表单校验、离屏导航、导航切换
  代码： 演示地址
• 使用:hover描绘鼠标跟随
  要点：将整个页面等比划分成小的单元格，每个单元格监听:hover，通过:hover触发单元格的样式变化来描绘鼠标运动轨迹