CSS初始化
html元素表現(xiàn)的差異性：雖然html被稱為一種標準，但其并非是“強制標準”混卵∮乘耄——則各個瀏覽器公司做出來的瀏覽器產(chǎn)品或多或少總有一些差異。
最終幕随，通常的做法是：我們將所有各個瀏覽器中的html的初始標簽全部“清除”——即實現(xiàn)類似沒有“表形”功能的html蚁滋。
比如很多標簽有初始的margin，或padding，或字的大小或粗細辕录，斜體等等效果睦霎，則我們使用一些css設(shè)置將這些初始表現(xiàn)全部“清空”，比如：
*{
font-size:12px;
margin:0;
padding:0;
font-weight:normal;
font-style:normal走诞；
list-style-type:none;}
這樣之后副女，所有的每個標簽所需要的表現(xiàn)，都需要我們自己來使用css設(shè)置蚣旱。
實際應(yīng)用中碑幅，我們一般都是使用一個通用的css文件來完成此工作。
寫在<link rel="stylesheet" type="text/css"href="css/init.css" />
樣式分類
- 行內(nèi)樣式：
a) <標簽名 其他標簽屬性……. style=”css屬性1：值1塞绿；css屬性2：值2沟涨； …… ” >內(nèi)容部分</標簽名>
b) 只對當前標簽有效：通常不推薦使用，或偶爾臨時使用异吻。 - 頁內(nèi)樣式：
a) <style>
選擇器1{ ….. }
選擇器2{ ….. }
裹赴。。诀浪。篮昧。。笋妥。懊昨。。
</style>
b) 只對當前網(wǎng)頁有效：常見春宣。 - 外部樣式：
a) css文件中：
選擇器1{ ….. }
選擇器2{ ….. }
酵颁。。月帝。躏惋。。嚷辅。簿姨。。
b) 網(wǎng)頁文件中：
<link rel="stylesheet" type="text/css" href="css文件路徑url" />
c) 對所有引入該css的網(wǎng)頁有效：常見簸搞。
盒子深入
盒子的尺寸構(gòu)成：
一個盒子的寬度構(gòu)成：
左外邊距 + 左邊框?qū)?+ 左內(nèi)邊距 + width值 + 右內(nèi)邊距 + 右邊框?qū)?+ 右外邊距
一個盒子的高度構(gòu)成：
上外邊距 + 上邊框?qū)?+ 上內(nèi)邊距 + height值 + 下內(nèi)邊距 + 下邊框?qū)?+ 下外邊距margin外邊距細化：
margin還可以細分為4個方向扁位，每個方向都可以單獨控制，如下：
margin-top: 上外邊距
margin-right: 右趁俊。域仇。。
margin-bottom:下寺擂。暇务。泼掠。。
margin-left: 左垦细。择镇。。
margin其實是表示上述4個屬性的一個“綜合屬性”：其實它代表的就是指“一下子設(shè)置了4個方向的margin”括改，其詳細使用形式和含義如下：
margin: 一個值沐鼠； ——設(shè)置上，右叹谁，下，左4個方向均為該值乘盖；
margin：值1 值2焰檩； ——設(shè)置上下margin為值1，左右margin為值2订框；
margin:5px 10px; 表示上下margin是5px析苫，左右margin是10px
margin:0 auto; 表示上下margin是0，左右margin是auto——auto對標準瀏覽器就解析為兩邊相等
margin：值1 值2 值3穿扳；——設(shè)置上margin為值1衩侥，左右margin為值2， 下margin為值3矛物；
margin：值1 值2 值3 值4茫死；——分別設(shè)置上，右履羞，下峦萎，左4個方向的值；
-
border邊框細化(20)：
邊框指的是邊框線忆首。
線有3個方面的特性：線型爱榔，線寬，線色糙及，每個特性都可以單獨控制详幽。
邊框也有4個方向，每個方向都可以單獨控制浸锨。
于是：
我們立即就有了12個對邊框線的控制屬性：border-top-style: 頂部邊框的線型唇聘。常見線型：solid(實線) , dashed(虛線), dotted(點線) border-top-width: 頂部邊框的線寬； border-top-color: 頂部邊框的線色柱搜； border-right-style, border-right-width, border-right-color:
雳灾。。冯凹。谎亩。炒嘲。
。匈庭。夫凸。。阱持。夭拌。。衷咽。鸽扁。。镶骗。桶现。。鼎姊。骡和。。相寇。慰于。。唤衫。婆赠。。佳励。页藻。。植兰。份帐。。楣导。废境。。筒繁。噩凹。。毡咏。驮宴。。呕缭。堵泽。修己。
以上就是12個：
除此之外，我們還有3個設(shè)置線的某方面特性的綜合屬性：
border-style: 可以使用1-4個值迎罗，用來設(shè)置4個方向的線的線型睬愤，其規(guī)則同margin值的設(shè)置。
比如：border-style:solid dashed; 表示上下邊框為實線纹安，左右邊框為虛線尤辱；
border-width: 同理，可以設(shè)置1-4個值厢岂，表示4個方向的線寬光督。
border-color：同理。
還有：4個設(shè)置每個方向邊框的所有特性的綜合屬性：
border-top: 線型 線寬 線顏色塔粒；
border-right: 線型 線寬 線顏色结借；
border-bottom: 線型 線寬 線顏色；
border-left: 線型 線寬 線顏色窗怒；
最后，一個最大的綜合屬性：一次性設(shè)置4個方向的3個特性：
border: 線型 線寬 線顏色蓄拣；
盒子還有背景屬性扬虚。
盒子背景：
背景分兩種：
* 背景顏色：只能是純色，全平鋪——css3里面已經(jīng)可以設(shè)置過度色球恤。
background-color:顏色值辜昵；
* 背景圖片：需要設(shè)置圖片路徑，還可以設(shè)置是否重復（平鋪）咽斧，怎么重復堪置，怎么定位。
background-image:url(圖片路徑);
background-repeat: repeat // no-repeat // repeat-x // repeat-y;
重復 // 不重復 // 僅x方向重復//僅y方向重復
background-position: 水平定位方式 垂直定位方式张惹；
水平定位方式有： left // center // right // 離左邊的像素值舀锨；
垂直定位方式有： top // center // bottom // 離頂部的像素值；
背景綜合屬性：可以一次性設(shè)置有關(guān)背景的多個數(shù)據(jù)值：
background：背景色值 背景圖值 背景圖重復性值 背景圖定位值宛逗；
以上4個值坎匿，幾乎可以任意省略（也就是任意使用其中某些）。
塊盒子和行內(nèi)盒子的真相
其實塊盒子和行內(nèi)盒子的所謂初始表現(xiàn)雷激，并不是什么決定的東西替蔬，而只是一個屬性的初始值問題：
對塊盒子，其display屬性的值默認是block
對行內(nèi)盒子屎暇，其display屬性的值默認是inline承桥；
實際上，我們完全可以將html盒子的初始表現(xiàn)使用該屬性來設(shè)置其其它值——即塊盒子和行內(nèi)盒子可以相互轉(zhuǎn)換根悼。
div{ display: inline;} ——此時div就跟span一樣凶异。
span{ display: block;} ——此時span就跟div一樣蜀撑。
display: inline // block // none: 顯示為：行內(nèi)盒子//塊盒子//不顯示