10月28, 2014

CSS学习1:《精通CSS》读书笔记

温故而知新,持之以恒,坚持~干巴爹

###基础知识

  1. 文档的意义:代码易维护;面向程序和其他设备更有意义;代码更少,下载更快
  2. ID:页面上特定的元素,且唯一;持久性结构元素,主导航,内容区等;一次性元素,form等
  3. 命名:这个元素是什么,而不是长的什么样。可以通过这个命名找到对应的元素。重用。
  4. 确定这个元素只会出现一次,用ID;以后可能需要相似的元素,用类。
  5. IE6在标准模式下,正常盒模型;混杂模式下,老式专有盒模型。
  6. DTD不存在或不正确,会触发混杂模式;有过渡DTD而没有URI???也会;DTD不是页面中的第一个元素,IE6也会触发。
  7. css,import速度比link慢

###可视化格式模型

  1. outline不会影响元素的大小和定位。ie7+
  2. 普通文档流块框垂直margin才会叠加。float,absoulte,inline框的margin都不会叠加。
  3. 普通流中的元素框位置由元素在html中的位置决定
  4. 行内框,垂直padding,垂直margin,垂直边框,对其高度无影响。显式设定其height和weight没有效果。除非修改行高
  5. 在块级元素标签(如p)开头处添加一些文本 ,这些文本形成匿名块级框。
    <div>hello world~~~~~~~<p>hello</p></div>
    
  6. 同理,如果在行内元素标签(如span)开头加文本,则形成匿名行内框。
    <a href="##">hello world~~~~~~~<span>hello</span></a>
    
  7. position
  8. relative: 元素占据自己原来的位置,移动是相对于自己原来的位置
  9. absolute: 不占据空间。普通文档流中的其他元素就好像没看到它一样。移动相对于离它最近的已定位(除了static的)的祖先元素。
  10. ie6的bug,相对于relative进行absolute,右边或底部,需要确保relative的祖先元素设定了宽高,否则会相对画布定位。
  11. fixed,相对于viewport的绝对定位。ie7+
  12. float,元素不在文档的普通流中。其他没浮动的元素(框好像没看到它,但是框内的文本信息,会环绕着浮动元素)像没看到它一样。浮动停止的位置,是碰到包含框的边缘或是其他浮动元素的边缘。
  13. opacity,不透明度。除了对背景生效,元素中包含的内容也继承了这个属性。

###浏览器,table,form

  1. 浏览器默认对页面缩放而不是文本,也就是说,布局,格式和文字大小都会同比例变化
  2. border-spacing(IE8+),IE7-,可以用cellspacing
  3. fieldset,legend,label(for),input(与img一样是可置换元素,表现和inline-block差不多,display是inline的,却可以 设置宽高)
  4. 对于button标签,ie6,ie7,提交元素本身的内容,其他浏览器提交value的值。如果页面上 有多个按钮 ,ie6会提交所有按钮的内容。

本文链接:https://imjiaolong.cn/post/css-study.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。