# Tip about CSS

## clearfix

為了清除浮動

.clearfix {
		*zoom: 1;
}
.clearfix:after {
		display: table;
		content: "";
		line-height: 0;
		clear: both;
}

## padding-right or bottom & margin-right or bottom

如遇 model box 問題盡可能在右或下做修正(因為 XY 是朝右下發展) 避免用到 top 盡量用 bottom

## scroll bar

在 windows 中，scroll bar 的寬是 16px

## a & img

在用 a 包覆 img 時會發現一個現象就是就算把 a 用 block 設定寬高設成跟 img 一樣還是會發現滑鼠在要從圖片下面移進圖片會發現進去前會有約 2px 的空白滑鼠就先變成有連結的狀態，經過詢問後發現是因為 img 的關係，img 本身會有一點高度在bottom，所以如果要去掉這高度有一些作法

img {
overflow: hidden;
/* or */
vertical-align: bottom;
/* or */
display: block;
}

## iframe border in IE7, IE8

<iframe frameBorder="0"></iframe>

## word-break

在頁面上有要塞入一堆字的地方, 最好使用 break-word 以免英文單字在換行時出問題

word-break: break-word;

Refer - 手動調整 Responsive 中日文斷行的實驗

## 利用編碼呈現單引號等符號

Start Using Quotation Marks the “Correct” Way

## CSS 文字垂直置中

CSS 垂直置中解法

## retina 裝置

Retina裝置與網頁開發

## Texture

Texturize It: How to Create Textured Text Using CSS

## 視差滾動

Pure CSS Parallax Websites

##

前端常识：7个你可能不认识的CSS单位