1棒仍、嵌套之間的盒子垂直外邊距如果緊挨在一起會發(fā)生塌陷悲靴，這種情況一旦發(fā)生是必須要解決的，解決方法就是給父級添加一個overflow：hidden莫其；禁止超出

2癞尚、屬性名稱：background耸三；值1：顏色；值2：圖片浇揩；值3：平鋪方式仪壮； no-repeat,repeat-x,repeat-y;值4：背景定位，注意是一對胳徽。先水平后垂直积锅。水平包括：left center right；垂直包括：top center bottom养盗；除此之外還接受直接設(shè)置坐標(biāo)值缚陷。

3、屬性名稱：border：粗細 類型 顏色往核； ?類型：dashed虛線箫爷， solid實線。

4聂儒、具有隔離性質(zhì)的標(biāo)簽適合做分區(qū)虎锚，做布局。不隔離性質(zhì)的標(biāo)簽適合做內(nèi)容衩婚。

5翁都、經(jīng)驗值：浮動的元素顯示模式都會自動變成行內(nèi)塊。

6谅猾、屬性名：overflow：hidden，auto鳍悠； 第一：當(dāng)設(shè)置了實體范圍的時候再加溢出隱藏表示修剪掉超出的部分税娜。 ? ? ? ? ? 第二：當(dāng)實體范圍沒有設(shè)置，或者高度是auto的時候再加溢出隱藏它可以強制檢測子級中浮動的元素藏研。

7敬矩、css屬性的書寫順序：第一：個模塊先實體化書寫所有自身控制屬性，主要為了就是畫盒子蠢挡。第二：書寫所有關(guān)于定位的屬性弧岳，主要是邊距或浮動，或定位第三：最后在書寫所有內(nèi)容控制的屬性业踏，例如文字控制屬性禽炬。

8、鏈接標(biāo)簽：link標(biāo)簽它擁有鏈接三屬性勤家。分別是格式腹尖，關(guān)系，地址伐脖。rel表示鏈接對象和當(dāng)前文檔的關(guān)系热幔；type表示鏈接對象的格式或類型乐设；href表示鏈接對象的地址。

9绎巨、table>thead+tbody+tfoot ? ?//table>tr>td

10近尚、屬性名：border-collapse：collapse塌陷；separate 分離场勤； 作用：邊框合并戈锻；

11、type=text;表示一個文本框却嗡；type=button舶沛；表示一個按鈕；type=radio窗价；表示一個單選框如庭；type=checkbox；表示一個復(fù)選框撼港； ? ? ? type=submit坪它；表示提交表單的按鈕；type=reset帝牡； 表示擁有重置功能的按鈕往毡；type=image；表示一個圖片按鈕靶溜；（可以將一個圖片變成按鈕）开瞭； ? ? ? type=file；表示一個可以上傳文件的組件罩息；type=hidden嗤详；表示一個在前臺不可見的表單但是可以傳遞隱藏數(shù)據(jù)給后臺。type=password; 表示一個密碼輸入框瓷炮。12葱色、fieldset>legend ? ?快捷鍵 ctrl+shfit+空格。會自動生成一個符號 ?但是盡量少用娘香。

13苍狰、 label標(biāo)簽 ? 作用：擴大表單元素的觸發(fā)范圍。常規(guī)使用方法：label烘绽，for淋昭，id；給這個標(biāo)簽添加一個for屬性诀姚，屬性值是某個表單元素的id即可响牛。 ? ? ? 簡易方法：直接用label把文字信息和表單元素包含起來就可以了。

14、dl>dt>dd ? 一個dl里面可以有多對dt和dd嵌套呀打。

15矢赁、*big：定義大號文本；*small：定義小號文本贬丛；*strong：定義加粗強調(diào)撩银；*em：定義斜體強調(diào)，淘寶特別喜歡用這個標(biāo)簽豺憔。*bui：它是三個標(biāo)簽额获，分別是表示加粗，下劃線恭应，斜體抄邀。但是都不具備任何的語義強調(diào)。*sub：定義下標(biāo)昼榛；*sup：定義上標(biāo)境肾；

