工作這麼多年,
有累積一些常見的問題,
整理出來。
1.垂直對齊
垂直對齊對表格 (table) 是最簡單的,但是 div 對每個人都有自己一套的 Css 寫法,整理出市面上常用的寫法。
- table-cell ( ie11以上 )
.tablecell{display:table-cell;vertical-align: middle;} .tablecell div{margin:0 auto;line-height: 50px;}
- transform: translateY(-50%) ( ie11以上 )
.transform div{ position: relative; top:50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); margin:0 auto; }
- position: absolute 絕對定位
.position{position: relative;} .position div{ position: absolute; top:0; right:0; bottom:0; left:0; margin:auto; }
- display:flex (IE11)
.flexbox{ display:flex; align-items:center; justify-content:center; }
- 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;
}