【读书笔记】--编写高质量的代码CSS篇

• 表单
  • 一般表单都要用表单域fieldset包起来，legend标签说明表单的用途，再通过css除去他们的默认样式，每个input标签对应的说明文本都应该有label标签，并且通过为input设置id值，和为label设置for=”someID“来表示他们的关联性
    • <form method="post" >
      <fieldset style="border:none">
           <legend style="display:none">login</legend>
          <p><label for="name">login </label><input type="text" id="name" /></p>
          <p><label for="pw">password </label><input type="password" id="pw" /></p>
      </fieldset>
      </form>
• 表格：
  • 表格标题用caption，表头要用thead包围，主题部分用tbody包围，尾部要用tfoot包围，表头单元格用th定义，其他单元格用td定义
    • <table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td></td><td></td></tr></tbody></table>
• css框架的层叠关系
  • base.css层：提供css的reset功能，和粒度最小的通用类-原子类，下载猛点这里
  • common.css层：网站级别
  • page.css层：页面级别
• css少用继承，多用组合
  • 继承：.list1{font:12px ; color :fff ; font-family:...}   .list2{font:16px}   .list3{color:#f00;}  使用时class="list1"   class="list2"
  • 组合：.list1{font:12px ; color :fff ; font-family:...}   使用时class=”list1“  或者 class="list1 f16"
• id只能挂一个，class能挂多个
  • id=”one“
  • class = ”one two“
• css属性重复定义class="one two"(one two 分别定义了不同的大小)
  • html标签权重1，css中class权重为10，css中id权重100
    • "div em" 权重1+1
    • "strong.demo" 权重10+1
    • "#test .red"权重100+10
  • 如果权重相同，会选择就近原则，后者覆盖前者的定义。指的是.one{}  .two{}选择符的先后，而不是class="one two"的先后
• css sprite:
  • 将两张图片放在一个jpg文档里，通过更改backgroud-position改变选择的图片
  • 好处：hover时避免图片还未加载时形成的空白，放在一起那会在页面加载时就加载了图片
  • 好处：一张图片就是一个http请求，http请求次数越多，访问服务器的次数就越多，服务器压力越大
• css hack ：
  • ie条件注释法加载css（只有ie浏览器会）：<!--[if IE]><link ..... >或者<style type="css">.div{....}....</style><![ENDIF]-->

    • 针对IE特定版本：<!--[if IE 6]><link ..... ><![ENDIF]-->

      针对某个版本以上或以下，结合lte(<=)lt(<)gte(>=)gt(>)!(不等于)：<!--[if gt IE 6]><link ..... ><![ENDIF]-->

  • ie选择符前缀：
    • *html（针对ie6）
    • *+html（针对ie7）
  • ie样式属性前缀：
    • _（只在ie6下生效）：.test{_width:60px}
    • *(只在ie6、ie7下生效)：.test{*width:60px;}
• a标签四种状态排序问题：l（link）ov（visited）e h（hover）a（active）te原则
• hasLayout：
  • 目的是为了让行内元素拥有块级元素属性
  • ie下的神秘属性，通过width，height，position：reletive都能触发，但会有副作用
  • zoom：1触发hasLayout比较好
• 块级元素和行内元素：
  • 块级元素：div，p，form，ul，li，ol，自动充满父容器，独占一行，可以设置width，height，但仍独占一行，可以设置padding，margin属性
  • 行内元素：span，em，strong，宽度随内容变换，挤在同一行直至宽度超过，设置width，height无效，只有padding/margin left/right有边距效果，padding/margin top/bottom都不产生边距效果
  • display：inline-block（行内的块级元素）可以设置margin，padding，width，height，但不独占一行，宽度不占满父元素
    • 但IE6/7不支持该属性，但可以用该属性触发hasLayout
    • abc<span>def</span>   span{display:inline-block}，ie8以上和ff都能正常显示在一行，ie6、7也显示在一行，但不是因为他们支持该属性，而是span是行内元素，触发了hasLayout，使行内元素拥有了块级属性
    • abc<p>def</p>  p{display:inline-block}则在ie6、7下不能处于一行
• reletive、absolute、float：
  • 设置该3个属性，可以使用left，top，right，bottom，z-index属性（这些属性一般是不激活的，设置了也无效）
  • relative和absolute都能使文档浮起来
    • relative浮起来后，仍然在z-index=0中拥有自己的占位符，他的top，left等都是相对于自己原来位置的
    • absolute浮起来后不再z-index=0中拥有占位符，top等都是相对与离自己最近的一个relative或absolute的父元素，如果都没有，就是body
  • 设置absolute或float属性都会改变display，使其变为inline-block的性质，显示改变为inline等也无效；设置为relative就不会隐式改变display
• 居中：
  • 水平居中  
    • 内联元素：给父元素设置text-align属性，可以使其内部的文字或图片居中
    • 确定宽度的块级元素：设置margin-left或margin-right：auto
    • 不确定宽度的块级元素（诸如ul/li实现的分页）：各有优缺点
      • 设置table，并赋予margin-left或margin-right：auto，table本身是行内元素，随内容长度而变，不用设置宽度，设置auto就能水平居中<table><tr><td><ul><li>...</ / / / >
      • 设置父元素align：center，将li变为inline类型，类似居中1
      • 设置父元素float，position：relative和left：50%，然后居中元素position：relative；left：-50%
  • 垂直居中
    • 父元素高度不确定的文字、图片、块级元素居中：设置父元素拥有相同上下边距padding-top/padding-bottom：npx
    • 父元素高度确定的单行文本：子元素line-height：父元素高度
    • 父元素高度确定的多行文本、图片、块级元素：
      • 设置vertical-aligh，但只适用于父元素为th，td时设置，th，td本身就包含垂直居中的效果，可以不用设置..<td height：确定><..多行..></td>..
      • 设置块级元素display：table-cell，激活vertical-aligh属性，设置垂直居中，但仅限于ff和ie8，ie6/ie7需要给父子元素分别设置relative+top：50% 和 absolute+top：-50%（复杂，请尝试）
• z-index：越大越靠上
  • 可以设负值，但会排在透明的body之下，引起js不能点击出效果等问题
  • 如果不设置z-index，默认为0，附于body之上，如果值相同，后面设置的块会浮在前面设置的块之上
  • ie6下flash的问题：不管怎么设置z-index都会浮于其他之上，因为flash是窗口类，窗口类会优先浮于非窗口类之上，如果都是非窗口类，才判断z-index的值，flash有个wmode属性，window（窗口）opaque（非窗口不透明）transparent（非窗口透明）
• ie6的png问题
  • 一次性解决的代码：放在html中的任意位置，他就会遍历所有的png了，下载猛点这里