16、*address：定義出處胆屿，注意它是有隔離性質(zhì)的奥喻，并且有默認樣式斜體。一般來講這個標(biāo)簽內(nèi)部搜索引擎會有意識的查找三個數(shù)據(jù)非迹，作者环鲤，地址，聯(lián)系電話憎兽。

17性穿、文本縮進屬性：text-indent：2em琅束；em表示一個字溃肪。也可以接受正常的像素單位纺涤。

------------------------------------------------------HTML5--------------------------------------------------------------1、標(biāo)簽名稱：video扎附，是一個雙標(biāo)記。標(biāo)簽屬性：autoplay：是否自動播放结耀； controls留夜；表示是否添加播放控件；（一般情況這個都是不開放給用戶的）poster：定義視頻的封面圖片图甜；loop：設(shè)置視頻是否循環(huán)播放碍粥；（廣告肯定有這個屬性）；preload：設(shè)置視頻是否預(yù)加載黑毅；（和autoplay沖突）muted：設(shè)置視頻一開始是否是靜音播放嚼摩；width：寬度；height：高度；src：視頻路徑（必選屬性）《視頻格式》 簡介：目前瀏覽器支持的視頻格式一共只有3種分別是 ：webm格式枕面，專用的web視頻格式愿卒；mp4格式；ogg格式潮秘；

2琼开、《source標(biāo)簽》作用：設(shè)置video標(biāo)簽的多個格式的視頻。瀏覽器會優(yōu)先播放支持的格式枕荞。使用的基本結(jié)構(gòu)：video>source 相當(dāng)于又是一個 ul>li結(jié)構(gòu)標(biāo)簽屬性：src：視頻路徑柜候；type：表示設(shè)置視頻的格式 舉例： typ=“video/mp4”例如：

3、《音頻標(biāo)簽》：audio躏精；標(biāo)簽屬性：它幾乎擁有所有的video屬性渣刷，除了3個可見屬性。分別是width矗烛，height辅柴，poster。

4高诺、《測量標(biāo)簽》：meter碌识；是一個雙標(biāo)記，可以用在任何數(shù)據(jù)測量的地方用圖形表示更直觀虱而，例如今日訪問量筏餐，或者投票支持數(shù)。 ? ? ? 標(biāo)簽屬性： ?min：最心的础魁瞪；max：最大；low：較低惠呼；high：較高导俘；optimum：最佳值；value：當(dāng)前值剔蹋； ? ? ? 可以設(shè)置width與height旅薄，但是背景顏色是設(shè)置不了的。 ? ? ? 如：可以做今日訪問量泣崩；

5少梁、《進度條標(biāo)簽》progress；進度矫付；標(biāo)簽屬性：max凯沪，和value； ?與meter有點相似买优，但是注意其中的一些區(qū)別 妨马， ? ? ? ?注意：$('video').get(0).play(); ? 表示在jq中變回js的元素挺举，在繼續(xù)使用。因為jq中沒有play（）這個方法烘跺。

6湘纵、《數(shù)據(jù)列表標(biāo)簽》：datalist； 作用：它可以在后臺當(dāng)中定義一組隱藏的數(shù)據(jù)液荸，這些數(shù)據(jù)默認都是不可見的可以綁定給input標(biāo)簽瞻佛。 ? ? ?使用方式：1通過datalist標(biāo)簽定義一組數(shù)據(jù)并制定id名稱。2將這個id名稱綁定給input標(biāo)簽的list屬性即可使用娇钱。 ? ? ?例如：QQ請輸入您的汽車品牌：

7伤柄、《細節(jié)和概要標(biāo)簽》：details>summary; ? details表示整個信息的詳情； ?summary表示整個信息的概要文搂； ? ? ?作用：將整個信息分區(qū)自動折疊為概要內(nèi)容适刀，當(dāng)單擊以后展示全部詳情。 ? ? ?例如：奧運(概要)（細節(jié)）中國奧委會,北京奧運會... ……奧林匹克新聞 歷史與未來 趣事軼聞

8煤蹭、《標(biāo)記標(biāo)簽》：mark笔喉，是一對雙標(biāo)記。標(biāo)簽屬性：無屬性標(biāo)簽硝皂。標(biāo)簽作用：在文本中定義標(biāo)記樣式常挚。

