樣式分類

1殊轴， 行內(nèi)樣式：
a) <標(biāo)簽名 其他標(biāo)簽屬性……. style=”css屬性1：值1；css屬性2：值2贼陶； …… ” >內(nèi)容部分</標(biāo)簽名>
b) 只對當(dāng)前標(biāo)簽有效：通常不推薦使用，或偶爾臨時(shí)使用。
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è)盒子的寬度構(gòu)成：
左外邊距 + 左邊框?qū)?+ 左內(nèi)邊距 + width值 + 右內(nèi)邊距 + 右邊框?qū)?+ 右外邊距
一個(gè)盒子的高度構(gòu)成：
上外邊距 + 上邊框?qū)?+ 上內(nèi)邊距 + height值 + 下內(nèi)邊距 + 下邊框?qū)?+ 下外邊距
margin外邊距細(xì)化：
margin還可以細(xì)分為4個(gè)方向，每個(gè)方向都可以單獨(dú)控制雅宾，如下：
margin-top: 上外邊距
margin-right: 右葵硕。懈凹。库北。
margin-bottom:下寒瓦。杂腰。喂很。恤筛。
margin-left: 左毒坛。煎殷。豪直。
margin其實(shí)是表示上述4個(gè)屬性的一個(gè)“綜合屬性”：其實(shí)它代表的就是指“一下子設(shè)置了4個(gè)方向的margin”，其詳細(xì)使用形式和含義如下：
margin: 一個(gè)值暇韧； ——設(shè)置上懈玻，右涂乌，下湾盒，左4個(gè)方向均為該值；
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個(gè)方向的值蹋砚；
padding內(nèi)邊距細(xì)化：
同上。
border邊框細(xì)化：
邊框指的是邊框線墨坚。
線有3個(gè)方面的特性：線型泽篮，線寬帽撑，線色扣蜻，每個(gè)特性都可以單獨(dú)控制。
邊框也有4個(gè)方向味咳，每個(gè)方向都可以單獨(dú)控制槽驶。
于是：
我們立即就有了12個(gè)對邊框線的控制屬性：
border-top-style: 頂部邊框的線型。常見線型：solid , dashed, dotted
border-top-width: 頂部邊框的線寬鸳兽；
border-top-color: 頂部邊框的線色掂铐；
border-right-style, border-right-width, border-right-color: 。揍异。全陨。。衷掷。
辱姨。。戚嗅。雨涛。。懦胞。替久。。躏尉。侣肄。。醇份。稼锅。吼具。。矩距。拗盒。。锥债。陡蝇。。哮肚。登夫。。允趟。恼策。。潮剪。涣楷。。抗碰。狮斗。。弧蝇。碳褒。。看疗。骤视。。鹃觉。
以上就是12個(gè)：
除此之外专酗，我們還有3個(gè)設(shè)置線的某方面特性的綜合屬性：
border-style: 可以使用1-4個(gè)值，用來設(shè)置4個(gè)方向的線的線型盗扇，其規(guī)則同margin值的設(shè)置祷肯。
比如：border-style:solid dashed; 表示上下邊框?yàn)閷?shí)線，左右邊框?yàn)樘摼€疗隶；
border-width: 同理佑笋，可以設(shè)置1-4個(gè)值，表示4個(gè)方向的線寬斑鼻。
border-color：同理蒋纬。
還有：4個(gè)設(shè)置每個(gè)方向邊框的所有特性的綜合屬性：
border-top: 線型 線寬 線顏色；
border-right: 線型 線寬 線顏色；
border-bottom: 線型 線寬 線顏色蜀备；
border-left: 線型 線寬 線顏色关摇；
最后，一個(gè)最大的綜合屬性：一次性設(shè)置4個(gè)方向的3個(gè)特性：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)背景的多個(gè)數(shù)據(jù)值：
background：背景色值 背景圖值 背景圖重復(fù)性值 背景圖定位值食听；
以上4個(gè)值胸蛛，幾乎可以任意省略（也就是任意使用其中某些）污茵。

塊盒子和行內(nèi)盒子的真相

其實(shí)塊盒子和行內(nèi)盒子的所謂初始表現(xiàn)樱报，并不是什么決定的東西，而只是一個(gè)屬性的初始值問題：
對塊盒子泞当，其display屬性的值默認(rèn)是block
對行內(nèi)盒子迹蛤，其display屬性的值默認(rèn)是inline；
實(shí)際上襟士，我們完全可以將html盒子的初始表現(xiàn)使用該屬性來設(shè)置其其它值——即塊盒子和行內(nèi)盒子可以相互轉(zhuǎn)換盗飒。
div{ display: inline;} ——此時(shí)div就跟span一樣。
span{ display: block;} ——此時(shí)span就跟div一樣陋桂。

display: inline // block  // none: 顯示為：行內(nèi)盒子//塊盒子//不顯示