業界實用的 CSS (一)

css 工作這麼多年,

有累積一些常見的問題,

整理出來。

1.垂直對齊

垂直對齊對表格 (table) 是最簡單的,但是 div 對每個人都有自己一套的 Css 寫法,整理出市面上常用的寫法。

  1. table-cell ( ie11以上 )
    .tablecell{display:table-cell;vertical-align: middle;}
    .tablecell div{margin:0 auto;line-height: 50px;}
  2. transform: translateY(-50%) ( ie11以上 ) 
    .transform div{
      position: relative;
      top:50%;
      -webkit-transform: translateY(-50%);
           -o-transform: translateY(-50%);
              transform: translateY(-50%);
      margin:0 auto;
      }

     

  3. position: absolute  絕對定位
    .position{position: relative;}
    .position div{
      position: absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      margin:auto;
    }

     

  4. display:flex (IE11)
    .flexbox{
      display:flex;
      align-items:center;
      justify-content:center;
    }

     

  5. line-height 
    .lineheight{line-height:150px;}
    .lineheight div{display:inline-block;}

     

2.div 100% 高 ( height )

html, 
body {
    height: 100%;
}
.wrap {
    height: 100%;
}

3.不同文件檔案有不同的 ICON

icon 高度 會以文字尺寸高度為準,也可以用 background-size 去設定尺寸

a{padding-right: 40px;}
/*連結寫法*/
a[href^="http://"]{
    background: url(https://cdn3.iconfinder.com/data/icons/networking-flat-colorful/614/4328_-_World_Wide_Web-32.png) no-repeat center right;
  background-size:18px 18px;
}
/* email */
a[href^="mailto:"]{
    background: url(https://cdn3.iconfinder.com/data/icons/fatcow/32/email_add.png) no-repeat center right;
}
/* 檔案類型 */
a[href$=".pdf"]{
    background: url(https://cdn3.iconfinder.com/data/icons/document-icons-2/30/647716-pdf-32.png) no-repeat center right;
}

4.漸層用法

線性漸層(Linear Gradient)與徑向漸層(Radial Gradients)的語法規則

線性漸層語法:background: linear-gradient(方向,顏色1,顏色2, ......);
徑向漸層語法:background: radial-gradient(ellipse 或 circle,顏色1,顏色2, ......);

5.表格內容斷行

有時候不喜歡表格裡面文字會自動斷行,當資料多的時候可以直接變成捲軸,所以需要加上不斷行語法

td {
    white-space: nowrap;
}