9、時間標(biāo)簽8：0010稽物、【marquee標(biāo)簽】標(biāo)簽屬性：direction：表示滾動方向奄毡，up，down贝或，right吼过，left； ? ?scrollamount：設(shè)置滾動速度咪奖，可以接受一個數(shù)值盗忱；loop：設(shè)置滾動次數(shù)；默認是-1羊赵；是無限循環(huán)的趟佃； behavior：設(shè)置滾動類型；有兩個值需要注意：alternate表示往復(fù)循環(huán)滾動昧捷；slide滾動到邊緣并停止揖闸。總結(jié)：marquee標(biāo)簽實際上是具有隔離性質(zhì)的標(biāo)簽料身，所以它接受正常的實體化，另外它的內(nèi)容可以嵌套更復(fù)雜的結(jié)構(gòu)去實現(xiàn)滾動動畫衩茸，而不僅僅是一行文字芹血。

--------------------------------流派【標(biāo)準(zhǔn)流、浮動流、定位流】------------------------------------------

1幔烛、【標(biāo)準(zhǔn)流】定義：標(biāo)準(zhǔn)流就是網(wǎng)頁默認的一種排列順序啃擦。只有兩種方式塊級元素豎直向下排列，行內(nèi)元素水平排列饿悬。

2令蛉、【浮動流】浮動流是脫離標(biāo)準(zhǔn)流的第一種排列方式。浮動流中只有一種規(guī)則狡恬，就是所有元素都水平排列珠叔，排滿一行自動換行。***流派之間的注意事項弟劲。主要指的是互相影響的問題祷安。因為同級的所有元素你只能用一種流派，不能混用兔乞，如果發(fā)生了混用就會互相影響汇鞭，尤其是浮動流和標(biāo)準(zhǔn)流之間。****浮動元素的性質(zhì)：1.浮動的元素會刪除原來標(biāo)準(zhǔn)流中占的位置庸追。進入浮動流占位霍骄。2.浮動的元素不存在隔離性質(zhì)。都是行內(nèi)塊淡溯。3.如果都是在同級之間浮動元素會影響正常的標(biāo)準(zhǔn)流元素读整。

3、行內(nèi)元素不生效問題： 設(shè)置margin-top不生效血筑，padding-top會超出邊界绘沉，需要設(shè)置為行內(nèi)快。4豺总、垂直對齊屬性：vertical-align:bottom（center/top） ?例如：img,input{ vertical-align:bottom}

5车伞、《定位流》 ? *相對定位： 脫離方式：號稱占位脫離；也是絕對不會影響到標(biāo)準(zhǔn)流中的正常元素喻喳。定位屬性名稱：position：relative另玖；作用：設(shè)置相對定位模式； ? 坐標(biāo)值設(shè)置屬性：left表伦，top谦去，bottom，right蹦哼； ? *絕對定位： ? 使用原則：如果要使用決定定位鳄哭，必須是子絕父相； 脫離方式：號稱徹底脫離纲熏；它是絕對不會在標(biāo)準(zhǔn)流中占任何位置妆丘。也不會影響標(biāo)準(zhǔn)流中的任何元素锄俄。 ? ? 相關(guān)屬性：position：absolute; ? ? *定位元素的圖層順序設(shè)置：屬性名稱：z-index; ? ? ? ? 屬性值：注意它只是表示一種圖層順序所以不帶px單位。 ?*固定定位： 屬性名稱：position：fixed勺拣； ?作用：表示固定在屏幕上定位奶赠； ?注意事項：因為它肯定是相當(dāng)屏幕的所以不需要子絕父相的原則；

6药有、基本的順序： ? 一般來講標(biāo)準(zhǔn)流能解決的事情毅戈，不用浮動流，浮動流能解決的事情不用定位流愤惰。7苇经、精靈圖：background:url(_r1_c1.png) no-repeat 0 0; .pic2{ background-position:0 -30px;} ?注意： background-position的使用8、css中的繼承：inherit ?比如說繼承父類的border羊苟；border:inherit; ? 9塑陵、圣杯布局***** ?換行問題：文字的時候會自動換行？為什么是字母的時候不會自動換行呢蜡励？

-------------------------------------------------------------------------------------------------------------

居中問題：特例：left：0令花；top：0；right:0; bottom:0; margin:auto; position:absolute

