css(CascadingStyle sheets)
css稱為css樣式或層疊樣式表，主要用于設置HTML頁面的文字內容(字體扇苞、大小、對齊方式等)
圖片的外形(寬高寄纵、邊框樣式鳖敷、邊距)、以及版面的布局等外觀顯示樣式程拭。

規(guī)則：
h1 {color:red; font-size:25px;}
h1 選擇器
color 屬性
red 值

color:red; 值

注意：
1定踱、選擇器用于指定CSS樣式作用的HTML對象，花括號內是對該對象設置的具體樣式恃鞋。
2崖媚、屬性和屬性值以 鍵值對 的形式出現。
3恤浪、屬性是對指定的對象設置的樣式屬性畅哑，例如字體大小、文本顏色等
4水由、屬性和屬性值之間用英文“:”連接
5荠呐、多個“鍵值對”之間用英文“;”進行區(qū)分

一，字體樣式屬性
1砂客，font-size:字號大小

font-size屬性用于設置字號泥张，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位鞠值。
其中相對長度單位比較常用媚创，推薦使用像素單位px，絕對長度單位使用較少

相對長度單位：
pm: 相對于當前對象內文本的字體尺寸
px: 像素

絕對長度單位：
in  英寸
cm  厘米
mm  毫米
pt  點

2彤恶，font-family:字體
font-family屬性用于設置字體
例子：p{font-family:"微軟雅黑";}

可以同時指定多個字體钞钙，中間以逗號隔開，表示如果瀏覽器不支持第一個字體声离，則會嘗試下一個歇竟，直到找到合適的字體
    
常用技巧：
        1、現在網頁中普遍使用14px+
        2抵恋、盡量使用偶數的數字字號焕议，ie6等老式瀏覽器支持奇數會有bug
        3、各種字體之間必須使用英文狀態(tài)下的逗號隔開
        4、中文字體需要加英文狀態(tài)的引號盅安，英文字體一般不需要加引號唤锉。當需要設置英文字體時，英文字體必須位于中文字體名之前
        5别瞭、如果字體中包含空格窿祥、#、$等符號蝙寨，則改字體必須加英文狀態(tài)下的單引號或雙引號晒衩，例如：font-family:"Time New Roman"
        6、盡量使用系統(tǒng)默認字體墙歪，保證在任何用戶瀏覽器中都能正確顯示
        
Unicode字體
在css中設置字體名稱听系，直接寫中文是可以的，但是在文件編碼(GB2313,UTF-8)不匹配是會產生亂碼的錯誤虹菲。

XP系統(tǒng)不支持微軟雅黑的中文字體
方案一：可以使用英文來替代靠胜，比如 font-family:"Microsoft Yahei"

方案二：在Css直接使用Unicode編碼來寫字體名稱可以避免這些錯誤。使用Unicode寫中文體名稱毕源，瀏覽器是可以正確的解析
font-family:"\5FAE\8F6F\96C5\9ED1"浪漠，表示設置字體為“微軟雅黑”。



font-weight:字體粗細

字體加速除了用b和strong標簽之外霎褐，可以使用CSS來實現址愿，但是CSS是沒有語義的。
font-weight屬性用于定義字體的屬性冻璃，其可用屬性值：normal bold bolder,lighter,100~900（100的整數）

技巧
數字400等價于normal,而700等價于bold响谓，但是我們更喜歡用數字來表示


font-style:字體風格
字體傾斜除了使用 i 和 em標簽之外，可以使用CSS來實現俱饿，但是CSS是沒有語義的

normal：默認值歌粥，瀏覽器會顯示標準的字體樣式
italic:瀏覽器會顯示斜體的字體樣式
oblique：瀏覽器會顯示傾斜的字體樣式

技巧：
平時我們很少給字體加斜體塌忽，反而喜歡給斜體標簽(em,i)改為普通樣式


font:綜合設置字體樣式(簡寫)
font屬性用于對字體樣式進行綜合設置拍埠，其基本語法格式如下
選擇器{font:font-style font-weight font-size/line-height font-family}
        樣式  粗細  大小/行高   字體
    
使用font屬性時，必須按上面的語法格式中的順序書寫土居，不能更換順序枣购，各個屬性以空格隔開

注意：其中不需要設置的屬性可以省略(取默認值)，但必須保留font-size和font-family屬性擦耀，否則font屬性將不起作用棉圈。

二、開發(fā)者工具(Chrome)
F12 或 shift+ctrl+i 打開開發(fā)者工具
技巧：不多說

三眷蜓、選擇器
指定應用特定的HTML元素分瘾，需要找到該目標元素。

1吁系、標簽選擇器(元素選擇器)
    標簽選擇器是指用HTML標簽名稱作為選擇器德召，按標簽名稱分類白魂，為界面中某一類標簽指定統(tǒng)一的CSS樣式。
    
    語法：
    標簽名{屬性1:屬性值; 屬性2:屬性值 屬性3:屬性值;}
    或者
    元素名{屬性1:屬性值; 屬性2:屬性值 屬性3:屬性值;}
    
    標簽選擇器最大的優(yōu)點是能快速為界面中同類型的標簽統(tǒng)一樣式上岗，同時這也是他的缺點
    不能設計差異化樣式。
    
2、類選擇器
    類選擇器使用"."(英文點號)進行標識锦庸，后面緊跟類名
    
    語法：
    .類名{屬性1:屬性值; 屬性2:屬性值 屬性3:屬性值;}
    
    標簽調用的時候用: class="類名" 即可;
    
    類選擇器最大的優(yōu)勢是可以為元素對象定義單獨或相同的樣式传轰。
    
    技巧：
    1，長名稱或詞組可以使用中橫線來為選擇器命名呆瞻。
    2台夺，不建議使用"_"下劃線來命名CSS選擇器
    
    命名規(guī)范：
    http://www.divcss5.com/jiqiao/j4.shtml
    或百度一大堆
    
    

3、多類名選擇器
    可以給標簽指定多個類名栋烤，從而達到更多的選擇目的谒养。
    
    注意：
    1）樣式顯示效果跟HTML元素中的類名先后順序沒有關系，受CSS樣式書寫的上下順序有關
        也就是明郭，兩個類選擇器使用重復的屬性买窟，會顯示的是順序在下面那一個選擇器的樣式
    
    2）各個類名中間用空格隔開
    多類名選擇器在后期布局比較復雜的情況下，還是較多使用的

4薯定、ID選擇器
    id選擇器使用“#”進行標識始绍，后面緊跟id名
    
    語法：
    #id名{屬性1:屬性值; 屬性2:屬性值 屬性3:屬性值;}
    
    該語法中，id名即可為html元素的id屬性值话侄，大多數HTML元素都可以定義id屬性亏推，元素的id值是唯一的，只能對應
    于文檔中某一個具體的元素年堆，用法基本和類選擇器相同吞杭。
    
    
