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
    /* */
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章