css的常见套路

布局

• float在布局中的使用往往是两三个div用float,然后用margin或者position之类的调节其中1/2个的位置
• float使开发者可以用类似inline正常流的思维处理block
• position：relative的位移应该是相对于“margin&padding&float”计算完毕后的位置，也就是说次序几乎是在最后;而且relative时left: -1与right: 1效果相同

虾米

• data-* 用于在元素中嵌入数据，可供js调用 如<element data-what="somevalue">
• background: linear-gradient(to bottom, #FA8723 0, #333 50%);
  /* 渐变！ */
• <meta http-equiv="refresh" content="10">
  /* 每隔10秒，刷新一次 */
• text-indent:100% ; over-flow: hidden
  /* 组合技 */
• 当td的width加起来不够填满table的width时，将缩放td的width，使之刚好填满
  /* */
• text-shadow: 5px 1px 10px black
  /* 扩散大小之类的尺寸 */
• float可用于在td之内，使td内的block变得好像inline-block
  /* */
• td中的元素垂直居中
  /* */
• cursor: pointer;
  /* 指向这货时鼠标的样式 */
• line-height : 4px; height：4px
  /* 按钮常用声明，按钮元素中，此两属性相等*/
• 子元素的margin对float父元素的border起作用，撑开，类似于padding
  /* 若父元素没有悬浮 */
• #main双栏浮动布局：左侧float:left;margin-right:-332px 右侧float:right;width:302px
  /* 父元素wrapper: width:auto;margin:0 auto; */
• img{max-width: 100%;}
  /* 窗口缩小至一定程度时，图片将随窗口而缩放 */
• box-shadow: 0 3px 3px rgba(0,0,0,0.3);
  /* block投影 */
• line-height: 3em; font-size:1em;
  /* 字体在nav中可能会竖直居中 */
• 如果元素难于定位 检查：是否需要width,height
  /* */