5,id選擇器和類選擇器的區(qū)別
    W3C標準規(guī)定，在同一個界面內变丧，不允許有相同名字的id對象出現芽狗，但是允許相同名字的class
    類選擇器好比身份證的人名。id選擇器好比身份證的身份證號碼痒蓬，只有一個

6童擎、通配符選擇器
    通配符選擇器用“*”號表示，他是所有選擇器中作為范圍最廣的攻晒，能匹配頁面中所有的元素顾复。
    
    *{屬性1:屬性值; 屬性2:屬性值 屬性3:屬性值;}
    
    例如下面的代碼，使用通配符選擇器定義css樣式鲁捏，清除所有HTML標記的默認邊框
    *{margin:0;}
    
    注意：
    認識就好芯砸，平時少用
    
7，偽類選擇器
    也是一個選擇器，偽類選擇器用于向某些選擇器添加特殊的效果假丧，
    比如：給鏈接添加特殊效果末购。
    
    偽類選擇器使用的是2個點 比如:  :link{}
    
    鏈接偽類選擇器
        :link  未訪問的鏈接 (點擊過后就會一直是已經訪問的鏈接狀態(tài))
        :visited 已訪問的鏈接
        :hover  鼠標移動到鏈接上的效果
        :active 選定的鏈接
        
        注意寫的時候，他們的順序盡量不要顛倒虎谢， 按照lvha的順序盟榴，記憶：love hate lv包好
        
8，結構(位置)偽類選擇器(css3 兼容性問題) 挑葫蘆娃
:first-child: 選取屬于其父元素的首個子元素的指定選擇器
:last-child: 選取屬于其父元素的最后一個子元素的指定選擇器
:nth-child(n): 匹配屬于其父元素的第N個子元素婴噩，不論元素的類型 even偶數 odd奇數 n 從0開始
:nth-last-child(n): 選擇器匹配屬于其元素的第N個子元素的每個元素擎场，不論元素的類型，從最后一個開始計算
                    n可以為數字几莽、關鍵字或公式
                    
目標偽類選擇器
:target 目標偽類選擇器 選擇器可用于選取當前活動的目標元素
配合錨點迅办，點擊定位之后目標的活動樣式修改

四、外觀屬性
color:文本顏色
1章蚣、預定義的顏色站欺，如 red greed blue等
2、十六進制纤垂，如 #FF0000 #FF6600 ,實際工作中矾策，十六進制是最常見的定義顏色的方式
3、RGB代碼峭沦，如紅色可以表示為rgb(255,0,0)或者rgb(100%,0%,0%)

    需要注意的是贾虽，如果使用RGB代碼的百分比顏色值，取值為0時也不能省略百分號吼鱼，必須寫上0%
    

line-height:行間距
    行與行之間的距離蓬豁，字符的垂直間距。一般稱為行高菇肃。
    屬性值有三種：px em 和百分比% 
         
text-align:水平對齊方式
    text-align屬性用于設置文本內容的水平對齊地粪，相當于html中的align對齊屬性
    left:左對齊
    right:右對齊
    center:居中對齊
    
text-indent:首行縮進
    text-indent屬性用于設置首行文本的縮進，其屬性值可為不用單位的數值琐谤，em字符寬度的倍數蟆技、或相對于
    瀏覽器窗口寬度的百分比%，允許使用負值笑跛，建議使用em作為設置單位付魔。
    
    1em尺寸相當于一個字的寬度聊品，
    

letter-spacing:字間距
    letter-spacing屬性用于定義字間距飞蹂，所謂字間距就是字符與字符之間的空白。屬性值可以
    用不同單位的數值翻屈，允許使用負數陈哑，默認為normal
    
word-spacing:單詞間距
    word-spacing屬性用于定義英文單詞之間的間距，對中文字符無效。和letter-spacing一樣惊窖，其屬性值可為不用
    單位的數值刽宪，允許使用負數，默認為normal

    word-spacing和letter-spacing均可對英文進行設置界酒。不同的是letter-spacing定義的字母之間的間距
    而word-spacing定義的是英文單詞之間的間距
    
    
word-break:自動換行

    normal:使用瀏覽器默認的換行規(guī)則
    break-all 允許在單詞內換行圣拄。
    keep-all只能在半角空格或連字符處換行。
    

顏色半透明(css3)：
文字顏色到了CSS3我們可以采取半透明的格式
color:rgba(r,g,b,a) a是alpha 透明的意思 取值范圍0~1之間 col or:rgba(0,0,0,0.3)


文字陰影(css3)
text-shadow:水平位置 垂直位置 模糊距離 陰影顏色毁欣；

對應屬性值：
h-shadow:必需庇谆。水平陰影的位置。允許負數
v-shadow:必需凭疮。垂直陰影的位置饭耳。允許負數
blur:可選。模糊距離
color:可選执解。陰影的顏色寞肖。

五、引入css樣式表(書寫位置)
1衰腌、行內模式(內聯(lián)樣式)
使用過標簽的style屬性設置元素的樣式新蟆，其基本語法格式如下
<標簽 style="屬性1:屬性值1;屬性2:屬性值2...">內容</標簽>
語法中style是標簽的屬性，實際上任何HTML標簽都擁有style屬性右蕊，用來設置行內式栅葡。
其中屬性和值的書寫規(guī)范與css樣式規(guī)則相同，行內式只對其所在的標簽及嵌套在其中的子標簽起作用

2尤泽、內部樣式表(內嵌式)
    內嵌式是將css代碼集中寫在HTML文檔的head頭部標簽中欣簇，并且用style標簽定義
    <head>
    <style>
        選擇器{屬性1:屬性值1;屬性2:屬性值2...}
    </style>
    </head>
    
    語法中，style標簽一般位于head標簽title標簽之后坯约，也可以把他放在html文檔的任何地方

3熊咽、外部樣式表(外鏈式)
    鏈入式是將所有的樣式放在一個或多個以.css為擴展名的外部樣式表文件中，通過link標簽將外部樣式表文件
    鏈接到HTML文檔中闹丐，其基本語法格式如下：
    <head>
    <link href="CSS文件的路徑" type="text/css" rel="stylesheet" />
    </head>
    
    注意：link是單標簽
    該語法中横殴，link標簽需要放在head頭部標簽中，并且必須指定link標簽的三個屬性卿拴，
    -herf:定義所鏈接外部樣式表文件的URL衫仑，可以是相對路徑，也可以是絕對路徑
    -type:定義所鏈接文檔的類型堕花，在這里需要指定為text/css文狱，表示鏈接的外部文件為css樣式
    -rel:定義當前文檔于被鏈接文檔之間的關系，在這里需要指定為"stylesheet",表示被鏈接的文檔是一個樣式表文件缘挽。

六瞄崇、標簽的顯示模式
html標簽一般分為塊標簽和行內標簽兩種類型呻粹，它們也稱塊元素和行內元素

