### CSS核心樣式
* * *
#### css字體屬性
##### font-weight：字體粗細
* 作用：設(shè)置文字是否加粗顯示辽装。
* 屬性名：font-weight 屬于font屬性的一個單一屬性，屬性值分為單詞和數(shù)字润文。
* 屬性值：
? ? 1. normal 默認值辙培，定義標準的字體线定。?
? ? 2. bold 定義粗字體早芭，b strong 標簽的默認值罗岖。
? ? 3. bolder 定義更粗的字體。
? ? 4. lighter 定義更細的腹躁。
? ? 5. 100-900之間的整數(shù)字 其中400等價于noraml,700等價于bold桑包。
##### font-style：字體風格
* 作用：設(shè)置字是否斜體顯示。
* 屬性名：font-style纺非，屬于font屬性的一個單一屬性哑了。屬性值為單詞。
* 屬性值：
? ? 1. normal 默認值烧颖，設(shè)置正規(guī)的字體弱左。
? ? 2. italic 設(shè)置傾斜的文字，主要針對文字炕淮，要求英文中以字體中的斜體樣式顯示拆火。
? ? 3. oblique 設(shè)置傾斜的文字，只是將字體傾斜涂圆，與字體無關(guān)们镜。
##### line-height：行高
* 作用：設(shè)置的是一行文字實際占有的高度，文字字號在行高中是垂直居中的润歉。
* 屬性名：line-height模狭，屬于font屬性的一個單一屬性。屬性值分為px像素值和百分比踩衩。
* 屬性值：
? ? 1. px像素值 設(shè)置行高的具體的像素值嚼鹉。
? ? 2. 百分比數(shù)值 設(shè)置的本身字號像素值的百分比。
##### font綜合書寫：
* 書寫方式：
? ? 1. font進行綜合書寫時驱富，必須要有字號和字體參與锚赤，而且必須字號在前，字體在后萌朱。
? ? 2. font屬性經(jīng)常對字體宴树、字號、行高進行書寫時晶疼，書寫順序必須是字號酒贬、行高又憨、字體。字號和行高之間必須用/進行分隔锭吨。
? ? 3. 如果font屬性需要設(shè)置加粗和斜體蠢莺，那么這兩個值只能寫在最前面，而且這兩個值可以互換位置零如。后面的字號躏将、行高、字體位置不能更改位置考蕾。
#### CSS文本屬性
##### text-align：水平對齊
* 作用：設(shè)置文本水平方向的對齊祸憋。在盒子中，無論文本是單行還是多行肖卧，都會對應(yīng)方向?qū)R蚯窥。
* 屬性值：
? ? 1. left 居左對齊，大部分標簽的默認值塞帐。
? ? 2. center 居中對齊拦赠。
? ? 3. right 居右對齊。
##### text-decoration：文本修飾
* 作用：設(shè)置文本整體是否有線條的修飾效果葵姥。
* 屬性值：
? ? 1. none 沒有修飾荷鼠，大部分標簽的默認值。
? ? 2. overline 上劃線榔幸。
? ? 3. line-through 中劃線允乐，刪除線，<del>標簽的默認值牡辽。
? ? 4. underline 下劃線喳篇，<a>標簽的默認值。
##### text-indent：文本縮進
* 作用：設(shè)置段落首行是否進行首行縮進态辛。
* 屬性值：
? ? 1. px像素值 表示首行縮進多少像素麸澜。
? ? 2. em單位 表示首行縮進多少個中文字符的位置。
? ? 3. 百分比％ 表示縮進文字所在的標簽的父級標簽的width屬性值的百分比奏黑。
? ? 在實際工作中炊邦，最常使用em為單位的屬性值，并且屬性值區(qū)分正負熟史，正表示向右縮進馁害，負表示向左。對于文本標簽因為長度和高度都是其內(nèi)部內(nèi)容自動撐開蹂匹，所以要設(shè)置文本標簽要首先將其設(shè)置為塊碘菜。
* * *
#### CSS盒模型：
盒模型又叫框模型，包含了五個用來描述盒子位置、尺寸的屬性忍啸，分別是寬度width仰坦、高度height、內(nèi)邊距padding计雌、邊框border悄晃、外邊距margin。
##### 盒模型的區(qū)域：
* 可以書寫的區(qū)域：width+height凿滤。
* 盒子可以實體化的區(qū)域：width+height+padding+border
* 盒子實際占位的位置：width+height+padding+border+margin妈橄。
##### width：寬度
* 作用：設(shè)置可以添加元素內(nèi)容的區(qū)域的寬度。
* 屬性值：
? ? 1. auto 默認值翁脆。瀏覽器可計算出實際的高度眷蚓。
? ? 2. px像素值 像素值定義的寬度。
? ? 3. 百分比% 定義參考父元素寬度width的百分比寬度反番。
? ? 如果一個元素不添加width屬性溪椎，默認屬性值為auto，不同的瀏覽器會根據(jù)其特點自動計算出實際寬度恬口，例如<div>元素等獨占一行的，其width屬性的值會自動撐滿父元素的width區(qū)域沼侣，如果是<span>元素不需要獨占一行的祖能，其width屬性的值是內(nèi)部元素內(nèi)容自動撐開的寬度。
? ? <body>元素比較特殊蛾洛，不需要設(shè)置width屬性养铸，寬度會自動適應(yīng)瀏覽器窗口的寬度。
##### height：高度
* 作用：設(shè)置可以添加元素內(nèi)容的區(qū)域的高度轧膘。
* 屬性值：
? ? 1. auto 默認值钞螟。瀏覽器會計算出實際的高度。
? ? 2. px像素值 像素值定義的高度谎碍。
? ? 3. 百分比% 定義參考父元素高度height的百分比高度鳞滨。
? ? 如果一個元素不添加height屬性，默認屬性值為auto蟆淀，瀏覽器會自動計算出實際高度拯啦，也就是內(nèi)部元素內(nèi)容自動撐開的高度。元素的高度自適應(yīng)內(nèi)部內(nèi)容的高度熔任。
##### padding：內(nèi)邊距
* 作用：設(shè)置的是元素的邊框內(nèi)部到寬高區(qū)域之間的距離褒链。
* 特點：可以加載背景，不能書寫嵌套的內(nèi)容疑苔。
* 屬性值：常用px為單位的數(shù)值甫匹。
padding是一個復(fù)合屬性，可以根據(jù)內(nèi)邊距的方向的不同劃分為四個方向的單一屬性。
? ? ```
? ? ? ? p {
? ? ? ? ? ? padding-top: 10px;
? ? ? ? ? ? padding-right: 20px;
? ? ? ? ? ? padding-bottom: 30px;
? ? ? ? ? ? padding-left: 40px;
? ? ? ? }
? ? ```
* 寫法：
? ? 1. 四值法：設(shè)置四個屬性值兵迅，分配為上抢韭、右、下喷兼、左篮绰。
? ? ? ? ```
? ? ? ? ? ? p{
? ? ? ? ? ? ? ? padding:10px 20px 30px 40px
? ? ? ? ? ? }
? ? ? ? ```
? ? 2. 三值法：設(shè)置三個屬性值，分配為上季惯、左右吠各、下。
? ? ? ? ```
? ? ? ? p{
? ? ? ? ? ? padding:10px 20px 30px;
? ? ? ? }
? ? ? ? ```
? ? 3. 二值法：設(shè)置兩個值勉抓，分配為上下贾漏、左右。
? ? ? ? ```
? ? ? ? p{
? ? ? ? ? ? padding:10px 20px藕筋；
? ? ? ? }
? ? ? ? ```
? ? 4. 二值法：設(shè)置兩個值纵散，分配為上下、左右隐圾。
? ? ? ? ? ? p{
? ? ? ? ? ? ? ? padding:10px 20px伍掀；
? ? ? ? ? ? }
##### border: 邊框
* 作用：設(shè)置的是內(nèi)邊距外面的邊界區(qū)域，作為盒子的實體化的最外層暇藏。
* 屬性值：由三個值組成蜜笤，分為線的寬度、線的形狀盐碱、線的顏色把兔。
* border屬性是一個復(fù)合屬性，根據(jù)劃分依據(jù)不同可以有兩種單一屬性的劃分方式瓮顽。
* 按照屬性值類型劃分：
? ? 1. border-width 線寬县好，設(shè)置邊框線的寬度，屬性值寫法類似于padding四種值的寫法暖混。
? ? 2. border-style 線型缕贡，設(shè)置邊框的線條形狀，屬性值為單詞儒恋，類似于padding四種值的寫法善绎。
? ? ? ? ① none 定義無邊框。
? ? ? ? ② solid 定義實線诫尽。
? ? ? ? ③ dashed 定義虛線禀酱，在大多數(shù)瀏覽器中呈現(xiàn)為實線。
? ? ? ? ④ dotted 定義點狀邊框牧嫉，在大多數(shù)瀏覽器中呈現(xiàn)為實線剂跟。
? ? ? ? ⑤ double 定義雙線减途，雙線的寬度等于border-width的值。
? ? ? ? ⑥ groove 定義3D曹洽，其效果取決于border-color的值鳍置。
? ? ? ? ⑦ ridge 定義3D壟狀邊框，其效果取決于border-color的值送淆。
? ? ? ? ⑧ inset 定義3D內(nèi)容凹陷效果税产，其效果取決于border-color的值。
? ? ? ? ⑨ outset 定義3D內(nèi)容凸出效果偷崩，其效果取決于border-color的值辟拷。
? ? 3. border-color 邊框顏色，設(shè)置邊框的顏色阐斜，屬性值為顏色名或者顏色值衫冻，類似于padding四值法。
* 根據(jù)邊框的方向劃分：
? ? 1. 上邊框：border-top
? ? 2. 右邊框：border-right
? ? 3. 下邊框：border-bottom
? ? 4. 左邊框：border-left
每一個單一方向的屬性都必須與復(fù)合屬性border一致谒出，設(shè)置三個屬性值：boder-top: 10px solid #f00
根據(jù)方向和類型可以進一步劃分為單一屬性寫法：border-方向-類型隅俘。細分時必須要先劃分方向，再寫類型劃分笤喳，否則屬性名錯誤礼患。
##### margin：外邊距
* 作用：設(shè)置的是盒子與盒子之間的距離愉舔。但是不能渲染背景捏鱼。
* 屬性值：px像素值柔袁。
外邊距的設(shè)置方式與內(nèi)邊距padding是一樣的
#### 盒模型擴展應(yīng)用
##### 清除默認樣式
* 大部分的標簽都有一個瀏覽器的默認樣式，會對布局造成一些影響捣卤。為了避免默認樣式對整體布局效果造成影響，一定要清除默認樣式八孝。
* 盒模型屬性中內(nèi)外邊距：大部分容器級都有默認邊距董朝，要么用標簽選擇器的并集方式，要么通配符清除干跛。
* <ul> 和<ol>兩種列表有默認的列表前綴：清除list-style屬性子姜。
* <a>標簽的默認樣式，順帶設(shè)置頁面中常用的a的公共樣式：設(shè)置color和text-decoration楼入。
* 清除默認加粗效果：設(shè)置font-weight：normal
##### 高度height應(yīng)用
* 根據(jù)不同的需求哥捕，高度屬性可以設(shè)置也可以不設(shè)置。
* 如果設(shè)置了高度：盒子占有的高度位置就確定死了嘉熊，后面的同級元素就會緊挨著加載遥赚。
* 如果不設(shè)置高度：會根據(jù)標簽內(nèi)部內(nèi)容高度自動撐開。
* 以<div>標簽為例阐肤，根據(jù)情況不同選擇是否設(shè)置高度：
? ? 1. 必須設(shè)置高度：因為盒子高度是固定的凫佛，后面同級元素在高度下面加載讲坎。如果自身盒子內(nèi)部內(nèi)容過多會溢出盒子區(qū)域。此時可設(shè)置overflow屬性對溢出的內(nèi)容進行效果顯示愧薛。
? ? 2. 必須不設(shè)置高度：要求盒子的高度必須自適應(yīng)內(nèi)部的高度晨炕，或者設(shè)置height的屬性值是自動的。
* overflow屬性值：
? ? 1. visible 默認值毫炉，可見的瓮栗，溢出部分內(nèi)容會顯示出來。
? ? 2. hidden 溢出部分直接隱藏瞄勾，隱藏超過邊框范圍的內(nèi)容费奸。
? ? 3. scroll 溢出的部分顯示滾動條，可以拖動滾動條看到隱藏部分丰榴，不論有沒有溢出货邓，都顯示有滾動條。
? ? 4. auto 自動的四濒，如果沒有溢出就正常顯示换况，溢出就自動顯示滾動條。
##### 文本水平居中
* 水平居中：text-align屬性盗蟆。
* 屬性值為單詞戈二，centenr left right 這三個屬性值可以顯示文本顯示位置。
##### 文本垂直居中
* 單行文本垂直居中：讓文字行高line-height等于盒子高度height喳资。
* 多行文本垂直居中：讓元素高度自適應(yīng)或者正好等于多行文字的高度觉吭，設(shè)置元素內(nèi)邊距上下值相同。
##### 元素垂直居中
一個元素內(nèi)部嵌套的子元素仆邓，在父元素中居中鲜滩。
垂直居中：與多行文字類似，讓父元素高度自適應(yīng)节值，子元素高度自動撐開父級的高度徙硅，再給父元素設(shè)置相同的上下邊距。
##### 元素水平居中
針對類似<div>樣式上必須獨占一行的盒子搞疗，如果子盒子寬度低于父盒子寬度嗓蘑，可以設(shè)置盒子的margin值，水平方向的值都設(shè)置為auto匿乃。
原因：auto只有在水平方向有作用桩皿，水平方向的margin如果設(shè)置為auto，邊距會自動無限增大幢炸，直到撐滿整個父元素除了子元素寬度之外的剩余區(qū)域泄隔，如果兩個水平方向都是auto，兩邊只有無限大宛徊，就會達到一個平衡梅尤，兩邊距離相同柜思，就會導(dǎo)致盒子居中。
##### 父子盒模型
一般情況下巷燥，一個父元素內(nèi)部可以放一個或者多個子元素赡盘，而且多個子元素要排成一行先是，必須要保證父元素的寬度一定要足夠（不考慮溢出情況）缰揪，需要遵循一個規(guī)律陨享，所有子元素的寬度加在一起不能大于父元素的寬度。
父元素width ≥ 所有子元素widht + padding + border + margin钝腺。
如果不滿足條件：要么多余的子元素掉下來不能在一排抛姑，要么溢出父元素。
##### 盒模型自動內(nèi)減
父子盒模型中艳狐，只有一個子元素定硝，且子元素都是類似于<div>標簽獨占一行的。
不設(shè)置子元素的width屬性毫目，子元素的width屬性值會自動加載父級元素的width蔬啡。
如果同時設(shè)置了子元素水平方向的padding和border、margin镀虐，不需要手動去進行內(nèi)減箱蟆，子元素的with會自動收縮尺寸。
子元素所有的水平方向的位置所有屬性的加和等于父元素的width刮便。
##### margin塌陷現(xiàn)象
margin塌陷現(xiàn)象：在垂直方向如果有兩個元素的外邊距有相遇的空猜，瀏覽器加載的真正的外邊距不是兩個間距的加和，而是兩個邊距中值較大的恨旱，邊距值小的塌陷到邊距值大的值內(nèi)部辈毯。
* 同級元素塌陷：上面的元素有下邊距，下面的元素有上邊距搜贤，兩個邊距相遇漓摩，真正的盒子間距離是較大的那個值。
* 父子元素塌陷：
? ? 1. 父子元素之間也會出現(xiàn)margin塌陷入客，父元素和子元素的都設(shè)置了同方向的margin-top值，兩個屬性之間沒有其他的內(nèi)容進行隔離腿椎，導(dǎo)致兩個屬性相遇桌硫，會發(fā)生margin塌陷。
? ? 2. 本身父元素與上一個元素的距離是0啃炸，子元素如果設(shè)置了垂直方向的上邊距铆隘，會帶著父元素一起掉下來。
* 解決margin塌陷問題：
? ? 1. 同級元素：如果兩個元素垂直方向有間距南用，只需要設(shè)置一個元素膀钠，不要進行拆分掏湾。
? ? 2. 父子元素：讓兩個邊距不要相遇，中間可以使用父元素border或者padding將邊距分隔開肿嘲；更加常用的方法融击，父子盒模型之間的距離就不要用兒子的margin去踹出來，而是父級的padding擠出來雳窟。
另外尊浪，水平方向的margin沒有塌陷現(xiàn)象。
#### 標準文檔流
##### 微觀現(xiàn)象
* 空白折疊現(xiàn)象封救。
* 文字類的元素如果排在一行會出現(xiàn)一種高低不齊拇涤、底邊對齊效果。
* 自動換行誉结，元素內(nèi)一行內(nèi)容寫滿元素的width時會自動進行換行鹅士。
##### 元素等級
* 在標準流中，大部分的元素是區(qū)分等級的惩坑，習(xí)慣將元素劃分為幾種常見的加載級別：塊級元素掉盅、行內(nèi)元素、行內(nèi)塊元素等旭贬。
* 塊級元素：大部分容器級標簽包括p標簽都是塊級元素怔接，比如<div>、<h1>等稀轨。
? ? a. 塊級元素可以設(shè)置寬高扼脐，在瀏覽器中正常加載。
? ? b. 塊級元素必須獨占一行奋刽，不能與其他任何標簽并排一行瓦侮。
? ? c. 塊級元素如果不設(shè)置寬度，會自動撐滿父級的width區(qū)域佣谐，高度不設(shè)置肚吏，會被內(nèi)容自動撐開高度。
* 行內(nèi)元素：大部分的文本級標簽狭魂，比如<span>罚攀、<a>、<b>等雌澄。
? ? a. 行內(nèi)元素不能正常加載寬度和高度屬性斋泄，其他的盒模型屬性雖然能設(shè)置，但是容易出現(xiàn)家在問題镐牺。
? ? b. 行內(nèi)元素可以與其他的行內(nèi)或者行內(nèi)塊元素并排一行顯示炫掐。
? ? c. 行內(nèi)元素不論是否設(shè)置寬高，寬度和高度都只能被內(nèi)容自動撐開睬涧。
* 行內(nèi)塊元素：比如<img>募胃、<input>等旗唁。
? ? a. 行內(nèi)塊元素可以設(shè)置高度和寬度。
? ? b. 行內(nèi)塊元素可以設(shè)置其他的行內(nèi)或者行內(nèi)塊并排一行顯示痹束。
? ? c. 行內(nèi)塊元素如果不設(shè)置寬高检疫，要么以原始尺寸加載要么被內(nèi)容自動撐開。
? ? d. 行內(nèi)塊依舊就有標準流的微觀性質(zhì)参袱，例如空白折疊現(xiàn)象电谣。
#### CSS顯示模式
##### 顯示模式 display
標準流中的元素有自己默認的瀏覽器加載模式，但是加載模式不是一成不變的抹蚀，后期可以通過display屬性更改一個標簽的顯示模式剿牺。
* 屬性值：根據(jù)屬性值不同，可以加載對應(yīng)元素等級的顯示模式环壤。
? ? 1. block 表示元素要以塊級元素模式加載晒来，具備塊級特點。
? ? 2. inline 表示元素以行內(nèi)元素模式加載郑现，具備行內(nèi)特點湃崩。
? ? 3. inline-block 表示標簽以行內(nèi)模塊加載，具備行內(nèi)塊特點接箫。
? ? 4. none 表示標簽及內(nèi)部內(nèi)容自動隱藏攒读，讓出原有標準流的位置。
##### 脫離標準流
display屬性更改的顯示模式并沒有改變標準流本質(zhì)性質(zhì)辛友，頁面還是只能從上而下加載薄扁，存? 在空白折疊等微觀性質(zhì)。要想實現(xiàn)更多的界面布局效果需要脫離標準流的限制废累。
標簽元素脫離標準流的方法包括：浮動邓梅、絕對定位、固定定位邑滨。
##### 浮動定義
* 作用：讓元素脫離標準流日缨，同一級的浮動的元素可以并排在一排顯示。
* 屬性名：float掖看。
*? 屬性值：
? ? 1. left 左浮動
? ? 2. right 右浮動
##### 浮動性質(zhì)
* 標準文檔流的特點是區(qū)分行塊匣距，浮動的元素脫離了標準流的顯示，具備行塊二象性哎壳，浮動的元素可以設(shè)置寬高毅待，還可以并排成一行，而且不會有空白折疊現(xiàn)象耳峦，如果元素不設(shè)置寬高，可以被元素內(nèi)容自動撐高焕毫。
* 浮動的元素依次貼邊蹲坷，浮動方向設(shè)置不同驶乾，進行布局時，加載位置方向不同循签。以left為例级乐，如果父元素寬度足夠，所有子元素會按照html元素書寫順序一次向左進行貼邊县匠。如果父元素的寬度不夠风科，那么接下來的元素會繼續(xù)在下面一次貼邊。
* 浮動的元素沒有margin塌陷乞旦，margin塌陷現(xiàn)象是出現(xiàn)在標準流中的贼穆，浮動元素已經(jīng)脫離標準流，不再具有margin塌陷現(xiàn)象兰粉。
* 浮動的元素讓出標準流位置故痊，元素浮動之后，脫離了標準流玖姑，會將原來占有的 標準流的位置讓給后面的同級元素,浮動的元素會壓在后面的標準流元素的上面愕秫，造成壓蓋效果。
* 字圍現(xiàn)象焰络，統(tǒng)計元素中前面的元素浮動戴甩，后面的元素不浮動，不浮動的元素內(nèi)部還有文字闪彼，文字不會被蓋住甜孤，圍繞這個浮動元素進行加載。
利用浮動的這個依次貼邊性質(zhì)备蚓，可以完成多種網(wǎng)頁布局效果课蔬，例如：平均分布表格效果，導(dǎo)航欄效果郊尝，常見的電商或者企業(yè)網(wǎng)站布局二跋。
##### 浮動問題
* 標準流中的元素，不設(shè)置高度的情況下流昏，會被內(nèi)部的標準流元素自動撐高扎即，如果內(nèi)部的子元素進行了浮動，浮動的子元素是無法撐高標準流的父親元素况凉。
* 父元素沒有高度谚鄙，會影響后面的標準流位置，如果浮動的子元素足夠高時刁绒，有可能會影響到后面浮動元素的貼邊闷营。
##### 清除浮動一：height
給標準流的父元素強制給一個合適的高度。
* 解決：父元素有了高度，前面的浮動不能影響后面元素的標準流位置和貼邊傻盟。
* 問題：父元素高度不是自適應(yīng)速蕊，一旦子元素的高度變化，問題會再次出現(xiàn)娘赴。
##### 清除浮動二：clear屬性
* 作用：清除標簽元素自身受到的前面的浮動元素的影響规哲。
* 屬性值：
? ? 1.? left 清除前面左浮動帶來的影響。
? ? 2.? right 清除前面右浮動帶來的影響诽表。
? ? 3.? both 清除前面所有浮動帶來的影響唉锌。
* clear: both;
* 解決：浮動元素影響后面的元素標準流位置和貼邊。
* 問題：父元素不能高度自適應(yīng)竿奏，兩個父元素之間如果有margin效果不正確袄简。
給標準流父元素添加clear屬性，父元素不受前面浮動影響议双，不會再占有浮動讓出的位置痘番。
##### 清除浮動三：隔墻法
###### 外墻法
* 外墻法：在兩個大的父盒子之間，添加一個空的<div>標簽平痰，標簽上帶有clear：both屬性汞舱。
* 解決：浮動影響后面元素標準流位置和貼邊，模擬父元素之間的距離宗雇。
* 問題：父元素沒有高度自適應(yīng)昂芜。
###### 內(nèi)墻法
* 內(nèi)墻法：在父元素的最后面添加一個空的<div>標簽，標簽上帶有clear：both屬性赔蒲。
* 解決：父元素高度自適應(yīng)泌神，浮動影響后面的元素位置和貼邊。
* 缺點：浮動是css樣式屬性帶來的問題舞虱，內(nèi)墻法使用html結(jié)構(gòu)去輔助解決問題欢际，如果頁面中浮動元素很多，需要添加多個沒有語義的空標簽矾兜，造成html結(jié)構(gòu)的冗余损趋。
##### 清除浮動四：偽類
本質(zhì)是使用偽類方法利用css代碼書寫一段內(nèi)墻。
* 偽類選擇器：通過選中的標簽添加偽類椅寺，去選中標簽的某個狀態(tài)或者位置浑槽。
* :after 這個偽類表示選中的是某個標簽內(nèi)部的最后的位置。
* 書寫方法：前面必須加普通的選擇器返帕，后面連續(xù)書寫偽類名稱桐玻。
* 將偽類添加給一個選中父盒子的選擇器后面，一般要給清除浮動的父盒子設(shè)置一個clearfix的類名荆萤。
注意：:after中必須要添加content屬性镊靴，content屬性設(shè)置為空就可，如果不設(shè)置為空，那么就要將:after 添加一個visibility：hidden偏竟；屬性算行，高度設(shè)置為0；
##### 溢出隱藏
* 給內(nèi)部有浮動元素的父元素添加溢出隱藏overflow:hidden; 屬性苫耸，可以解決浮動的所有問題。
* 高度自適應(yīng)原因：一個元素沒有設(shè)置高度儡陨，同時設(shè)置了溢出隱藏褪子，瀏覽器在加載盒子尺寸時，遇到溢出隱藏瀏覽器會強制去檢索內(nèi)部的子元素的高度骗村，不論子元素是標準流還是浮動嫌褪，都會將最高的高度作為父盒子高度去加載。
* 浮動影響后面的元素：父元素有了高度之后胚股，可以管理內(nèi)部所有的浮動元素笼痛，不會延伸到后面標簽中影響貼邊。
###### 如果父元素高度是固定的琅拌，建議使用height屬性解決缨伊，如果不是自適應(yīng)的，建議使用overflow屬性解決浮動問題进宝。
#### <a>標簽的四個偽類選擇器
##### 偽類
* 偽類和類之間有一定的相似之處刻坊，也存在明顯的區(qū)別。
* 普通的類：必須給標簽設(shè)置對應(yīng)的class屬性值党晋，才能選中標簽谭胚，而且類選擇器后面添加的屬性，會立即加載到瀏覽器之上未玻。
* 偽類：不需要給標簽添加任何屬性灾而，偽類名都是語法提前規(guī)定好的，書寫時偽類必須搭配其他選擇器使用扳剿，偽類選擇器后面添加的樣式不一定會立即加載到瀏覽器之上旁趟，只有用戶出發(fā)了對應(yīng)的行為，偽類的樣式才會立即加載舞终。
* 偽類和偽元素的區(qū)別：
? ? * 偽類：是添加在一個具體的已經(jīng)有了的元素之上的轻庆，選中的是元素的某種狀態(tài)，元素又可能因為狀態(tài)的改變導(dǎo)致偽類選中的內(nèi)容會動態(tài)發(fā)生變化敛劝。類似于偷偷的給元素添加一個class類余爆。在DOM中并不會真的找到這個類，所以叫偽類夸盟。偽類的權(quán)重與類選擇器一樣蛾方。
? ? * 偽元素：在DOM中新生成了一個元素，選中的是這個新元素，類似于標簽選擇器的效果桩砰，在DOM中無法選中這個新元素拓春，偽元素的權(quán)重與標簽選擇器一樣。
##### <a>標簽的偽類
* <a> 標簽可以根據(jù)用戶行為不同劃分為四種狀態(tài)亚隅，通過對<a>標簽的偽類可以將四種狀態(tài)選中設(shè)置為不同的樣式效果硼莽，用戶觸發(fā)對應(yīng)行為，就可以加載對應(yīng)的樣式煮纵。
* <a>標簽的四種偽類：
? ? 1. a:link 訪問前狀態(tài)
? ? 2. a:visited 訪問后狀態(tài)
? ? 3. a:hover 鼠標懸浮時狀態(tài)
? ? 4. a:active 鼠標點擊狀態(tài)
* <a>標簽的偽類書寫順序：
? ? * <a>標簽上可能會同時出發(fā)2到3個狀態(tài),每個狀態(tài)的屬性都會進行加載懂鸵，相同的屬性之間會發(fā)生疊層。
? ? * 偽類的權(quán)重是相同的行疏，只能根據(jù)書寫順序匆光，后寫的層疊先寫的。
? ? * 為了讓每個偽類的狀態(tài)正常進行加載酿联，書寫順序必須是：訪問前l(fā)ink终息，訪問后visited，鼠標懸浮hover贞让，鼠標點擊active周崭。
##### <a>標簽的偽類實際應(yīng)用
一般會將訪問前和訪問后狀態(tài)設(shè)置為一樣的效果，保證了頁面的統(tǒng)一性喳张，可以選擇性的設(shè)置鼠標懸浮時和鼠標點擊狀態(tài)休傍。
<a>標簽任何普通的選擇器，可以同時選中四種狀態(tài)蹲姐，可以將四種狀態(tài)設(shè)置為相同的樣式磨取，屬性可以設(shè)置所有的<a>標簽?zāi)J顯示樣式的屬性，包括盒模型柴墩、文字等忙厌。
注意：其他標簽也可以設(shè)置:hover偽類狀態(tài)。
#### CSS背景屬性
CSS中通過background屬性來設(shè)置背景江咳，它是一個綜合屬性逢净，可以拆分成多個單一屬性。
##### background-color：背景顏色
* 作用：在盒子區(qū)域添加背景顏色的修飾歼指。
* 加載區(qū)域：在border以及內(nèi)加載背景顏色爹土。
* 屬性值：顏色名，顏色值踩身。
##### background-image：背景圖片
* 作用：給盒子添加圖片的背景修飾胀茵。
* 加載區(qū)域：默認的加載到邊框及以內(nèi)部分，后期如果圖片不重復(fù)加載挟阻，加載從border以內(nèi)開始琼娘。
* 屬性值：url(圖片路徑) eg: background-image: url(images/meng.jpg)
* url：uniform resource locator峭弟，統(tǒng)一資源定位符，小括號內(nèi)部書寫查找圖片的路徑脱拼。
背景圖和背景顏色可以同時設(shè)置瞒瘸，背景圖會壓蓋背景顏色，沒有背景圖的區(qū)域會顯示背景顏色熄浓。
##### background-repeat：背景重復(fù)
* 作用：設(shè)置添加的背景圖是否在盒子中重復(fù)進行加載情臭。
* 屬性值：
? ? 1. repeat 重復(fù)，默認值赌蔑，表示會使用背景圖片重復(fù)加載填滿整個盒子背景區(qū)域谎柄。
? ? 2. no-repeat 不重復(fù)，不論背景圖是否大于盒子范圍惯雳，都只加載一次。
? ? 3. repeat-x 水平重復(fù)鸿摇，使用背景圖片水平重復(fù)加載鋪滿第一行石景，垂直方向不重復(fù)。
? ? 4. repeat-y 垂直重復(fù)拙吉，使用背景圖片垂直重復(fù)加載鋪滿第一列潮孽，水平方向不重復(fù)。
##### background-position：背景位置
* 作用：主要用于設(shè)置不重復(fù)的圖片在北京區(qū)域的加載開始位置筷黔。
* 屬性值：分為三種寫法往史，單詞表示法，像素表示法佛舱，百分比表示法椎例。不論哪種寫法，屬性值都有兩個请祖，值之間用空格分離订歪。
* 單詞表示法：
? ? * 水平方向可選單詞：left、center肆捕、right
? ? * 垂直方向可選單詞：top刷晋、center、bottom
* 第一個屬性值：表示背景圖片在水平方向的位置慎陵。
* 第二個屬性值：表示背景圖片在垂直方向的位置眼虱。
* 單詞表示圖片與盒子背景區(qū)域進行對應(yīng)方向的對齊。
頂點的坐標原點是左上角席纽。
##### background-attachment：背景附著
* 設(shè)置的是背景圖片是否要隨著頁面或者盒子的滾動而滾動捏悬。
* 屬性值：
? ? 1. scroll 滾動的， 表示背景圖片與盒子保持相對位置不變润梯，隨著頁面的滾動而滾走邮破。
? ? 2. fixed 固定的诈豌，背景圖的定位參考點從盒子border以內(nèi)的左上頂點變成瀏覽器的左上角的頂點。頁面滾動時抒和，背景圖固定在瀏覽器窗口的某個位置矫渔，不會隨著頁面滾動而滾走。
##### background綜合寫法
background屬性可以將五個單一屬性的值進行合寫摧莽。
屬性值：可以有1-5個屬性值庙洼，值之間用空格進行分隔，背景定位的兩個屬性值算作一個屬性值镊辕，不能被分開油够，也不能顛倒順序，五個屬性值之間可以互換位置征懈。
eg：
```
background: {url(image/bg.jpg) no-repeat center top fixed #f00}
```
注意：如果屬性值沒有設(shè)置完全石咬，其他沒有設(shè)置的單一屬性會按照默認值加載。
如果想去層疊綜合屬性中的一部分卖哎，其他的屬性保持不變鬼悠，最好使用單一屬性寫法進行層疊。
##### 背景半透明
css3支持背景半透明的寫法亏娜，顏色值增加了一種rgba模式焕窝。
* rgba模式：在rgb基礎(chǔ)上增加了一個不透明度的設(shè)置，不透明度alpha取值范圍在0-1之間维贺，0表示完全透明它掂，1表示完全不透明，0.5表示半透明溯泣。
* 書寫方式：rgba(紅色,綠色,藍色,不透明度)
注意：背景半透明是指盒子背景半透明虐秋，盒子里面的內(nèi)容不受影響，同樣垃沦，可以給文字和邊框透明熟妓，都是rgba的格式來寫。
##### background-size：背景縮放
通過background-size 設(shè)置背景圖片的尺寸栏尚，就像我們設(shè)置<img>的尺寸一樣起愈，在移動web開發(fā)中做屏幕適配應(yīng)用非常廣泛。
* 屬性值：
? ? 1. px值 1-2像素值译仗，只設(shè)置1個值抬虽，垂直方向等比例拉伸，設(shè)置兩個值纵菌，按照設(shè)置值加載阐污。
? ? 2. 百分比 同像素值設(shè)置方法相同，設(shè)置百分比時咱圆，數(shù)值參照盒子的寬笛辟、高屬性功氨。
? ? 3. cover 自動調(diào)整縮放比例，把背景圖像擴展在足夠大手幢，使背景圖片完全覆蓋背景區(qū)域捷凄，如有溢出部分則會被隱藏。
? ? 4. contain 自動調(diào)整所房里围来，把圖像擴展至最大尺寸跺涤，保證圖片始終完整顯示在背景區(qū)域，但是有可能不會填滿背景區(qū)域监透。
##### 多背景
css中規(guī)定桶错，一個盒子上，可以添加多個背景圖片胀蛮。
background-image的屬性值書寫時院刁，以逗號分隔多背景的URL路徑地址。
注意：背景加載時粪狼，先寫的背景壓蓋住后面的背景圖片退腥。
```
background-image:url(image/bg_1.jpg),url(image/bg_2.jpg);
```
#### position：定位屬性
設(shè)置定位的元素，它需要根據(jù)某個參考元素發(fā)生位置的偏移鸳玩。
* 屬性值：
? ? 1. relative 相對定位
? ? 2. absolute 絕對定位
? ? 3. fixed 固定定位
* 偏移量屬性：定位的元素要想發(fā)生位置的移動，必須搭配偏移量屬性進行設(shè)置演闭。
? ? 1. 水平方向：left不跟、right。
? ? 2. 垂直方向：top米碰、bottom窝革。
* 屬性值：常用px為單位的數(shù)值，或者百分比吕座。
##### 相對定位
* 屬性值：relative,相對的意思虐译。
* 參考元素：標簽加載的原始位置。
* 性質(zhì)：相對定位的元素不脫離標簽的原始狀態(tài)(標準流吴趴、浮動)漆诽，不會讓出原來的位置。
在元素顯示效果上锣枝，原位留坑厢拭，形影分離。
* 注意事項：
? ? 1. 偏移量屬性的值是區(qū)分正負的撇叁。
? ? 2. 同一個方向供鸠，不能設(shè)置兩個偏移量屬性，如果水平方向設(shè)置了left和right屬性陨闹，只會加載left屬性楞捂。垂直方向只加載top屬性薄坏。
? ? 3. 由于相對定位的參考元素是自身，left的正值等于right的負值寨闹，top的正值等價于bottom的負值胶坠。
* 實際應(yīng)用：
? ? 1. 由于相對定位元素比較穩(wěn)定，不會隨意讓出位置鼻忠，可以將相對定位的元素作為后期絕對定位的參考元素撑教，就是所說的子絕父相情況沙郭。
? ? 2. 相對定位比較穩(wěn)定，可以在占有原有位置的情況下，對加載效果區(qū)域進行位置調(diào)整孵稽，進行微調(diào)設(shè)置∥痰樱或者對文字進行微調(diào)形庭。
##### 絕對定位
* 屬性值：absolute，絕對的意思埋酬。
* 參考元素：參考得到是距離最近的有定位的祖先元素哨啃，如果祖先都沒有定位，參考<body>写妥。
* 性質(zhì)：絕對定位的元素脫離標準流拳球，會讓出標準流位置，可以設(shè)置寬高珍特，也可以隨時定義未知祝峻，絕對定位的元素不設(shè)置寬高只能被內(nèi)容撐開。
* 注意事項：
? ? 1. 絕對定位的參考元素是不固定的扎筒，不同的參考元素以及不同的偏移量組合莱找，會導(dǎo)致絕對定位元素的參考點不同，具體位置效果不同嗜桌。
? ? 2. 在絕對定位中奥溺，由于參考點不同，left正值不再等價于right的負值骨宠。
* 絕對定位參考點：
? ? 1. 以<body>為參考元素時浮定，參考點的確定與偏移量方向相同。
? ? ? ? ①. 如果有top參與的定位层亿，參考點就是<body>頁面的左上頂點和右上頂點壶唤。自身的對比點是盒子的所有盒模型屬性最外面的左上角或者右上角。
? ? ? ? ②. 如果有bottom參與的絕對定位棕所，參考點是<body>頁面首屏的左下頂點或者右下頂點闸盔。對比點是盒子的所有的盒模型屬性最外面的左下角或者右下角。
? ? 2. 祖先級為參考元素琳省，如果祖先級中有定位的元素迎吵，就不會去參考<body>躲撰。根據(jù)絕對定位的參考元素的定位類型不同，有三種方式：子絕父相击费、子絕父絕拢蛋、子絕父固。由于相對定位的祖先位置更穩(wěn)定蔫巩，大多使用子絕父相的情況谆棱。
##### 固定位置
* 屬性值：fixed，固定的意思圆仔。
* 參考元素：瀏覽器窗口垃瞧。
* 參考點：瀏覽器窗口的四個頂點。跟偏移量組合方向有關(guān)坪郭。
由于瀏覽器窗口的四個頂點的位置不會發(fā)生變化个从，會導(dǎo)致固定定位的元素會始終顯示定位位置。
* 性質(zhì)：固定定位的元素脫離標準流歪沃，讓出標準流位置嗦锐，可以設(shè)置寬高，根據(jù)偏移量屬性可以任意設(shè)置在瀏覽器窗口的位置沪曙。固定定位的元素會始終顯示在瀏覽器窗口上奕污。
##### 定位的應(yīng)用
###### 壓蓋效果
所有的定位類型都可以實現(xiàn)壓蓋效果。
由于絕對定位的元素脫標液走，不占標準流位置碳默。壓蓋效果更徹底，實際工作中育灸，常見的是絕對定位支座的壓蓋腻窒。
###### 居中
定位的元素昵宇，如果想在參考元素中居中顯示磅崭，有自己的居中方法：
1. 在居中的方向使用一個偏移量屬性，例如left瓦哎，設(shè)置屬性值為50%砸喻。導(dǎo)致圖片的左頂點移動到參考元素的中心位置。百分比形式的屬性值蒋譬，參考的是參考元素的border以內(nèi)的寬度和高度割岛。
2. 給絕對定位的子盒子設(shè)置一個同方向的margin，例如margin-let犯助，屬性值為負的自身寬度的一半癣漆。
注意：不論子盒子的寬度是否比參考元素更寬，都可以使用以上方法進行居中設(shè)置剂买。
##### 拓展應(yīng)用
1. 解決標準流中惠爽，寬的子盒子在窄的父盒子中的居中癌蓖，可以設(shè)置大的子盒子相對定位，利用相對定位居中的方法進行居中婚肆。
2. 浮動的元素居中租副，在不改變原始浮動狀態(tài)情況下，可以利用相對居中方法较性。
實際使用定位時用僧，可能出現(xiàn)多個定位的元素加載到同一個位置的情況，這時候壓蓋的順序是可以控制的赞咙。
* 默認壓蓋順序：定位的元素不區(qū)分定位類型责循，都回去壓蓋標準流或者浮動的元素。如果都是定位的元素人弓，在HTML中后寫的定位壓蓋先寫的定位沼死。
* 自定義壓蓋順序：如果想更改定位的元素的壓蓋順序，可以設(shè)置一個z-index屬性崔赌。屬性值為數(shù)字意蛀。
* 自定義壓蓋順序的注意事項：
? ? 1. 屬性值大的會壓蓋屬性值曉得，設(shè)置z-index屬性的會壓蓋沒有設(shè)置的健芭。
? ? 2. 如果屬性值相同县钥，比較HTML書寫順序，后寫的會壓蓋先寫的慈迈。
? ? 3. z-index 屬性只能設(shè)置給定位的元素才會生效若贮，如果給沒有定位的元素設(shè)置，不會生效痒留。
? ? 4. 父子盒模型中谴麦，如果父子盒子都進行了定位，與其他的父子級有壓蓋的部分：
? ? ① 父級盒子：如果不設(shè)置z-index伸头，后寫的壓蓋先寫的匾效，如果設(shè)置了z-index，值大的壓蓋值小的恤磷。
? ? ② 子級盒子：如果父級沒有設(shè)置z-index屬性面哼，子級z-index大的會壓蓋小的，如果父級設(shè)置了z-index值扫步，無論子級值是多少魔策，都是父級的值大的子級壓蓋父級值小的子級，俗稱從父效應(yīng)河胎。
* * *
### HTML5新增語義化標簽
##### 新增語義化標簽
* <header>：頭部標簽
* <nav>：導(dǎo)航標簽
* <main>：主體標簽
* <article>：獨立的內(nèi)容標簽
* <section>：區(qū)段標簽
* <aside>：側(cè)邊欄標簽
* <footer>：尾部標簽
#### 多媒體標簽
多媒體標簽包含兩個闯袒，具體如下：
* 音頻：<audio>
* 視頻：<video>
使用他們可以很方便的在頁面中嵌入音頻和視頻，而不是使用落后的flash和其他瀏覽器插件。
##### <audio>音頻標簽
html在不適用插件的情況下也可以原生的支持音頻格式文件的播放政敢，當然支持格式是有限的原茅。
| 格式 |MIME-type? | IE9 | Firefox3.5 | opera10.5 | Chrome3.0 | Safari3.0 |
| --- | --- | --- | --- | --- | --- | --- |
| Ogg |audio/mpeg? |? |√? | √ | √ |? |
| MP3 | audio/ogg | √ |? |? | √ | √ |
|Wav? | audio/wav |? | √ | √ |? | √ |
###### <audio>音頻標簽常見屬性
* 屬性名和屬性值：
1. autoplay 值為autoplay，如果出現(xiàn)該屬性堕仔，則音頻在就緒后馬上播放擂橘。
2. controls 值為controls，如果出現(xiàn)該屬性摩骨，則向用戶顯示控件通贞，比如播放按鈕。
3. loop 值為loop恼五，如果出現(xiàn)該屬性昌罩，則每當音頻結(jié)束時重新開始播放。
4. preload 值為preload灾馒，如果出現(xiàn)該屬性茎用，則音頻在頁面加載時進行加載，并預(yù)備播放睬罗，如果使用"autoplay"轨功，則忽略該屬性。
5. src 值為url容达，要播放的音頻的URL古涧。
* 語法格式
```
<audio src ="文件地址" controls = "controls"></audio>
```
* 兼容寫法
```
<audio controls = "controls">
? ? <source src="happy.mp3" type="audio/mpeg">
? ? <source src="happy.ogg" type="audio/ogg">
? ? ? ? 您的瀏覽器暫不支持audio標簽。
</audio>
```
##### <video>視頻標簽
html在不適用插件的情況下也可以原生的支持視頻格式文件的播放花盐，當然支持格式是有限的羡滑。
| 格式 |MIME-type? | IE | Firefox | opera | Chrome | Safari |
| --- | --- | --- | --- | --- | --- | --- |
| Ogg |video/ogg? |×? | 3.5+ | 10.5+ | 5.0+ | × |
| MP4 | video/mp4 | 9.0+ | × | × | 5.0+ | 3.0+ |
|Wav? | audio/wav | × | 4.0+ | 10.6+ | 6.0+ | × |
###### <video>視頻標簽常見屬性
* 屬性名和屬性值：
1. autoplay 值為autoplay，視頻就緒自動播放(谷歌瀏覽器需要添加muted來解決自動播放問題)
2. controls 值為controls算芯，如果出現(xiàn)該屬性柒昏，則向用戶顯示控件，比如播放按鈕熙揍。
3. loop 值為loop职祷，如果出現(xiàn)該屬性，則每當視頻結(jié)束時重新開始播放诈嘿。
4. preload 值有兩個堪旧，為auto時預(yù)先加載視頻削葱，為none時不預(yù)先加載視頻奖亚，如果使用"autoplay"，則忽略該屬性析砸。
5. src 值為url昔字，要播放的視頻的URL。
6. width 值為px像素值，設(shè)置播放器寬度作郭。
7. height 值為px像素值陨囊，設(shè)置播放器高度。
8. poster 值為imgurl夹攒，加載等待的畫面圖片蜘醋。
9. muted 值為muted，靜音播放
* 語法格式：
```
<video src ="文件地址" controls = "controls"></video>
```
* 兼容寫法
```
<video controls = "controls" width = "300">
? ? <source src="move.ogg" type="video/ogg">
? ? <source src="move.mp4" type="video/mp4">
? ? ? ? 您的瀏覽器暫不支持video標簽咏尝。
</video>
```
#### HTML5新增表單標簽和屬性
##### H5新增<input>表單類型
| 屬性值 | 描述 |
| --- | --- |
| type = "email" | 限制用戶輸入必須為email類型 |
| type = "url"? ? | 限制用戶輸入必須為url類型 |
| type = "date" | 限制用戶輸入必須為日期類型 |
| type = "time" | 限制用戶輸入必須為時間類型 |
| type = "month" | 限制用戶輸入必須為月類型 |
| type = "week" | 限制用戶輸入必須為周類型 |
| type = "number" | 限制用戶輸入必須為數(shù)字類型 |
| type = "range" | 滑動條 |
| type = "tel" | 手機號碼 |
| type = "search" | 搜索框 |
| type = "color" | 顏色 |
##### 新增<datalist>
* <datalist>標簽規(guī)定了<input>元素可能的選項列表
* <datalsit>元素包含了一組<option>元素压语，這些元素表示可能定義可選值，在<input>元素輸入過程中编检，會自動響應(yīng)<option>元素的值胎食。
* 綁定<input>標簽必須設(shè)置list屬性，屬性值等于<datalist>的id的屬性值允懂。
##### 新增表單屬性
| 屬性 | 值 | 描述 |
| --- | --- | --- |
| required | required | 表單擁有該屬性表示其內(nèi)容不能為空 |
| placeholder | 提示文本 | 表單的提示信息厕怜，存在默認值將不提示 |
| autofocus | autofocus | 自動聚焦屬性，頁面加載完成自動聚焦到指定表單蕾总，一般頁面中放一個 |
| autocomplete | off/on | 當用戶在字段開始鍵入時粥航，瀏覽器基于以前輸入的值顯示處在字段中填寫的選項，默認為打開生百。需要放在表單內(nèi)添加name躁锡，同時成功提交 |
| multiple | multiple | 可以選擇多文件提交 |
### CSS3
#### CSS3新增選擇器
##### 子級選擇器
* 作用：子級選擇器用于選取帶有特定父元素的元素。
* 書寫語法：element > element2
* 注意：如果element2元素不是父元素element1的直接子元素置侍，則不會被選擇映之。
* > 符號之前書寫父級的選擇器，> 符號之后寫子級選擇器蜡坊，必須滿足父子級關(guān)系才能選中標簽杠输。
##### 兄弟選擇器
###### 相鄰兄弟選擇器
相鄰兄弟選擇器用于選擇緊接在另一個元素后面的兄弟元素，而且二者有相同的父元素秕衙。
* 書寫語法：E1+E2
* 注意：
? ? a. 選中的是緊跟在E1之后的同級元素E2蠢甲。
? ? b. 只能選中緊跟在后面的一個E2元素。
? ? c. 二者有相同的父元素
? ? d. +符號前后可以添加空格書寫据忘。
###### 其他兄弟選擇器
其他兄弟選擇器匹配同一個父元素中在element1后面的所有element2元素
* 書寫語法：element1 ~ element2
* 注意：
? ? a. 選擇element1 之后出現(xiàn)的所有element2鹦牛。
? ? b. 兩種元素必須擁有相同的父元素，但是element2不比直接緊跟隨element1勇吊。
? ? c. ~ 符號前后可以添加空格書寫曼追。
##### 結(jié)構(gòu)偽類選擇器
| 選擇器 | 簡介 |
| --- | --- |
| E:first-child | 匹配父元素中的第一個子元素E |
| E:last-child | 匹配父元素中最后一個E元素 |
| E:nth-child(n) | 匹配父元素中的第N個子元素E |
| E:first-of-type | 指定類型E的第一個 |
| E:last-of-type | 指定類型E的最后一個 |
| E:nth-of-type(n) | 指定類型E的第n個 |
* nth-child(n)
? ? * n可以是數(shù)字，關(guān)鍵字和公式汉规。
? ? * n如果是數(shù)字礼殊，就是選擇第幾個驹吮。
? ? * 常見的關(guān)鍵詞 even偶數(shù) odd奇數(shù)。
? ? * 如果n是公式晶伦，則從0開始計算碟狞，n從0，1婚陪，2......一直遞增
? ? * 但是第0元素或者超出了元素的個數(shù)會被忽略族沃。
* E:nth-child(n) 和E:nth-of-type(n)的區(qū)別
? ? * E:nth-child(n) 匹配父元素的第n個子元素E，需要同時滿足兩個條件泌参。
? ? * E:nth-of-type(n) 匹配同類型中的第n個同級兄弟元素E竭业，會忽視其他同級的非同類型元素。
##### 偽元素選擇器
* 新增偽元素
| 選擇器 | 描述 |
| --- | --- |
| E::before | 在E元素內(nèi)部的前面插入一個元素 |
| E::after | 在E元素內(nèi)部的湖面插入一個元素 |
| E::first-letter | 選擇到了E容器內(nèi)的第一個字母 |
| E::first-line | 選擇到了E容器內(nèi)的第一行文本 |
* H5寫法和傳統(tǒng)寫法區(qū)別
? ? * 單冒號 E:before
? ? * 雙冒號 E::before
? ? * 瀏覽器對以上寫法都能識別及舍，雙冒號是h5的語法規(guī)范未辆。
* 偽元素的注意事項：
* 偽元素只能給雙標簽添加，不能給單標簽添加锯玛。
* 偽元素的冒號前不能有空格咐柜，如E ::before 這個寫法是錯誤的。
* 偽元素里必須寫上屬性content:"";
* before和after創(chuàng)建一個元素攘残，但是屬于行內(nèi)元素拙友。
* 因為在DOM里面看不見剛才創(chuàng)建的元素，所以我們稱為偽元素歼郭。
##### 屬性選擇器
| 選擇器 | 描述 |
| --- | --- |
| E[att] | 選擇具有att屬性的E元素 |
| E[att="val"] | 選擇具有att屬性且屬性值等于val的E元素 |
| E[att^="val"] | 匹配具有att屬性遗契，且值以val開頭的E元素 |
| E[att$ ="val"] | 匹配具有att屬性，且值以val結(jié)尾的E元素 |
| E[att*="val"] | 匹配具有att屬性病曾，且值中含有val的E元素 |
#### CSS3盒模型
##### box-sizing
CSS3中可以通過box-sizing來指定盒模型牍蜂，這樣我們就可以設(shè)置如何計算一個元素的總寬度和總高度。
* 屬性名：box-sizing
* 屬性值：
? ? * content-box 默認值泰涂，標準盒子模型鲫竞，盒模型是外擴的。width和height只包括內(nèi)容的寬和高逼蒙。在width和height之外繪制的內(nèi)邊距和邊框从绘。
? ? * border-box 怪異模式，盒模型是內(nèi)減的是牢，width和height屬性包括內(nèi)容僵井，內(nèi)邊距和邊框，但不包括外邊距驳棱，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的width和height內(nèi)進行繪制批什。
#### CSS3新增屬性
##### 邊框圓角
* 屬性名：border-radius
* 作用：設(shè)置邊框的圓角。
* 屬性值：可以是像素值蹈胡，或者百分比渊季，百分比參考的是盒子整體寬度、高度罚渐。
* 單一屬性：
? ? * border-top-left-radius: 左上角半徑却汉；
? ? * border-top-right-radius: 右上角半徑；
? ? * border-bottom-right-radius: 右下角半徑;
? ? * border-bottom-left-radius: 左下角半徑荷并。
* 簡寫方法合砂，border-radius相當于四個單一屬性的簡寫方法，類似于padding的寫法源织。
* /的屬性值寫法：border-radius 屬性值中出現(xiàn)了/斜線翩伪，那么/前面可以設(shè)置水平方向四種值的寫法，/后面可以設(shè)置垂直方向的四種值得寫法谈息。
? ? ? ? p{
? ? ? ? ? ? border-radius:50% 20% 40% / 20% 30%;
? ? ? ? }
* 瀏覽器兼容：Internet Explorer8 及以下版本瀏覽器不支持border-radius屬性缘屹，其他瀏覽器都支持。
##### 文字陰影
在css3中侠仇，text-shadow可向文本應(yīng)用陰影轻姿。通過屬性值能夠規(guī)定水平陰影，垂直陰影逻炊，以及陰影的顏色互亮。
| 屬性值 | 描述 |
| --- | --- |
| h-shadow | 必需。水平陰影的位置余素。允許負值豹休。 |
| v-shadow | 必需。垂直陰影的位置桨吊。允許負值威根。? |
| blur | 可選，模糊的距離视乐。 |
| color | 可選医窿。陰影的顏色。 |
* 語法：text-shadow屬性向文本添加陰影炊林，屬性值有2-3個長度值和一個可選的顏色值進行規(guī)定姥卢，省略的長度是0；
? ? ? ? h1 {
? ? ? ? ? ? text-shadow: 3px 4px 4px #F00;
? ? ? ? }
* 多層陰影：屬性也可以想文本添加多個陰影渣聚，逗號分隔多個陰影值独榴。多陰影中，先寫的陰影蓋在后寫的陰影上奕枝。
##### 盒子陰影
在CSS3中棺榔，box-shadow屬性用于對盒子邊框添加陰影。
| 屬性值 | 描述 |
| --- | --- |
| h-shadow | 必需隘道。水平陰影的位置症歇。允許負值郎笆。 |
| v-shadow | 必需。垂直陰影的位置忘晤。允許負值宛蚓。? |
| blur | 可選，模糊的距離设塔。 |
| spread | 可選凄吏。陰影的尺寸。 |
| color | 可選闰蛔。陰影的顏色痕钢。 |
| inset | 可選。將外部陰影改為內(nèi)部陰影 |
* 語法：box-shadow 屬性向盒子添加陰影序六，屬性值有2-4個長度值任连、可選的顏色值以及可選的inset關(guān)鍵詞來規(guī)定，省略的長度是0例诀；
*? 多層陰影：可以向盒子添加多個陰影课梳，逗號分隔多個陰影的屬性值。多陰影中余佃，先寫的陰影壓蓋在后寫的陰影上暮刃。
#### CSS3新增屬性
##### 過渡屬性
* 屬性名：transition
* 作用：在不使用Flash或者javaScript，使用trasition實現(xiàn)補間動畫爆土。并且當前元素狀態(tài)改變的時候椭懊，就會實現(xiàn)過渡的動畫效果
* 語法格式：trasition: 過渡的屬性 過度時間 運動曲線 延時時間；
* 單一屬性寫法
| 屬性 | 描述 |
| --- | --- |
| trasition | 簡寫屬性步势，用于在一個屬性中設(shè)置四個屬性 |
| transition-property | 規(guī)定用于過渡的css屬性的名稱 |
| transition-duration | 定義過渡效果花費的時間氧猬。默認是0s |
| transition-timing-function | 規(guī)定過渡效果的時間曲線。默認是"ease" |
| transition-delay | 規(guī)定過渡效果何時開始坏瘩。默認是0s |
###### transition-property
* none 表示沒有屬性過渡盅抚。
* all 表示所有變化的屬性都過渡。
* 屬性名 使用具體的屬性名倔矾，多個屬性名之間用逗號隔開妄均。
###### transition-duration：過渡時間
* 過渡時間：以s秒為單位。
* 延時時間：以s秒為單位哪自。0s也必須加單位丰包。
###### transition-timing-function 時間曲線
| 屬性值 | 描述 |
| --- | --- |
| linear | 以相同速度開始至結(jié)束的過渡效果 |
| ease | 以慢速開始，然后加速壤巷，最后慢速結(jié)束的過渡效果 |
| ease-in | 以慢速開始的過渡效果 |
| ease-out | 以慢速結(jié)束的過渡效果 |
| ease-in-out | 以慢速開始和結(jié)束的過渡效果 和ease有點類似? |
| cubic-bezier(x1,y1,x2,y2) | 在cubic-bezier函數(shù)中定義自己的值邑彪。x1,x2是0至1之間的數(shù)值，y1,y2取任意值胧华，四個數(shù)值表拉扯點的坐標 |
* 瀏覽器兼容：
? ? * IE10寄症、Firefox宙彪、Chrome以及Opera支持transition屬性。
? ? * Safari需要前綴-webkit-有巧。
? ? * 在IE9以及更早的版本释漆，不支持transition屬性。
#### transform：2D轉(zhuǎn)換
* 屬性名：transform剪决。
* 作用：對元素進行移動灵汪、縮放檀训、旋轉(zhuǎn)柑潦、拉長或拉伸。配合過渡和即將學(xué)習(xí)的動畫知識峻凫，可以取代大量之前只能靠Flash才可以實現(xiàn)的效果渗鬼。
* 屬性值：多種轉(zhuǎn)換方法的屬性值，可以實現(xiàn)不同的效果轉(zhuǎn)換荧琼。
##### translate()：位移
transform的屬性值為translate()時譬胎，可以實現(xiàn)位移效果。
| 值 | 描述 |
| --- | --- |
| translate(x,y) | x,y分別為水平和垂直方向位移的距離命锄，可以為px值或者百分比堰乔，區(qū)分正負。 |
| translate(x) | 只有一個數(shù)值脐恩，表示水平方向的位移
##### scale()：縮放
transform的屬性值為scale()時镐侯，可以實現(xiàn)元素縮放效果。
| 值 | 描述 |
| --- | --- |
| scale(x,y) | x,y分別為改變元素的寬度和高度的倍數(shù) |
| scale(n) | 表示寬度和高度同時縮放n倍 |
| scaleX(n) | 縮放寬度 |
| scaleY(n) | 縮放高度 |
##### rotate():旋轉(zhuǎn)
transform屬性值設(shè)置為rotate()驶冒，實現(xiàn)元素的旋轉(zhuǎn)苟翻。
* 書寫語法：rotate(數(shù)字deg)
其中，deg為度數(shù)單位骗污，正數(shù)表示順時針旋轉(zhuǎn)崇猫，負數(shù)表示逆時針旋轉(zhuǎn)。
注意：元素旋轉(zhuǎn)后需忿，坐標軸也跟著發(fā)生轉(zhuǎn)變诅炉。因此，多個屬性值同時設(shè)置給transform時屋厘，書寫順序不同導(dǎo)致轉(zhuǎn)換效果有差異汞扎。
##### skew():傾斜
transform屬性值設(shè)置為skew()時，實現(xiàn)元素的傾斜擅这。
* 書寫語法：skew(數(shù)字deg,數(shù)字deg)
兩個屬性值分別表示水平和垂直方向傾斜的角度澈魄，屬性值可以為正，可以為負仲翎，第二個值不寫默認為0痹扇。
##### transform-origin:基準點
* 作用：設(shè)置調(diào)整元素的水平和垂直方向原點的位置铛漓。
| 屬性值 | 描述 |
| --- | --- |
| x | 定義X軸的原點在何處，可能的值為：left鲫构、center浓恶、right、像素值结笨、百分比 |
| y | 定義Y軸的原點在何處包晰，可能的值為：left、center炕吸、right伐憾、像素值、百分比 |
#### 3D轉(zhuǎn)換
transform屬性不知能實現(xiàn)2D轉(zhuǎn)換赫模，也可以制作3D立體轉(zhuǎn)換效果树肃，比普通的x、y軸組成的平面多了一條z軸瀑罗。
##### perspective：透視
* 屬性名：perspective胸嘴。
* 作用：設(shè)置在z軸的視線焦點的觀察位置，從而實現(xiàn)3D查看效果斩祭。
* 屬性值：像素值劣像，數(shù)值越大，觀察點距離z軸原點越遠摧玫，圖形效果越完整且接近原始尺寸耳奕。
* 注意：透視屬性需要設(shè)置給3D變化元素的父級。
##### 3D旋轉(zhuǎn)
| 值 | 描述 |
| --- | --- |
| rotateX(angel) | 定義沿著X軸的3D旋轉(zhuǎn) |
| rotateY(angel) | 定義沿著Y軸的3D旋轉(zhuǎn) |
| rotateZ(angel) | 定義沿著Z軸的3D旋轉(zhuǎn) |
##### 3D位移
| 值 | 描述 |
| --- | --- |
| translateX(x) | 設(shè)置X軸的位移值 |
| translateY(y) | 設(shè)置Y軸的位移值 |
| translateZ(z) | 設(shè)置Z軸的位移值 |
##### transform-style
用于設(shè)置被嵌套的子元素在父元素的3D空間中展示席赂，子元素會保留自己的3D轉(zhuǎn)換坐標吮铭。
* 屬性值：
? ? * flat：所有子元素在2D平面呈現(xiàn)。
? ? * preserve-3d：保留3D空間颅停。
##### 瀏覽器兼容問題
IE10谓晌、Firefox以及Opera支持transform屬性。
Chrome和Safari需要前綴-webkit-癞揉。
IE9 需要前綴 -ms-纸肉。
#### 動畫
css3中提供了自己的動畫制作方法，這可以在許多網(wǎng)頁中取代動畫圖片喊熟、Flash動畫以及JavaScript柏肪。
css3動畫制作分為兩步：創(chuàng)建動畫、綁定動畫芥牌。
##### @keyframes 規(guī)則
@keyframes規(guī)則用于創(chuàng)建動畫烦味。
在@keyframes中規(guī)定某項css樣式，就能創(chuàng)建由從一種樣式逐漸變化為另一種樣式的結(jié)果∶恚可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)柏靶。
需要使用百分比來規(guī)定變化發(fā)生的時間，或用關(guān)鍵詞"from"和"to"溃论，等同于0%和100%屎蜓。
* @keyframes書寫方法
? @keyframes 動畫名稱{
? ? ? ? 動畫過程，可以添加任意百分比處的動畫細節(jié)钥勋。
? }
##### animation屬性
需要將@keyframes中創(chuàng)建的動畫綁定到某個選擇炬转，否則不產(chǎn)生動畫效果。
* 語法：
div{
? ? animation:動畫名稱? 過度時間 速度曲線 動畫次數(shù) 延時時間算灸；
}
* 單一屬性列表：
| 屬性 | 描述 |
| --- | --- |
| animation-name | 規(guī)定@keyframes動畫的名稱扼劈。 |
| animation-duration | 規(guī)定動畫完成一個周期所花費的秒或者毫秒，默認是0 |
| animation-timing-function | 規(guī)定動畫的速度曲線乎婿，默認是"ease" |
| animation-delay | 規(guī)定動畫何時開始测僵，默認是0 |
| animation-iteration-count | 規(guī)定動畫播放的次數(shù)街佑，默認是1谢翎，infinite表示無限次 |
##### 瀏覽器兼容
IE10、Firefox以及Opera支持@keyframes規(guī)則和animation屬性沐旨。
Chrome 和Safari 需要前綴 -webkit-森逮。
IE9，以及更早的版本磁携，不支持@keyfames規(guī)則或者animation屬性褒侧。
```
????????.box?{
????????????width:100px;
????????????height:?100px;
????????????margin:100px?100px;
????????????background-color:?yellowgreen;
????????????animation:?move?5s?linear?0s?infinite;
????????}
????????@keyframes?move?{
????????????0%{
????????????????transform:?translate(0,0);
????????????}
????????????25%{
????????????????transform:?translate(500px,0);
????????????}
????????????50%{
????????????????transform:?translate(500px,500px);
????????????}
????????????75%{
????????????????transform:?translate(0,500px);
????????????}
????????????100%{
????????????????transform:?translate(0,0);
????????????}
????????}
```