--------------------------------CSS3---------------------------------------------------------------------------

1凉倚、《背景尺寸控制屬性》屬性名稱：background-size兼都；屬性值：水平 垂直； ? ?可以接受百分比設(shè)置稽寒。 ? ?可以接受固定的人為像素設(shè)置尺寸扮碧。 ? ?contain：表示盡可能完整的顯示圖片。 ?background-size:contain; ? ?cover：表示盡可能覆蓋住盒子 ? background-size:cover;

2杏糙、《背景起源屬性》 屬性名稱：background-origin慎王；屬性值：它只有3個特殊的關(guān)鍵詞值，分別表示宏侍； ? ? border-box：從邊框盒子開始渲染圖片赖淤。 ? ? padding-box：從內(nèi)邊距盒子開始渲染圖片。 ? ? content-box：從內(nèi)容空間盒子開始渲染圖片谅河。

3咱旱、屬性名稱：background-clip； 作用：設(shè)置圖片從哪開始顯示绷耍，被裁切的地方是顯示的吐限，其他地方不顯示圖片。 ? ? 屬性值：也是3中類型的盒子褂始； border-box诸典，padding-box（默認），content-box崎苗。

4狐粱、背景圖定位模式屬性 ：屬性名稱：background-attachment赘阀；屬性值：fixed表示將背景圖片固定到屏幕上顯示。

5脑奠、多背景：css一個屬性如果有多個值，那么值與值之間用空格幅慌，如果值太多了發(fā)生了分組宋欺，那么組與組之間用逗號隔開。 如： ? ? ?background:url(images/mimi.jpg) no-repeat 0 0, ? ? url(images/shishi.jpg) no-repeat right bottom, ? ? ?url(images/shitailong.jpg) no-repeat right 0, ? ? url(images/longlong.jpg) no-repeat 0 bottom;

6胰伍、選擇器： div>*通過這種方式可以選擇所有子級標(biāo)簽齿诞。+表示選擇指定目標(biāo)其后緊挨著的唯一一個元素。~表示選擇其后所有骂租。

7祷杈、屬性過濾選擇器：[k]過濾擁有指定屬性的標(biāo)簽。[k=v]過濾擁有指定屬性值的元素渗饮； 常用于input的篩選但汞； ? ? [k^=v]以特定屬性值開頭 ； ?[k$=v]以特定屬性值結(jié)尾互站； ?[k*=v]包含某個值

8私蕾、《其他》 :root 任何時候都表示選中網(wǎng)頁的根元素就是html； :empty 表示選中內(nèi)容為空的元素胡桃； ? ? :not() 表示在指定范圍內(nèi)排除某一類元素踩叭； ? ::selection 表示被選中的文本。

9翠胰、***個數(shù)選擇器：同級別 ? ?：nth-child（）;這個選擇器注重的是所有同級當(dāng)中的第幾個容贝； ? ：nth-last-child（）；過濾同級別當(dāng)中的倒數(shù)第幾個之景； ? ?：first-child斤富；同級別中的第一個； ?：last-child闺兢；同級別最后一個茂缚； ：only-child；同級別中唯一一個屋谭，獨生子的意思脚囊。

10、同類型： ? ?：nth-of-type（）桐磁；同類型中的第幾個悔耘； ?：nth-last-of-type（）；同類型中倒數(shù)第幾個我擂；：first-of-type衬以；同類第一缓艳； ? ?：last-of-type；同類最后看峻； ? ：only-of-type阶淘；同類唯一；（可以有多個不同類互妓，但是同類型的標(biāo)簽只能有唯一一個）

9&10對比： ? 相同之處：都是在同級別之間選擇溪窒，后者要求即同級別又同類； ? ?不同之處：***child注重個數(shù)冯勉，type注重類型澈蚌。

11、***滑動門技術(shù)

12灼狰、***:after 增加后宛瞄；需要配合content：’’;這個屬性，表示增加的元素的內(nèi)容交胚。 ? ? ? ***:before 增加前份汗； content：’’; ? ? ? 總結(jié)：這兩個選擇器如果不設(shè)置content屬性都完全不生效，此外這兩個選擇器增加出的內(nèi)容是不被抓取的承绸。