1、塊級元素(block-level)
    每個標簽通常都會獨自占據一整行或多整行苏研，可以對其設置高度等浊、寬度、對齊等屬性摹蘑，常用于網頁布局和網頁結構的搭建
    <h1>~<h6><div><p><ol><ul><li>等
    
    塊級元素的特點：
    1筹燕、總是從新行開始
    2、高度衅鹿，行高庄萎，外邊距，以及內邊距都可以控制
    3塘安、寬度默認是容器的100%
    4糠涛、可以容納內聯(lián)元素和其他塊元素 
     
2、行內元素(inline-level)
    行內元素(內聯(lián)元素)不占有獨自的區(qū)域兼犯，僅僅靠自身的字體大小和圖像尺寸來支撐結構忍捡，一般不可以設置寬高
    高度，對齊等屬性切黔，常用于控制頁面中文本的樣式
    <span><a><strong><b><em><i><ins><u>等
    
    行內元素的特點：
    1砸脊、和相鄰行內元素在一行上。
    2纬霞、高凌埂、寬無效，但水平方向的paddin和margin可以設置诗芜，垂直方向的無效
    3瞳抓、默認寬度就是它本身內容的寬度
    4、行內元素只能容納文本或者其他行內元素
    
    注意：
        1伏恐、只有文字才能組成段落 因此p里面不能放塊級元素孩哑，同理還有這些標簽h1~h6,dt
            他們都是文字類塊級標簽，里面不能放其他塊級元素
        2翠桦、鏈接里面不能再放鏈接
    
3横蜒、行內塊元素(inline-block)
    在行內元素中有幾個特殊的標簽<img /><input /><td>可以對他們設置和對齊屬性，有些資料可能會稱它們?yōu)樾袃葔K元素
    
    行內塊元素的特點：
        1销凑、和相鄰行內元素(行內塊)在一行上丛晌，但是之間會有空白縫隙。
        2斗幼、默認寬度就是它本身內容的寬度
        3澎蛛、高度，行高孟岛，外邊距以及內邊距都可以控制

4瓶竭、標簽顯示模式轉換 display
    塊轉行內：display：inline
    行內轉塊：display:block
    塊、行內元素轉換為行內塊：display：inline-block
    此階段渠羞，我們只需關心這三個斤贰。后面再學

七，css復合選擇器
復合選擇器是由兩個或者多個基礎選擇器次询，通過不同的方式組合而成的荧恍，目的是為了可以選擇
更準確更精細的目標元素標簽

1、交集選擇器
    交集選擇器由兩個選擇器構成屯吊，其中第一個為標簽選擇器送巡，第二個為class選擇器，兩個選擇器之間不能
    有空格盒卸，如h3.special
    
    h3.class{color:red; font-size:25px;}
    h3:標記選擇器
    class:類別選擇器
    
    技巧：
    交集選擇器是并且的意思骗爆。即...又...的意思？蔽介？摘投？
    比如：p.one 選擇的是：類名為.one的段落標簽
    用的相對來說比較少，不建議使用
    
    注意：第一個是標簽選擇器虹蓄，第二個是class選擇器
    
    
2犀呼、并集選擇器(css選擇器分組)
    是各個選擇器通過逗號連接而成的，任何形式的選擇器(包括標簽選擇器薇组，class選擇器外臂，id選擇器)
    都可以作為并集選擇器的一部分，如果某些選擇器定義的樣式完全相同律胀，或部分相同宋光，就可以利用
    并集選擇器為它們定義相同的css樣式
    
    .class,h3{ 屬性1:屬性值1; 屬性2:屬性值2;}
    
    例子：
        p,div,h1{
            color: orange;
        }
        
    技巧：
    并集選擇器的意思，就是說炭菌，只要逗號隔開的跃须，所有選擇器都會執(zhí)行后面樣式
    比如：.one,p,#test{...}表示 .one和p 和 #test這三個選擇器都會執(zhí)行顏色為紅色，
    
    注意：是使用逗號隔開的娃兽。
    
3菇民、后代選擇器
    后代選擇器又稱為包含選擇器，用來選擇元素或元素組的后代投储，其寫法就是把外層標簽寫在前面
    內層標簽寫在后面第练，中間用空格分隔，當標簽發(fā)生嵌套時玛荞，內層標簽就成為標簽的后代
    
    .class h3{...;....;}
    .class 類別選擇器
    h3 標簽選擇器
    
    子孫后代都可以這么選擇娇掏，或者說，它能選擇任何包含在內的標簽勋眯。
    
    
    實例：
        .nav ul li{
            color: orange;
        }
    
    注意：是使用空格隔開的
    

4婴梧、子元素選擇器
    子元素選擇器只能選擇作為某元素子元素的元素下梢。其寫法就是把父級標簽寫在前面，子級標簽
    寫在后面塞蹭，中間跟一個 > 進行連 接孽江，注意，符號左右兩側各保留一個空格
    
    .class > h3 {....;....;}

    這里的子 值的是 親兒子 不包括孫子 重孫子之類
    
    比如：.demo > h3{....} h3一定是demo親兒子番电，demo元素包含著h3.
    
    注意：在指定顏色時候岗屏，它爺給它爹指定顏色，但是它兒子沒有顏色時會使用上它爹的顏色漱办，
            這是應該給個顏色給它兒子这刷，再讓它爺給它爹指定顏色。
            
            是使用 > 隔開的,符號兩邊要給空格
    
    
    



5娩井、屬性選擇器
    選取標簽帶有某些特殊屬性的選擇器暇屋，對齊進行修改
    
    選擇器名[]{}//屬性選擇器用中括號來表示
    
    E[attr]{}  存在attr屬性即可設置css
    E[attr=val]{} 屬性值完全等于val
    E[attr*=val]{} 屬性值里包含val字符 并且在任意位置
    E[att^val]{}  屬性值里包含val字符 并且在開始位置 
    E[attr$=val]{} 屬性值包含val字符并且在結束位置
    
        
6、偽元素選擇器(CSS3)
    區(qū)分：
        .demo 類選擇器
        :demo 偽類選擇器
        ::first-letter 偽元素選擇器
        

    1洞辣，E::first-letter 文本的第一個單詞或字(如中文率碾，日文，韓文)
    
    2屋彪，E::first-line 文本第一行
    
    3所宰，E::selection 可改變選中文本的樣式
    
    重要：
    在E元素內部的開始位置和結束位創(chuàng)建一個元素，該元素為行內元素畜挥，且必須要結合content屬性使用仔粥。
    4，E::befor{content:"w";} 
    5蟹但，E::after{content:"e";}
    則插入W在前面躯泰，E插入在后面

八、背景
1华糖、簡單介紹
background-color:pink;
background-image:url(image/xx.jpg);
background-repeat:no-repeat;//默認平鋪

    1麦向、利用方位名詞 修改背景圖片的位置
        background-position:left top;
        ..
        方位名詞沒有順序
        方位名詞只有一個時，另外一個默認為居中
    
    2客叉、精確單位诵竭，第一個值是X坐標，第二個值是Y坐標
    
        background-position:10px 30px;
        
    3兼搏、混搭使用
        backgrounp-position:10px center;


