一：標簽分類
1.塊級標簽的特點(block)：
?①獨占一行
?②可以設置尺寸
?③沒有明確寬度的時候，寬度由父級決定
?④沒有明確高度的時候黑低，高度由內(nèi)容決定
?⑤支持margin,padding
2.行級標簽的特點(inline)：
①不會獨占一行甜紫，可以與其他行級元素并排
②不支持尺寸設置
③對margin左右斯够，padding左右支持較好校辩，上下間距慎用(謹記)
3.行快級標簽特點 (inline-block)：
①支持盒模型杯聚，但不會獨占一行
二：選擇器(通配與標簽不作說明)
1.群組選擇器：
? ? 選擇器1翻默，選擇器2缸沃，選擇器3{
? ? ? ? 語句；
? ? }
例子：
? ? #box1,#box2,#box3{
? ? ? ? background:red;
? ? }
2.后代選擇器：
? ? 父級選擇器 子級（孫級）選擇器{
? ? ? ? 語句修械；
? ? }
例子：
? ? #wrap div div {
? ? ? ? ?width：100px和泌；
? ? }
3.后臺選擇器：(只能找到直接子級，間接子級被過濾)
? ? 父級>子級{
? ? ? ? ?語句祠肥；
? ? ?}
? ? body>div{
? ? ? ? border:1px solid greenyellow;
? ? ? ? margin:10px;
? ? }
拓展：
1.優(yōu)先級可以疊加
2.優(yōu)先級高的代碼生效
3.優(yōu)先級一樣的時候武氓，后寫的代碼生
三：margin和padding注解
1.padding:元素border和內(nèi)容之間的距離
?①設置一個值得時候代表四周都有對應值得padding
?②兩個值：第一個值代表上下padding梯皿，第二個代表左右padding
?③三個值：第一個值代表上padding，第二個代表左右padding县恕，第三個值代表下padding
?④四個值：上padding东羹，右padding，下padding忠烛，左padding
2.margin：元素和他周圍元素之間的距離属提，設置方法和padding一樣
?①頁面塌陷：父子級包含的時候子級的margin-top會傳遞給父級：
? ? 規(guī)避方案：給父級元素設置
? ? ? ? ?border-top：1px solid transparent;
?②已知父級大小情況的水平居中：
? ? ? ? ? margin:0 auto;
?③margin可以設置負值，設置負值代表向相反的方向移動美尸。
?④給兩個相鄰的元素都設置外邊距的時候冤议，他們之間的總距離取兩個元素較大的邊距
四：css樣式及其引入方式
是在標記的style屬性中設定CSS樣式，格式如下：
<div style = "color: red"></div>
1.?行間樣式：
優(yōu)點：
? ?①不會產(chǎn)生額外的請求
? ?②初步實現(xiàn)結(jié)構與樣式的分離
? ?③代碼復用不方便
? ?④適合單頁面網(wǎng)站應用
缺點：
? ?①容易產(chǎn)生重復的代碼师坎，造成文檔體積變大
? ?②不利于維護
? ?③不符合結(jié)構與樣式分離的規(guī)范
?注意： 行內(nèi)式這種方式?jīng)]有體現(xiàn)出CSS的優(yōu)勢恕酸，不推薦使用。
2.內(nèi)部樣式：
? ? ?嵌入式是將CSS樣式集中寫在網(wǎng)頁的標簽對的標簽對中胯陋，格式如下：
? ? ?<head>
? ? ? ? ? ? <meta charset="utf-8"></meta>
? ? ? ? ? ? <title></title>
? ? ? ? ? ? <style>
? ? ? ? ? ? ? ? ? ?color: red;
? ? ? ? ? ? </style>
? ? ?</head>
? ? 優(yōu)點：
? ? ?①不會產(chǎn)生額外的請求
? ? ?②初步實現(xiàn)結(jié)構與樣式的分離
? ? 缺點：
? ? 代碼復用不方便,對于一個包含很多網(wǎng)頁的網(wǎng)站蕊温，在每個網(wǎng)頁中使用嵌入式，進行修改樣式時非常麻煩遏乔。
? ? ?單一網(wǎng)頁可以考慮使用嵌入式义矛。
3.外部樣式：
? ? 引入html文件外的css樣式，格式如下：
? ? <link rel="stylesheet"href="day01.css">
? ? 優(yōu)點：
? ? ?①利于后期維護
? ? ?②可以重復使用
? ? ?③完成實現(xiàn)結(jié)構與樣式的分離
? ? 缺點：
? ? ?會產(chǎn)生額外的請求(但是后期我們會借助工具抹平這個缺點)