13裸影、【投影屬性】屬性名稱：box-shadow 盒子投影； 屬性值：水平偏移 垂直偏移 羽化程度 投影顏色 內(nèi)外陰影军熏。 ? ? ?其中如果加一個inset表示內(nèi)陰影轩猩。投影顏色默認會跟隨文本顏色〉磁欤快速設(shè)置陰影只需要3個值就夠了均践。 ? ? 文本投影： text-shadow；屬性值一樣摩幔，但是沒有inset彤委； ? ? ?例如： ? box-shadow:0 0 20px; ? ? ? ? ? ? ? ? ?text-shadow:0 0 5px red;

-------------CSS3三大模塊，分別是過渡模塊或衡，轉(zhuǎn)換模塊（維度模塊）焦影，自定義動畫模塊。------------1封断、*屬性名稱：transition斯辰； 屬性值：屬性名稱 過渡時間 動畫類型緩動 延遲時間。 ? ? ?其中屬性名稱可以通過一個all來設(shè)置所有坡疼； 動畫類型要特殊記住linear 表示勻速彬呻；其他的屬性中有可能transition-delay會單獨用到。

2、《過渡屬性的使用方式》一共有三步闸氮，你就可以做一個過渡動畫了剪况。 1.按照以往的方式來書寫元素的默認樣式。2.給元素添加hover偽類來書寫發(fā)生突變的樣式蒲跨。3.返回頭去給元素的默認樣式添加transition屬性并設(shè)置時間译断。

3、《二維》屬性名稱：transform; ? ?屬性作用：可以設(shè)置任何一個元素直接進入二維領(lǐng)域或悲。 ? ? ? 屬性值：有三個最核心的功能分別是镐作； ?旋轉(zhuǎn)：rotate(30deg) - deg表示度數(shù)單位；縮放：scale(1,1) 它的小括號有兩個值表示水平縮放隆箩，和垂直縮放，其中1表示縮放為100%就表示不變羔杨。 ? ? ?位移：translate(水平偏移捌臊，垂直偏移)；

4兜材、《旋轉(zhuǎn)功能》《旋轉(zhuǎn)中心點》屬性名稱：transform-origin理澎；作用：用來設(shè)置盒子的旋轉(zhuǎn)中心點。又稱為注冊點曙寡。 默認值是左上角那個坐標(biāo)點 ? ? ?屬性值：它可以接受三種類型的值糠爬；默認是先水平 垂直。 1.像素類型的值举庶； 2.百分比执隧；3.特殊關(guān)鍵詞；5户侥、《傾斜功能》 功能值：transform:skew(水平度數(shù)镀琉，垂直度數(shù))；注意事項：度數(shù)越大會被拉得越長蕊唐。

6屋摔、案例：淘寶小箭頭：div:hover:after{ transform:rotate(405deg);} ?注意使用after

7、rotateZ替梨、rotateX钓试、rotateY

8、【自定義動畫模塊】《核心屬性》 屬性名稱：animation副瀑；作用：可以設(shè)置自定義的動畫弓熏； ? ?屬性值：動畫名稱 動畫時間 動畫緩動 動畫延遲 動畫次數(shù) 動畫方向 播放狀態(tài)； ? ?其中有幾個需要注意：動畫緩動中 linear表示勻速俗扇；動畫次數(shù)中 infinite無限次硝烂；動畫方向中 alternate 往復(fù)播放； ? ?播放狀態(tài)中 paused暫停 running播放； ? ?一個有價值的屬性名稱：animation-play-state表示播放狀態(tài)單獨控制滞谢。 ? *動畫的定義方式： 在c3中新增了一個符號叫做定義符串稀，但凡需要定義的都通過@符號定義；定義動畫如下： ? @keyframes 動畫名稱{ ? ? ? ? 0%{} 100%{} ? ?} ? 例如：div { animation:dongdong 2s linear infinite alternate paused; } ? div:hover{ animation-play-state:running;} ? ? ? ? ? @keyframes dongdong{0%{ left:0; top:0;}25%{ left:600px; top:0;}50%{ left:600px; top:400px;}75%{ left:0; top:400px;}100%{ left:0; top:0;} ? ? ? ? ? }

9狮杨、云層動畫：最主要是使用自定義動畫來實現(xiàn)的母截。