2卵慰、背景附著
    background-attachment:scroll | fixed
    
    scroll: 背景圖像是隨對象內容滾動
    fixed: 背景圖像固定
    
    說明：
    設置或檢索背景圖像是隨對象內容滾動還是固定的
    
    
3、背景簡寫
    background 屬性的值的書寫順序官方并沒有強制標準的佛呻，為了可讀性裳朋，建議如下寫法
    background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置
    background:transparent url() repeat-y scroll 50% 0;
    

4、背景透明(CSS3)
    background:rgba(0,0,0,0.3);
    
    最后一個參數是alpha透明度 取值范圍0-1之間
    注意：背景半透明是指盒子背景半透明吓著，盒子里面的內容不受影響
    同樣鲤嫡，可以給文字和邊框透明 都是rgba的格式來寫送挑。

5、背景大小縮放
    通過background-size設置背景圖片的尺寸
    1暖眼、可以設置長度單位px或百分比
    2惕耕、設置cover時，會自動調整縮放比例罢荡，保證圖片始終填充滿背景區(qū)域赡突，如有溢出部分对扶，則會被隱藏
    3区赵、設置為contain會自動調整縮放比例，保證圖片始終完整顯示在背景區(qū)域
    
    background-size:300px 100px;
    
    
6浪南、多背景
    以逗號分隔可以設置多背景笼才，可用于自適應布局

    background-image:url(...),url(...);
        
    注意：
        如果設置的多重背景圖之間存在著交集(即存在著重疊關系)，前面的背景圖會覆蓋在后面的背景圖之上
        為了避免背景色將圖像蓋住络凿，背景色通常都定義在最后一組上
        
7骡送、凹凸文字
    文本修飾
    text-decoration 通常我們用于文字修改裝飾

九、css三大特性
1絮记、css層疊性
指多種css樣式的疊加
比如先給某一個標簽指定了內部文字顏色為紅色摔踱，接著又指定了顏色為藍色，此時出現一個標簽指定了相同樣式不同值的情況怨愤，
這就是樣式沖突

    如果出現樣式沖突派敷，則會按照css書寫的順序，以最后的樣式為準

2撰洗、css繼承性
    繼承性是指書寫css樣式時篮愉，子標簽會繼承父標簽的某些樣式，如文本顏色和字號差导，想要設置一個可繼承的屬性试躏，
    只需將它應用于父元素即可
    
    跟文字有關系的會繼承，其他的一般不會去繼承
    
3设褐、css優(yōu)先級
    css權重上枕，css specificity 用于衡量css值優(yōu)先級
    specificity用一個四位的數來表示，值從左到右巫湘，左邊最大
    標簽選擇器       0,0,0,1
    類粘衬、偽類        0,0,1,0
    ID選擇器       0,1,0,0
    行內樣式        1,0,0,0
    
    !important      無窮大
    
    權重可以疊加
    比如：標簽選擇器 + 標簽選擇器 = 0,0,0,2

十、盒子
網頁編寫就是盒子擺放的過程

1貌笨、邊框
    語法：
    border：border-width || border-style || border-color
    
    邊框屬性-設置邊框樣式(border-style)
    none:沒有邊框弱判、忽略所有邊框的寬度(默認值)
    solid：邊框為單實線(最為常用)
    dashed:虛線
    dotted:邊框為點線
    

2、表格的細線邊框
    table{border-collapse:collapse}
    這個表示邊框合并在一起
    

    
3锥惋、圓角邊框
    border-radius:左上 右上 右下 左下(順時針)4個值
    
    border-radius:左上&右下 右上&左下(對角線)2個值
    
    border-radius:左上  右上&左下 右下(Z之字型)3個值
    
    注意：可以取百分比值
    
4昌腰、內邊距
    padding:上下左右            一個值
    padding:上下 | 左右         兩個只
    padding:上 | 左右 | 下      三個值
    

5开伏、外邊距
    
    和外邊距值設置一致

    外邊距實現盒子居中
    可以讓一個盒子實現水平居中，需要滿足以下兩個條件
    1遭商、必須是塊級元素
    2固灵、盒子必須指定了寬度
    
    然后下面帶代碼就可以使塊級元素水平居中
    
    選擇器{ width：xxpx;margin:0 auto;}
    
6、文字水平居中 與 盒子水平居中的區(qū)別
        
    文字居中是通過：
    text-align:center;
    
    盒子水平居中：
    margin:0px auto;
    
7劫流、插入圖片和背景圖片的區(qū)別
    
    插入圖片其實就是一個盒子巫玻，修改高寬控制大小
    
    背景不會占位置，
    控制大小需要通過
    background-size：xxpx xxpx祠汇；
    更改位置通過
    background-position:
    
8仍秤、清除元素的默認邊框
    瀏覽器的默認border有默認的8px的外邊距
    body,ul,li {margin:0;padding:0;}
    全部清零內外邊距
    

9、行內元素沒有上下內邊距可很，只有左右內邊距
    

10诗力、外邊距合并
    使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合并我抠。

11苇本、相鄰塊元素垂直外邊距的合并
    當上下相鄰的兩個塊元素相鄰時，如果上面的元素有下邊距margin-bottom
    下面的元素有上邊距margin-top,則他們之間的垂直間距不是margin-bottom
    與margin-top之和菜拓，而是兩者中的較大值瓣窄。這種現象被稱為相鄰塊元素垂直外邊距的合并

12、父子級元素外邊距合并
    嵌套關系的塊元素纳鼎，如果父元素沒有上內邊距以及邊框俺夕，則父元素的上邊距會
    與子元素的上外邊距發(fā)生合并，合并后的外邊距為兩者中的較大者喷橙，即使父元素的
    上外邊距為0啥么，也會合并
    
    解決：
        可以為父元素定義1像素的上邊框或上內邊距
        可以為父元素添加overflow:hidden.
    
    
13、盒子的計算尺寸
    盒子尺寸= 寬|高 + border + padding + margin贰逾；
    控件尺寸= 寬|高 + border + padding悬荣；
    
14、設置padding不影響盒子大小
    如果一個盒子沒有寬度疙剑，則padding不影響寬度
    如果一個盒子沒有給定寬度/高度或者繼承父親的寬度/高度氯迂，則padding不會影響本盒子大小
    

15、盒子模型的穩(wěn)定性
    使用盒子布局的優(yōu)先級
    width -> padding -> margin
    
    原因：
        1言缤、margin會有外邊距合并還有ie6下面margin加倍的bug
        2嚼蚀、padding會影響盒子大小，需要進行加減計算


    
16管挟、css3盒模型(標準的idth+padding+border 或者是固定的)
    CSS3中通過box-sizing來指定盒模型轿曙，即可指定為content-box,border-box,
    這樣計算盒子大小的方式就發(fā)生了改變
    
    1、box-sizing:content-box 盒子大小為width+padding+border 即為默認值
    2、box-sizing:border-box 盒子大小為width 就是說padding和border是包含在width里面的
    
    注意：上面標注的width值的是CSS屬性里設置的width:length content的值是會自動調整的

