CSS總結(jié)
?
CSS 指層疊樣式表 (Cascading Style Sheets) 。
我并沒有單獨(dú)的學(xué)習(xí)過，也沒有買過書，只是在工作中用多了就會(huì)了。
首先推薦一個(gè)學(xué)習(xí)網(wǎng)址：http://www.w3school.com.cn/css/css_intro.asp
其次建議下載一份 CSS手冊(cè)。
下面只總結(jié)初學(xué)者比較容易忽略的一些問題：
1.樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中，其中數(shù)字 d 擁有最高的優(yōu)先權(quán)。
a 瀏覽器缺省設(shè)置
b 外部樣式表
c 內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部）
d 內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）
2.盒模型
元素框的最內(nèi)部分是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。
內(nèi)邊距呈現(xiàn)了元素的背景。
內(nèi)邊距的邊緣是邊框。
邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會(huì)遮擋其后的任何元素。
瀏覽器兼容：
一旦為頁面設(shè)置了恰當(dāng)?shù)?DTD，大多數(shù)瀏覽器都會(huì)按照上面的圖示來呈現(xiàn)內(nèi)容。
然而 IE 5 和 6 的呈現(xiàn)卻是不正確的。
根據(jù) W3C 的規(guī)范，元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的，
而內(nèi)容周圍的 padding 和 border 值是另外計(jì)算的。不幸的是，
IE5.X 和 6 在怪異模式中使用自己的非標(biāo)準(zhǔn)模型。
這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、填充和邊框的寬度的總和。
雖然有方法解決這個(gè)問題。
但是目前最好的解決方案是回避這個(gè)問題。
也就是，不要給元素添加具有指定寬度的內(nèi)邊距，
而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素。
術(shù)語翻譯
element : 元素。
padding : 內(nèi)邊距，也有資料將其翻譯為填充。
border : 邊框。
margin : 外邊距，也有資料將其翻譯為空白或空白邊。
把 padding 和 margin 統(tǒng)一地稱為內(nèi)邊距和外邊距。
3.一個(gè)非常關(guān)鍵的屬性position
CSS中有不少屬性是用來定位的，這也為我們采用DIV+CSS 布局，取代 古老的tabel布局提供了基礎(chǔ)支持。
bottom： 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
clip： 設(shè)置元素的形狀。元素被剪入這個(gè)形狀之中，然后顯示出來。
left： 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
overflow： 設(shè)置當(dāng)元素的內(nèi)容溢出其區(qū)域時(shí)發(fā)生的事情。
position： 把元素放置到一個(gè)靜態(tài)的、相對(duì)的、絕對(duì)的、或固定的位置中。
right： 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
top： 定義了一個(gè)定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
vertical-align： 設(shè)置元素的垂直對(duì)齊方式。
z-index： 設(shè)置元素的堆疊順序。
而這其中非常關(guān)鍵和初學(xué)者容易搞混的概念就是 position 屬性。
static 默認(rèn)。
位置設(shè)置為 static 的元素，它始終會(huì)處于頁面流給予的位置（static 元素會(huì)忽略任何 top、bottom、left 或 right 聲明）。
relative
位置被設(shè)置為 relative 的元素，可將其移至相對(duì)于其正常位置的地方，因此 "left:20" 會(huì)將元素移至元素正常位置左邊 20 個(gè)像素的位置。
absolute
位置設(shè)置為 absolute 的元素，可定位于相對(duì)于包含它的元素的指定坐標(biāo)。此元素的位置可通過 "left"、"top"、"right" 以及"bottom" 屬性來規(guī)定。
?
fixed
位置被設(shè)置為 fixed 的元素，可定位于相對(duì)于瀏覽器窗口的指定坐標(biāo)。此元素的位置可通過 "left"、"top"、"right" 以及"bottom" 屬性來規(guī)定。
不論窗口滾動(dòng)與否，元素都會(huì)留在那個(gè)位置。工作于 IE7（strict 模式）。
這些屬性是DIV布局的奠基石。由于瀏覽器的不同，盒模式中也有差異，比如說對(duì)于寬度盒高度，在不同瀏覽器中定義是不同的，IE6是包含邊框 、內(nèi)邊距，而FF的只是指內(nèi)容的寬度。
細(xì)節(jié)上的差異，往往是我們?cè)谌粘９ぷ髦心芸偨Y(jié)出來的。所以也不必太在意。當(dāng)你的CSS寫的不兼容時(shí)候，你自然就會(huì)想起這些內(nèi)容。
關(guān)于布局部分就沒有總結(jié)，其實(shí)最常見就是clear 和 float屬性 ，當(dāng)然滾動(dòng)條部分也屬于這里。
4.對(duì)于javascript 操作 CSS屬性
一般在手冊(cè)或者前面提供的那個(gè)網(wǎng)址中，對(duì)應(yīng)的CSS屬性有對(duì)應(yīng)的js方法。但是有一點(diǎn)是很多程序員都會(huì)犯的錯(cuò)誤。
就是操作（特別是獲取外聯(lián)CSS文件中的相應(yīng)屬性）
外聯(lián)特指
{
?b 外部樣式表
?c 內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部）
}
往往有取不到值的情況發(fā)生：
外部CSS文件內(nèi)容：.aa{width:100px;height:100px;background:#ccc;}
?a.html：
?1?<html>
?2?<head>
?3??<link?rel="stylesheet"?type="text/css"?href="css.css">
?4?</head>
?5?<body>
?6?<div?class="aa"?id="aa"></div>
?7?<input?type="button"?value="獲取"?onclick="ddd()">
?8?<script>
?9?function?ddd()
10?{
11?
12?????alert(document.getElementById('aa').style.width);
13?}
14?</script>
15?</body>
16?</html>
這樣是取不到你想要的結(jié)果的。
這里就有兩種方法避免問題：
1.CSS直接寫在元素里：
<div class="aa" id="aa" style="width:100px;"></div>
2.js獲取currentStyle
eg：樣式表還是寫在外部
2.html：
<
html
>
<
head
>
?
<
link?
rel
="stylesheet"
?type
="text/css"
?href
="css.css"
>
</
head
>
<
body
>
<
div?
class
="aa"
?id
="aa"
></
div
>
<
input?
type
="button"
?value
="獲取"
?onclick
="ddd()"
>
<
script
>
var
?getRuntimeStyle?
=
?
function
(obj,?k)?
{
????
var
?v?
=
?
null
;
????
if
?(obj.currentStyle)?v?
=
?obj.currentStyle[k];
????
else
?v?
=
?window.getComputedStyle(obj,?
null
).getPropertyValue(k);
????
return
?v;
}
var
?ddd?
=
?
function
()
{
????obj?
=
?document.getElementById('aa');
????alert(getRuntimeStyle(obj,'width'));
????alert(getRuntimeStyle(obj,'height'));
????alert(getRuntimeStyle(obj,'backgroundColor'));
//
IE用?style?的?js?屬性，和?FF有區(qū)別，F(xiàn)F應(yīng)該寫background-color,即CSS屬性
????alert(getRuntimeStyle(obj,'background
-
color'))
????alert(getRuntimeStyle(obj,'zIndex'))
}
</
script
>
</
body
>
</
html
>
|