日常使用css总结

·  阅读 162

在草稿箱里吃灰一年多的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触发单元格的样式变化来描绘鼠标运动轨迹
分类:
阅读
标签: