文字樣式：
文字顏色：color
文字大小：font-size:
文字粗細(xì)：font-weight:
文字斜體：font-style:
文字字體：font-family:
文字修飾：text-decoration
行高：line-height:
首行縮進(jìn)：text-indent:
字符間距：letter-spacing:
單詞間距：word-spacing:
文字垂直對齊：vertical-align:
盒子模型初步：
觀念：幾乎所有標(biāo)簽都可以看過是一個盒子——具有如下特性的矩形區(qū)域
margin：外邊距（邊界）
border：邊框
padding：內(nèi)邊距（補白）
內(nèi)容部分：可以設(shè)置width，height
兩種盒子：
塊盒子：可以設(shè)置盒子的任何方面的特性（屬性），基本表現(xiàn)（特征）是“獨占一行”
行內(nèi)盒子：除了上下margin，上下padding，寬高之外，其他也可以設(shè)置眠屎。基本表現(xiàn)是“行內(nèi)顯示直到末尾再自動換行”——類似文字的表現(xiàn)——行內(nèi)盒子的內(nèi)容一般就是文字或圖片（實際上圖片本身就是行內(nèi)盒子）肆饶。
布局初步：
將網(wǎng)頁以逐步細(xì)化的方式分割成橫向或縱向的幾個獨立區(qū)域改衩。對于縱向區(qū)塊，則可以使用div盒子自然而成驯镊。對于橫向區(qū)塊葫督，則需要使用浮動才能實現(xiàn)。但浮動或?qū)е赂负凶邮ァ罢_的高度”（自然高度）——因此又要考慮父盒子高度的修正：
1板惑，設(shè)置固定高度候衍，保證可以包住子盒子
2，對父盒子設(shè)置overflow:hidden樣式洒放，可以獲得“自然高度”。
3滨砍，在父盒子內(nèi)部添加一個清除浮動的空div: <div style=”clear:both;”></div>
浮動作用與特性：
float:left, float:right
作用：使一個塊盒子可以跟其他塊盒子“并列”放置往湿。
特性：使其“浮”在別的標(biāo)簽之上，別的標(biāo)簽視它不存在而正常排列出來惋戏。
網(wǎng)頁布局步驟細(xì)化
1领追、在“當(dāng)前版面”分出幾個相對獨立的區(qū)塊（區(qū)塊只分兩種情況：縱向與橫向）；
2响逢、如果分出的是縱向區(qū)塊绒窑，則每一個區(qū)塊寫出一個div就可以了（因為div本身就是自占一行的，則自然每個div就是一個縱向的區(qū)塊了）舔亭；
3些膨、如果分成的是橫向區(qū)塊，則：
a)同樣每個區(qū)塊首先寫出一個div钦铺，且每個div都進(jìn)行浮動（通常是一左一右订雾，或兩左一右，或一邊倒）矛洞；
b)設(shè)置各個div需要的寬度及相關(guān)區(qū)域（padding洼哎，border，margin），但總和不超過當(dāng)前父盒子的寬度噩峦；
c)有必要也設(shè)置各自高度锭沟，以及顏色背景或邊框，以出現(xiàn)明顯的視覺效果识补，這樣有助于排錯族淮；
d)使用如下3個方法之一來保證父盒子可以正確包住其所有子盒子：
i.在父盒子內(nèi)部最后位置添加一個用于清除浮動的空div（<div style=”clear:both”></div>），
ii.對父盒子使用overflow:hidden;
iii.對父盒子設(shè)置一個固定的高度——適用于內(nèi)部盒子高度固定的情況李请。
4瞧筛、在上述每個分出的區(qū)塊中，又當(dāng)做“當(dāng)前版面”做同樣的分析與設(shè)計（重復(fù)1-3步）
html樣式清除（css初始化）
html元素表現(xiàn)的差異性：雖然html被稱為一種標(biāo)準(zhǔn)导盅，但其并非是“強制標(biāo)準(zhǔn)”较幌。——則各個瀏覽器公司做出來的瀏覽器產(chǎn)品或多或少總有一些差異白翻。
最終乍炉，通常的做法是：我們將所有各個瀏覽器中的html的初始標(biāo)簽全部“清除”——即實現(xiàn)類似沒有“表形”功能的html。
比如很多標(biāo)簽有初始的margin滤馍，或padding岛琼，或字的大小或粗細(xì)，斜體等等效果巢株，則我們使用一些css設(shè)置將這些初始表現(xiàn)全部“清空”槐瑞，比如：
*{
font-size:12px;
margin:0;
padding:0;
font-weight:normal;
font-style:normal；
list-style-type:none;
}
這樣之后阁苞，所有的每個標(biāo)簽所需要的表現(xiàn)困檩，都需要我們自己來使用css設(shè)置。
實際應(yīng)用中那槽，我們一般都是使用一個通用的css文件來完成此工作悼沿。
樣式分類
1，行內(nèi)樣式：
a)<標(biāo)簽名 其他標(biāo)簽屬性……. style=”css屬性1：值1骚灸；css屬性2：值2糟趾； …… ” >內(nèi)容部分</標(biāo)簽名>
b)只對當(dāng)前標(biāo)簽有效：通常不推薦使用，或偶爾臨時使用甚牲。
2义郑，頁內(nèi)樣式：
a)<style>
選擇器1{ ….. }
選擇器2{ ….. }
</style>
b)只對當(dāng)前網(wǎng)頁有效：常見。
3丈钙，外部樣式：
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外邊距細(xì)化：
margin還可以細(xì)分為4個方向，每個方向都可以單獨控制著恩，如下：
margin-top: 上外邊距
margin-right: 右院尔。蜻展。。
margin-bottom:下邀摆。纵顾。。栋盹。
margin-left: 左施逾。。例获。
margin其實是表示上述4個屬性的一個“綜合屬性”：其實它代表的就是指“一下子設(shè)置了4個方向的margin”汉额，其詳細(xì)使用形式和含義如下：
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對標(biāo)準(zhǔn)瀏覽器就解析為兩邊相等
margin：值1 值2 值3圃验；——設(shè)置上margin為值1掉伏，左右margin為值2， 下margin為值3澳窑；
margin：值1 值2 值3 值4斧散；——分別設(shè)置上，右照捡，下，左4個方向的值话侧；
padding內(nèi)邊距細(xì)化：
同上栗精。
border邊框細(xì)化：
邊框指的是邊框線。
線有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è)置是否重復(fù)（平鋪），怎么重復(fù)珊佣，怎么定位蹋宦。
background-image:url(圖片路徑);
background-repeat: repeat // no-repeat // repeat-x // repeat-y;
重復(fù) // 不重復(fù) // 僅x方向重復(fù)//僅y方向重復(fù)
background-position: 水平定位方式 垂直定位方式；
水平定位方式有： left // center // right // 離左邊的像素值咒锻；
垂直定位方式有： top // center // bottom // 離頂部的像素值冷冗；
背景綜合屬性：可以一次性設(shè)置有關(guān)背景的多個數(shù)據(jù)值：
background：背景色值 背景圖值 背景圖重復(fù)性值 背景圖定位值；
以上4個值惑艇，幾乎可以任意省略（也就是任意使用其中某些）蒿辙。
塊盒子和行內(nèi)盒子的真相
其實塊盒子和行內(nèi)盒子的所謂初始表現(xiàn)，并不是什么決定的東西滨巴，而只是一個屬性的初始值問題：
對塊盒子思灌，其display屬性的值默認(rèn)是block
對行內(nèi)盒子，其display屬性的值默認(rèn)是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)盒子//塊盒子//不顯示