17导帝、盒子陰影
    box-shadow:水平位置 垂直位置 模糊位置 陰影尺寸 陰影顏色 內/外陰影
    
    1守谓、前兩個屬性時必須的、其余的可以省略
    2您单、外陰影(outset),默認是outset斋荞，但不要編寫，寫了沒有陰影效果
        內陰影可以寫上 inset

十一虐秦、浮動
元素排列方式有3種：普通流 浮動 定位

普通流
    實際上就是網頁內標簽元素正常的從上到下平酿，從左到右排列順序

浮動的定義：
    元素的浮動是指設置了浮動屬性的元素會脫離標準流的控制，移動到其父元素中指定位置的過程
浮動的通俗定義：
    指元素漂浮起來悦陋，不受標準流的限制蜈彼，漂浮在標準流的上面，壓住標準流
    屬性值：
        left   元素向左浮動
        right  元素向右浮動
        none   元素不浮動
        
浮動特性(**************************)：
    1叨恨、浮動元素總是找離他最近的父級元素對齊柳刮，不會超出內邊距挖垛，邊框的范圍
    2痒钝、塊級元素添加浮動之后，具有行內塊的特性(包裹痢毒、但是可以設置大小)
    3送矩、行內元素添加浮動之后，具有行內塊的特性
    注意行內塊的特性哪替，一行可以放多個栋荸，有寬度和高度，盒子的大小是有內容決定
    
浮動的元素位置
    跟上一個元素凭舶，也就是晌块，如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊帅霜，如果上一個元素時標準流
    則A元素的頂部會和上一個元素的底部對齊

浮動的目的匆背，就是為了讓多個元素同一行上顯示

總結：
    1、加了浮動的元素盒子是浮起來的身冀，也就是漂浮在其他的標準流的盒子
    2钝尸、加了浮動的盒子，不占位置搂根，它浮起來珍促，原來的位置被下一個其他標準流的盒子占有
    3、浮動的盒子需要和標準流的父級搭配使用剩愧，其次特別的注意浮動可以使元素顯示模式體現為行內塊特性
    
    
清除浮動：
    目的：為了解決父級元素因為子級浮動引起內部高度為0的問題
    在某種情況下猪叙，父級元素沒有設置高度，而子級元素又設置浮動，子級元素就會脫離標準流穴翩，這時導致父級元素的
    高度變?yōu)?(標準流中成洗，父級元素沒有設置高度時會根據子級元素的大小撐開高度，也就是包裹內容)
    
清除浮動的方法：
    其實本質可以稱之為閉合浮動
    清除浮動就是把浮動的盒子圈到里面藏否，讓父盒子閉合出口和入口不讓他們出來影響其他元素
    
    clear屬性用于清除浮動瓶殃，其基本語法格式
    left  不允許左側有浮動元素(清除左側浮動的影響)
    right 不允許右側有浮動元素(清除右側浮動的影響)
    both  同時清除左右兩側浮動的影響
    
    額外標簽法
    是W3C推薦的做法是通過在浮動元素末尾添加一個空標簽
    例如<div style="clear:both"></both>
    
    父級添加overflow屬性方法
    觸發(fā)BFC方式，可以實現清除浮動效果
    給父級添加 overflow為hidden|auto|scroll 都可以實現
    
    after偽元素清除浮動
    :after方式為空元素的升級副签，好處是不用單獨添加標簽
    
    使用方法
        .clearfox:after{ content:".";display:block;height:0;clear:both;visibility:hidden; }
        .clearfix{*zoom:1;}/* IE6遥椿、7專有 */
        
    使用before 和 after 雙偽元素清除浮動(標準寫法)
    使用方法：
    .clearfix:before, .clearfix:after{
        content: "";
        display: table;
    }

    .clearfix:after{ 
        clear: both;
    }
    .clearfix{
        *zoom:1;
    }

十二、版心和布局流程
版心：
版心是指網頁中主體內容所在的區(qū)域淆储。一般在瀏覽器窗口中水平居中冠场，常見的寬度為960px 980px 1000px 1200px等

布局流程：
1、確認界面的版心(可視區(qū)域)
2本砰、分析頁面中的行模塊碴裙，以及每個行模塊中的列模塊
3、制作HTML頁面点额，CSS文件
4舔株、CSS初始化，然后開始運用盒子模型的原理还棱，通過DIV+CSS布局來控制網頁的各個模塊

十三载慈、定位
元素的定位屬性主要包括定位模式和邊偏移兩個部分
top 頂部偏移量，定義元素相對于其父元素上邊線的距離
bottom 頂部偏移量珍手，定義元素相對于其父元素下邊線的距離
left 頂部偏移量办铡，定義元素相對于其父元素左邊線的距離
right 頂部偏移量，定義元素相對于其父元素右邊線的距離

也就是以后定位要和這邊偏移值搭配使用了琳要，比如top:100px 寡具； left:30px 等等