10、無縫循環(huán) 主要運用動畫來實現(xiàn)橄教，還要多加幾張照片清寇，用于無縫

------------------------------------【其他的有價值的css屬性】-------------------------------------------------

1、《多列屬性》 ? columns：表示多列屬性护蝶； 作用：可以將一個容器平分成多個固定寬度的容器华烟； column-gap:表示列與列之間的距離；

2持灰、《漸變背景色》 簡介：css3中新增了一種對漸變顏色的設(shè)置方式盔夜，實際上它并沒有出現(xiàn)新的屬性，而是新增了一種顏色的設(shè)置模式堤魁，它和rgba()是差不多一個類型的喂链。 ? ? 設(shè)置方式： 關(guān)鍵詞：linear-gradient(180deg,red,green,blue);其中如果色值的后面跟一個百分比表示染色的位置。如果不寫表示均分顏色妥泉。

3椭微、《盒子內(nèi)減屬性》 簡介：*****這個屬性被稱之為css3中神器屬性，非常好用盲链，如果沒有這個屬性就不可能有響應(yīng)式網(wǎng)站蝇率。 ? ? 屬性名稱：box-sizing; ? ?屬性作用：可以實現(xiàn)盒子的padding和border內(nèi)減效果。這是做響應(yīng)式網(wǎng)站必用的屬性刽沾。價值很高瓢剿。 ? ? 屬性值：重點就是border-box;作用就是實體范圍以邊框為準(zhǔn)； 例如：box-sizing:border-box

--------------------------------------------《下拉菜單案例》-------------------------------------------------

下拉菜單最關(guān)鍵的一個核心技巧在于彈出的內(nèi)容一定要是定位流悠轩，它必須不在標(biāo)準(zhǔn)流中占位间狂。否則的話就會影響其他分區(qū)的正常內(nèi)容。但凡做下拉菜單效果一定記住這個事情火架。

---------------------------------------------動畫的經(jīng)驗值-----------------------------------------------------

如果要做動畫鉴象，那么現(xiàn)實和隱藏這個問題不能使用display：none；會導(dǎo)致動畫不出現(xiàn)何鸡。所以還有一種做隱藏非常好用的萬能方法：設(shè)置：width：0纺弊； height：0； overflow：hidden骡男；當(dāng)hover的時候再將尺寸釋放為auto淆游；就可以安全顯示了。動畫有的時候會做間隔出場的效果，這個效果就是通過delay來實現(xiàn)的犹菱。會給動畫的整體效果和感覺提升一個級別拾稳。

--------------------------------------------【三維模塊】------------------------------------------------------

1、《三維參照屬性》屬性名稱：transform-style腊脱；屬性值：preserve-3d访得； ? ? ? ?屬性作用：三維的坐標(biāo)系需要給父級設(shè)置一個三維參照屬性，才能讓子級順利進入三維空間陕凹，這個原理類似于子絕父相悍抑。 ? ? ? ?簡介：transform-style：preserve-3d；這個屬性和值是物體進入三維坐標(biāo)系的一個標(biāo)志性屬性杜耙。只要添加了這個屬性內(nèi)部的子元素可以自動相當(dāng)于這個父元素進行三維空間定位搜骡。 ? ? ? ?注意：想要移動這些，請使用絕對定位（子絕父相）佑女，運用那些transfrom的屬性浆兰。

2、《三維長方體》*工作經(jīng)驗：在工作中得到一個長方體有一個很好用的方法珊豹，就是直接通過正方體拉伸或壓縮得到想要的長方體。完全可以得到任何你想要的尺寸的長方體榕订。 ? ? ? ?*縮放功能：在使用transform屬性的時候要避免被后面的動畫覆蓋店茶，如果涉及到用縮放功能盡量將縮放放在最后書寫。 ? ? ? 最理想的順序：transform：位移 旋轉(zhuǎn) 縮放劫恒；

3贩幻、《透視的形成》屬性名稱：perspective；屬性值：接受一個距離像素两嘴； 比如：perspective：100px丛楚； ? ? ? 屬性作用：模擬人眼和觀察物體之間的透視距離。其中距離越近都是效果越明顯憔辫。

4趣些、案例：長方體；三維多面體