《精通CSS》读书笔记5

发表于 | 分类于 ，

第9章 bug和修复bug

常见的CSS问题

  • 特殊性和分类次序问题

    .content p{} 和 .intro{} intro包含在content类内，无效，因为前一个选择器特殊性更强，应该改成.content p{} 和 .content .intro{}

  • 外边距叠加

    如果元素没有垂直边框或内边距，那么它的高度就是它保函的子元素的顶部和底部边缘之间的距离。

    外边距叠加的问题，可以通过添加一点内边距或与元素北京颜色相同的小边框进行修复。

    1
    2
    3
    <div class="box">
      <p>this</p>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .box {
        margin: 10px;
        background: red;
        padding:1px; /*添加以后外边距不会叠加*/
    }
    p {
        margin: 20px;
        background: black;
    }

拥有布局

  • IE使用布局概念控制元素的尺寸和定位
  • 拥有布局的元素负责本身及其子元素的尺寸设置和定位。
  • 没有布局的元素的尺寸和位置由最近的拥有布局的祖先元素控制。
  • 可以用js函数hasLayout查看一个元素是否拥有布局

第10章 实例研究

text-overflow

  • 当文字超过div大小的时候，显示…，在鼠标hover的时候全部显示
1
2
3
4
5
6
7
8
9
10
p {
    text-overflow: ellipsis;
    overflow:hidden;
    white-space: nowrap;
}
p:hover{
  white-space: normal;
  overflow: visible;
  text-overflow: inherit;
}

Ajax

  • 异步的服务器通信，通常通过XMLHttpRequest实现
  • 通过操纵DOM进行动态显示和交互
  • 使用js把所有部分组合在一起

jQuery

  • 在DOM中移动
  • 修改页面的外观
  • 动态地修改页面的内容

感受：终于把《精通CSS》一书看完。这本书写的很混乱，前几章还算是零碎地介绍了一些知识，后面两章实例只是对前面知识点的应用而已，但组合出来的代码让人看得一头雾水。翻译不够通顺，许多知识点都过于陈旧，还在分析IE6的bug。实在不建议阅读，但是作为经典推荐书，看了也不亏。