1、定位模式
    在css中稚补，position屬性用于定義元素的定位模式童叠，其基本語法格式如下，
    選擇器{position:屬性}
    
    position屬性的常用值：
    static 自動定位 網頁中所有的標簽都是靜態(tài)定位的（默認靜態(tài)）（對偏移無效的）
            (一般用來清除定位孔厉，原來定位的盒子拯钻，不想加定位了，可以加上這個撰豺。）
            
    relative 相對定位粪般，相對于其原文檔流的位置進行定位
            （自戀型 相對于自己移動 相對定位是不脫離標準流）
    absolute 絕對定位，相對于其上一個已經定位(有定位相對定位和絕對定位)的父元素進行定位
            （拼爹型  完全脫標的污桦，是不占位置的）
            （父元素沒有定位亩歹，子元素以瀏覽器為基準對齊）
            
            子絕父相：
                    1，相對定位  占有位置，不脫標
                    2小作，絕對定位  不占有位置  脫標
            
            
    fixed  固定位置亭姥，相對于瀏覽器窗口進行定位
            (固定定位，完全脫標顾稀，不占用位置 固定定位一定要給寬高)
            
    

    
    絕對定位實現水平/垂直居中：
        普通的盒子是左右margin 改為auto即可达罗，但是對于絕對定位就是無效了
        
        定位的盒子也可以水平或者垂直居中，有一個算法（比如垂直居中）
        1静秆，首先left偏移父元素寬度的一半的值(也可以設置為50%)
        2,然后left邊距 設置為自己寬度負一半的值
        這樣就居中啦
        
        
2粮揉、z-index （疊放次序）
    當對多個元素同時設置定位時，定位元素之間有可能會發(fā)生重疊抚笔。
    
    想調節(jié)重疊順序扶认，可以對定位元素應用z-index層疊等級屬性，其取值可為正整數殊橙、負數辐宾、0
    
    注意：
        1，z-index的默認值是0膨蛮，取值越大叠纹，定位元素在層疊元素中越居上
        2，如果取值相同鸽疾，則根據書寫順序吊洼，后來居上
        3训貌，后面數字一定不能加單位
        4制肮，只有相對定位，絕對定位递沪，固定定位有此屬性豺鼻，其余標準流，浮動款慨，靜態(tài)定位都無此屬性儒飒，亦不可指定此屬性。
    

定位總結：
                    是否脫標占有位置            是否可以使用邊偏移           移動位置基準
                    
靜態(tài)static            不脫標檩奠、正常模式            不可以                     正常模式    
相對定位relative    不脫標桩了、占有位置            可以                      相對自身位置移動
絕對定位            完全脫標，不占用位置      可以                      相對于定位父級移動位置
固定定位            完全脫標埠戳，不占用位置      可以                      相對于瀏覽器移動位置



定位模式轉換：
    跟浮動一樣井誉，元素添加了 絕對定位和固定定位之后，元素模式就會發(fā)生轉換整胃，都轉為行內塊模式
    因此颗圣，比如行內元素(行內元素不可以設置寬高)如果添加了絕對定位或者固定定位之后，可以不用轉換模式，直接給高度和寬度就可以了

十四在岂、元素的顯示與隱藏

1奔则、display：
    none:隱藏對象 (與它相反的是display：block 除了轉換為塊級元素之外，同時還有顯示元素的意思蔽午。)
            隱藏之后易茬，不再保留位置。
    
2及老、visibility 可見性
    visible: 對象可見
    hidden：對象隱藏
    
    特點：隱藏之后疾呻，繼續(xù)保留原有位置。

3写半、overflow 溢出
    檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容
    visible: 不剪切內容也不添加滾動條
    hidden:不顯示超過對象尺寸的內容岸蜗，超出的部分隱藏掉
    
    auto:超出自動顯示滾動條，不超出不顯示滾動條
    scroll: 不管超出內容否叠蝇，總顯示滾動條

十五璃岳、用戶界面樣式
所謂的界面樣式，就是更改一些用戶操作的樣式悔捶，比如 更改用戶的鼠標樣式铃慷，表單輪廓等，但是比如滾動條的樣式改動受到了很多瀏覽器的
抵制蜕该，因此我們就放棄了犁柜，防止表單域拖動

1、cursor ： default 小白 pointer 小手  move移動 text 文本
    就是鼠標放在身上查看效果
    
    盡量不要用hand 因為 火狐不支持堂淡，pointer ie6以上都支持
    
2馋缅、輪廓 outline
    (表單的輪廓)
    是繪制于元素周圍的一條線，位于邊框邊緣的外緣绢淀，可起到突出元素的作用
    outline：outline-color || outline-style || outline-width
    
    如果不想設置：outline：0  或者 outline：none;
    <input type="text" style="outline:0" />
    
3萤悴、防止拖拽文字域resize
    resize:none 這個單詞可以防止 火狐、谷歌等瀏覽器隨意的拖動 文本域皆的。
    outline：none 取消輪廓線
    
    右下角默認可以拖拽：
    <textarea></textarea>
    
    右下角不可以拖拽
    <textarea style="resize:none;"></textarea>
    
4覆履、vertical-align 垂直對齊
    以前帶有寬度的塊級元素居中對齊，是margin：0 auto
    
    文字居中對齊：text-align:center;
    
    vertical-align ：baseline | top  | middle | bottom
    
    設置或者檢索對象內容的垂直對齊方式费薄。
    vertical-align 不影響塊級元素中的內容對齊硝全，它只針對于行內元素或者行內塊元素，特別是行內塊元素楞抡，通常用來控制圖片和表單文字的對齊伟众。
    vertical-align 主要控制圖片和文字的垂直關系，默認的圖片會和文字基線對齊 
    
    
5拌倍、去除圖片底側空白縫隙
    圖片和表單等行內塊元素赂鲤，他的底線會和父級盒子基線對齊噪径，這樣會造成圖片底側會有空白縫隙
    
    解決方法：
        1.轉換成塊級元素
        2.給img vertical-align:middle | top 等等，讓圖片不要和基線對齊
    
    
    
6数初、溢出的文字隱藏
    1.word-break:自動換行
        normal 使用瀏覽器默認的換行規(guī)則
        break-all 允許在單詞內換行 （wudalao 拆成 wuda  lao）
        keep-all  只能在半角空格或連字符處換行(和默認差不多)
        主要處理英語單詞
    
    2.while-space: 設置或檢索對象內文本顯示方式找爱。通常我們使用于強制一行顯示內容
        normal:默認處理方式
        nowrap:強制在同一行內顯示所有文本，直到文本結束或者遭遇br標簽對象才換行泡孩。
    
    3车摄，text-overflow 文字溢出
    text-overflow:clip | ellipsis
    設置或檢索是否使用一個省略標記（...） 表示對象內文本溢出
    clip:不顯示省略號，而是簡單的裁切
    ellipsis: 當對象內文本溢出時顯示省略標記(...)
        
    注意：要先強制一行顯示仑鸥，while-space:nowrap; 還有text-overflow:hidden 一起使用才有效果

十六吮播、css精靈技術（sprite） 小妖精

網頁向服務器請求背景圖像作為修飾，當網頁中的圖像過多時眼俊，服務器就會頻繁地接受和發(fā)送請求意狠，降低頁面的加載速度。
為了減少服務器接受和發(fā)送請求的次數疮胖，提高頁面的加載速度环戈，出現了CSS精靈技術(也稱為CSS Sprites,css雪碧)

精靈技術本質
所謂的CSS精靈是一種處理網頁背景圖像的方式，它將一個界面涉及到的所有零星背景圖像都集中到一張大圖中去澎灸，
然后將大圖應用于網頁院塞，這樣當用戶訪問該界面時，只需向服務器發(fā)送一個請求性昭，網頁中的背景圖像即可全部展示出來拦止。
這個由很多小背景圖像合成的大圖被稱為精靈圖

使用：
    網頁元素只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖糜颠，就需要使用CSS的backgroud-image汹族、background-repeat和background-position屬性進行背景定位
    其中最關鍵的是使用background-position屬性精確的定位。

十七括蝠、字體圖標
大圖不但增加了總文件的大小鞠抑，還增加了很多額外的網絡請求，而且不能很好的進行縮放忌警，圖片放大和縮小會失真，這時候就可以使用“字體圖標”了

字體圖標的優(yōu)點：
可以做出和圖片一樣可以做的事情秒梳，改造透明度法绵、旋轉度等
本質上其實就是文字，可以很隨意的改變顏色酪碘、產生陰影朋譬、透明效果等等
本身體積很小，但攜帶的信息并沒有削減兴垦。
幾乎支持所有的瀏覽器
移動端設備可以使用

1徙赢、字體圖標使用流程
    1.UI人員設計字體圖標的效果圖(SVG)
    2.前端人員上傳生成兼容字體文件包
    3.前端人員下載兼容字體文件包到本地
    4.把字體文件引入到HTML界面中
    
    上傳生成字體包
    http://icomoon.io
    http://www.iconfont.cn

十八字柠、滑動門(文本自動撐開容器)
為了使各種形狀的背景能夠自適應元素中文本內容的多少，出現了css滑動門技術狡赐。使各種特殊形狀的背景能夠自由拉伸滑動窑业，以適應元素內部的文本，可用性更強枕屉。最常見于各種導航欄的滑動門

核心技術
    核心技術就是利用CSS精靈（主要是背景位置）和盒子padding撐開寬度常柄，以便能適應不用字數的導航欄
    
布局：
    <li><a herf="#"><span>導航欄內容</span></a></li>

總結：
    1，a 設置背景左側搀擂，padding撐開合適寬度
    2西潘，span設置背景右側，padding撐開合適寬度剩下由文字繼續(xù)撐開寬度
    3哨颂，之所以a包含span就是因為 整個導航都是可以點擊

十九喷市、before 和 after偽元素(詳解)
之所以稱之為偽元素，是因為它們不是真正的界面元素威恼，html沒有對應的元素东抹，但是其所有用法和表現行為與真正的界面元素一樣，
可以對其使用諸如頁面元素一樣的css樣式

注意：
1沃测，偽元素：before和after添加內容默認是inline元素缭黔，這兩個元素的content屬性，表示偽元素的內容設置：befroe和:after是必須設置content屬性蒂破，否則不起作用
2馏谨，偽元素是不占位置的。

注意區(qū)分偽元素選擇器附迷，和偽類選擇器 例如：偽類 :hover   偽元素::before

二十惧互、過渡(CSS3)
transition 過渡效果實現補間動畫

transition：要過渡的屬性   花費時間    運動曲線    何時開始
如果是多組屬性變化，還是用逗號隔開喇伯。


屬性：
    transition： 簡寫屬性喊儡，用于在一個屬性中設置四個過渡屬性
    transition-property：    規(guī)定應用過渡的CSS屬性名稱
    transition-duration：    定義過渡效果花費的時間 默認0 單位是秒 s 比如:0.5s 這個s必須要寫
    transition-timing-function：規(guī)定過渡效果的時間曲線。默認是ease  (linear：均速 ease：緩慢下來 ease-in：加速 ease-out：減速 ease-in-out：先加速后減速)
    transition-delay        規(guī)定過渡效果何時開始稻据。默認是0

例子：         transition: width 0.5s ease-out 0s;


如果想要多個屬性都變化艾猜，寫個all就可以

    
2，2D變形
    translate：水平移動
    1捻悯、translate(x匆赃，y) 水平居中方向和垂直方向同時移動(也就是)
    2、translate(x) 僅水平方向移動(X軸移動)
    3今缚、translate(Y) 僅垂直方向移動(Y軸移動)
    
    transform：translate(50%); //走自己的一半寬度
    transform：translate(100px); //走100px
    
    rotate(deg),旋轉角度
    
    
3,transform-origin:可以調整元素轉換變形的原點

比如：
    div{transform-origin:left top;transform:rotate(45deg);}//改變元素原點到左上角算柳，然后進行順時針旋轉45度
    
如果是4個角，可以用left top 這些姓言，如果想要精確的位置瞬项，可以用px像素
    div{transform-origin:10px 10px;transform:rotate(45deg);}
    
4蔗蹋，rotateX() 沿著X軸旋轉
   rotateY() 沿著Y軸旋轉
   rotateZ() 沿著Z軸旋轉



5、3D
    x坐標 左邊是負的 右邊是正的
    y坐標 上邊是負的 下邊是正的
    z坐標 里面是負的  外邊是正的
    
    
6囱淋、透視
    透視可以將一個2D平面猪杭，在轉換的過程中，呈現3D效果
    
    
        原理：近大遠小
        瀏覽器透視：將近大遠小的所有圖像绎橘，透視在屏幕上
        perspective：視距胁孙，表示視點距離屏幕的長短，視點称鳞，用于模擬透視效果是人眼的位置
        
        
    perspective：500px 視距越小鸥诽，效果越明顯（給父容器添加視距效果）
        
    
    transform：translate3d(x,y,z); x 和y可以是px或者% z只能是px;
    
7覆旭、兩面翻轉
    兩個盒子重合，前面翻轉180度隱藏掉，后面的接著翻轉180度可見
    
    backface-visibility:hidden;不是正面則隱藏

二十一祖驱、動畫(animation)
語法格式：
animation:動畫名稱 動畫時間 運動曲線 何時開始 播放次數 是否反方向

    css3 動畫屬性
        @keyframes          規(guī)定動畫
        animation           所有動畫屬性的簡寫屬性茶没，除了animation-play-state 屬性
        animation-name      規(guī)定@keyframes 動畫名
        animation-duration  規(guī)定動畫完成一個周期所花費的秒或毫秒秒咨。默認是0
        animation-timing-function 規(guī)定動畫的速度曲線稚瘾。默認是 ease
        animation-delay     規(guī)定動畫何時開始
        animation-iteration-count 規(guī)定動畫被播放的次數 默認是1
        animation-direction 規(guī)定動畫是否在下一周期逆向地播放 默認 normal （normal 正常方向 reverse 反方向運行 alternate 動畫先正常運行再反方向運行，并持續(xù)交替運行
                                                                            alternate-reverse 先方向運行周霉，再正方向運行掂器，并持續(xù)交替）
        animation-play-state 規(guī)定動畫是否正在運行或暫停，默認是running
        animation-fill-mode  規(guī)定對象動畫時間之外的狀態(tài)
            
        
        
    @keyframes 動畫名稱{ form{} to{}}           ->定義動畫
    
    transform：translate rotate 俱箱；多組變形 

二十二国瓮、伸縮布局
主軸：Flex容器的主軸主要用來配置Flex項目，默認是水平方向
側軸：與主軸垂直的軸稱為側軸狞谱，默認是垂直方向
方向：默認主軸從左到右乃摹，側軸默認從上到下

主軸和側軸并不是固定不變的，通過flex-direction可以互換

使用：
類似weight
在父容器中定義 display：flex;

在子容器中定義 flex：1, 平分  或者在子容器中的各個子容器設置平分的值 
1,2,1 中間的2就是占2/4 的大小

設置最大最小值
min-width:
max-width：
保證盒子被擠壓或者拉伸太厲害

如果固定其中的子盒子的寬度跟衅，其他設置了flex的值孵睬，則會固定盒子之后剩下的大小進行劃分


flex-direction: column;//row 是水平方向  column 是垂直方向

二十三、 調整對齊對齊方式
主要控制容器內子元素的對齊方式伶跷。

1掰读、 justify-content (水平對齊)
    flex-start 默認值。項目位于容器的開頭撩穿，讓子元素從容器的開頭排序       白話：讓子元素從父容器的開頭開始排序
    flex-end 項目位于容器的結尾磷支。白話：讓子元素從父容器的后面開始排序
    center  項目位于容器的中心。白話：讓子元素在父容器中間顯示
    
    space-between 項目位于各行之間留有空白的容器內  白話：左右的盒子貼近父盒子食寡，中間平均分布空白間隙
    space-around 項目位于各行之前、之間廓潜、之后都留有空白的容器內    白話：相當于給每一個盒子添加了左右margin外邊距


2抵皱、  align-items 調整側軸對齊,(上面相當于水平對齊善榛，這個相當于垂直對齊)
    和上面的屬性類似
    stretch：默認值。項目被拉伸以適應容器 白話：讓子元素的高度拉伸適用父容器(子元素不給高度的情況下)
    
    
    
3呻畸、  flex-wrap 控制是否換行
    nowrap 默認值移盆。規(guī)定靈活的項目不拆行或不拆列。不換行伤为，則收縮 顯示
    wrap 規(guī)定靈活的項目在必要的時候拆行或拆列
    wrap-reverse：規(guī)定靈活的項目在必要的時候拆行或拆列咒循，但是以相反的順序 (翻轉)
    
    
    
4、  align-content 堆棧(由flex-wrap產生的獨立行)對齊
    針對flex容器里面多軸(多行)的情況绞愚，align-items是針對一行情況下進行排列叙甸。
    
    必須對父元素設置自由盒屬性display:flex;并且設置排列方式為橫向排列flex-direction:row;并且設置換行，flex-wrap:wrap;
    這樣設置才會起作用（flex-flow: row wrap;）注意位衩，是在多行的情況下才會起作用裆蒸；
    stretch：拉伸以適應容器
    center:
    flex-start
    flex-end
    space-between
    space-around
    
    
    flex-flow是flex-diraction、flex-wrap的簡寫形式（flex-flow: row wrap;）
    
5糖驴、 order控制子項目的排列順序僚祷，正序方式排序，從小到大
    對排列的順序進行排序
    order: 1;(數值越小越往前)

二十四贮缕、BFC(塊級格式化上下文) 就是一個封閉的區(qū)域
BFC他是一個獨立渲染的區(qū)域辙谜，只有Block-level box參與，它規(guī)定了內部的Block-level Box如何布局感昼，并且與這個區(qū)域外部毫不相干
里面的盒子浮動装哆，都不會對外部盒子有影響

1、display 屬性為block list-item table 的元素抑诸，會產生BFC

2烂琴、產生BFC的條件(塊級元素才具有BFC特性)
    float 屬性不為none
    position為absolute 或fixed
    display為inline-block,table-cell table-caption flex inline-flex
    overflow不為visible   
    
3、BFC布局規(guī)則特性
    1蜕乡，在BFC中奸绷，盒子從頂端開始垂直地一個接一個地排列
    2，盒子垂直方向的距離由margin決定层玲，屬于同一個BFC的兩個相鄰盒子的margin會發(fā)生重疊
    3号醉，在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣（border-left）（對于從右到左的格式來說辛块，則觸碰到右邊緣）
    4畔派，BFC的區(qū)域不會與浮動盒子產生交集，而是緊貼浮動邊緣
    5润绵，計算BFC的高度時线椰，自然也會檢測浮動的盒子高度
    
    它是一個獨立的渲染區(qū)域，只有Block-level box參與尘盼，他規(guī)定了內部的Black-level Box如何布局憨愉，并且與這個區(qū)域外部毫不相干0

4烦绳、作用(常用 overflow：hidden)
    可以清除內部元素的浮動
    解決外邊距合并問題
    制作右側自適應

二十五、補充知識
漸進增強 progressive enhancement
針對低版本瀏覽器進行構建頁面配紫，保證最基本的功能径密，然后在針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
類似爬山躺孝，由地處往高處爬

優(yōu)雅降級
一開始就構建完整的功能享扔，然后再針對低版本瀏覽器進行兼容
類似蹦極，由高往低處下落

瀏覽器前綴
-webkit-            google chrome safari android browser
-moz-               firefox
-o-                 opera
-ms-                internet explorer,edge
-khtml-             konqueror

背景漸變
背景漸變有很嚴重的兼容問題植袍，需要加上前綴進行兼容
background：-webkit-linear-gradient(起始位置惧眠，起始顏色，結束顏色)
background：-webkit-linear-gradient(起始位置奋单，顏色 位置锉试，顏色位置)(top，red 0%,greed 20%,red 100%)

瀏覽手機等html顯示地址：www.csstats.com
W3C統(tǒng)一驗證工具：http://validator.w3.org/unicorn/
css壓縮 http://tool.chinaz.com/Tools/CssFormat.aspx 或者 http://tool.chinaz.com/Tools/CssFormat.aspx


轉換ico圖標 http://www.bitbug.net/
<!-- 引入ico圖標 1览濒，他不是iconfont字體 2呆盖，位置是放到head標簽中間 3，后面type=image/x-icon 4,為了兼容要將favicon.ico這個圖標放在根目錄-->
<!-- 這個寫法基本上所有的網站都是這樣寫贷笛，小圖標 -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
        

        
三大標簽優(yōu)化
1应又、網頁title標題
title具有不可替代性，是我們的內頁第一個重要標簽乏苦，是搜索引擎了解網頁的入口株扛。

標簽的長度：Google(70KB)，35個中文
            Baidu(56kb)汇荐，28個中文
            
關鍵字分布：最先出現的詞語權重越高

關鍵字詞頻：主關鍵詞出現3次
            輔關鍵詞出現一次
            

建議：
    首頁標題洞就，網站名(產品名) 網站的介紹
    
例如：
    京東(JD.COM)-綜合網購首選-正品低價、品質保障掀淘、配送及時旬蟋、輕松購物！

    
2革娄、description 網站說明
對于關鍵詞的作用明顯降低倾贰，但由于很多搜索引擎，仍然大量采用網頁的MATA標簽中描述部分作為搜索結果的“內容摘要”拦惋。

京東網：
    京東JD.COM-專業(yè)的綜合網上購物商城,銷售家電匆浙、數碼通訊、電腦厕妖、家居百貨首尼、服裝服飾、母嬰、圖書饰恕、食品等數萬個品牌優(yōu)質商品.便捷挠羔、誠信的服務井仰，為您提供愉悅的網上購物體驗!

注意點：
1埋嵌、描述中出現關鍵詞，與正文內容相關俱恶，這部分給人看的雹嗦，所以要寫的很詳細，吸引用戶
2合是，同樣遵循簡短原則了罪，字符數含空格在內不要超過120漢字
3，補充在title和keywords中未能充分表述的說明
4聪全，用英語逗號 時關鍵詞1泊藕，關鍵詞2

<meta name="description" content="京東JD.COM-專業(yè)的綜合網上購物商城,銷售家電、數碼通訊难礼、電腦娃圆、家居百貨、服裝服飾蛾茉、母嬰讼呢、圖書、食品等數萬個品牌優(yōu)質商品.便捷谦炬、誠信的服務悦屏，為您提供愉悅的網上購物體驗!" />

3、keywords 是頁面關鍵詞键思，是搜索引擎關注點之一础爬，keywords應該限制在6~8個關鍵詞左右，電商類網站可以多 少許
    
京東網：
    <meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,京東"/>