[前端筆記] CSS3 Cross Country筆記

把Code School CSS3課程做個筆記

Inheritance & Specificity

CSS3對selector和class有優先權的設定
有個數列能做參考：

, , ,
由左至右為權限高到低，舉例來說

<section id="content">
	<p class="product">Coffee brewer</p>
  <p>It's the best way to enjoy coffee</p>
</section>

#content p {		# specificity: 0,1,0,1
	color: #000;
}
.product {			#	 specificity: 0,0,1,0  優先權較低，不會生效
	color: #555;
}
#content .product {		# specificity: 0,1,1,0 加上ID selector才會生效
	color: #555;
}

The Box Model

當我們需要計算某個樣式的寬度時，需套入以下公式：
total calculated box width = content width + padding width + border width
例如：

.form {
	border: 5px solid #fff;
  padding-left: 10px;
  padding-right: 5px;
  width: 120px;	
}

此樣式總寬度為： 120(content)＋15(padding)＋10(border)＝145px

Positioning

CSS的樣式位置預設是static，總共有4種設定：static/relative/absolute/fixed
除了static之外，其它3種設定可分別調整元素上、下、左、右位置，例如：

<article>
	<h2>Alex's Playground<sup>2</sup></h2>
</article>

sup {
	font-size: 60%;
  vertical-align: baseline;
  position: relative;
  top: -0.5em;
}

參考來源：
Positioning