Monthly Archives: 十一月 2017

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
    • 合理使用简写
      • 例如backgroundbackground-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
      • 支持逗号分隔语法,可以创建任意数量的投影,效果是蹭蹭叠加的
      • 注意事项
        • 投影的行为跟边框不完全一致,不影响布局,不收box-sizing影响
        • 不响应鼠标事件,内阴影可以
    • outline
      • 可以实现虚线
      • outline-offset可以控制跟元素边缘的间距,可以为负值
      • 不会贴合border-radius产生的圆角
  • 3 灵活的背景定位
    • background-position的扩展
      • background-position: right 20px bottom 10px;
      • 回退方案: background: url() bottom right #58a;
    • background-origin
      • 默认值:padding box
    • calc()
      • 可以进行继续并进行偏移