[聚合文章] CSS揭秘读书笔记(1,2章）

CSS 揭秘阅读

第一章

• 1.2 css编码技巧
  • 尽量减少代码重复
    • DRY
    • line-height:1.5  - 表示基于font-size的1.5倍数关系
  • 易维护性
    • 集合属性拆分成独立属性来写，例如’border-width: 10px 10px 10px 0′ -> ‘border-width: 10px; border-left-width: 0px;’
    • currentColor 是个真正的css变量
    • 继承 inherit
  • 响应式网页设计
    • Meida Query 会增加成本
      • 断点不应该由具体的设备来决定，应该根据设计自身来决定
      • 使用百分比长度取代固定长度
      • 在较大分辨率下时，使用max-width取代width
      • img、object、video 设置 max-widht:100%
      • 铺满背景的的图片，使用 background-size: cover  - 注意图片尺寸权衡
      • 元素行列式布局，推荐使用flexbox或者 display:inline-block
  • 合理使用简写
    • 例如 background 和 background-color
  • 权衡使用预处理器
    • 预处理的缺点
      • CSS的文件体积和复杂度可能会失控
      • 调试难度增加(不过有sorucemap，就方便了)
      • 有编译时间消耗
      • 学习成本
      • 抽象泄露法则：所有重大的抽象机制在某种程度上都存在泄露的情况.

第二章 – 背景与边框

• 1 半透明边框
  • 半透明颜色： rgba() 和 hsla()
  • background-clip : 设置元素的背景（背景图片或颜色）是否延伸到边框下面
    • 默认值: border-box
    • padding-box: 边框下面没有背景，即背景延伸到内边距外沿。
    • content-box: 背景裁剪到内容区 (content-box) 外沿。
• 2 多重边框
  • 古老方式是使用 border-image  或者 hack用多个元素模拟边框
  • box-shadow
    • 支持第四个参数:  box-shadow: 0 0 0 10px #655
    • 支持逗号分隔语法，可以创建任意数量的投影，效果是蹭蹭叠加的

    // 会出现2层阴影
    box-shadow: 0 0 0 10px #655,
                  0 0 0 15px deeppink;
    

    • 注意事项
      • 投影的行为跟边框不完全一致，不影响布局，不收box-sizing影响
      • 不响应鼠标事件，内阴影可以
  • outline

    outline: 5px solid deeppink;
    

    • 可以实现虚线
    • outline-offset 可以控制跟元素边缘的间距，可以为负值
    • 不会贴合 border-radius 产生的圆角
• 3 灵活的背景定位
  • background-position的扩展
    • background-position: right 20px bottom 10px;
    • 回退方案：  background: url() bottom right #58a;
  • background-origin
    • 默认值：padding box
  • calc()
    • 可以进行继续并进行偏移

    // 距离底边10px，距离右边20px
    background-position: calc(100%-20px) calc(100%-10px);