第一章
F12:
element.style????? ? 內(nèi)聯(lián)樣式（可以直接在上面寫代碼進(jìn)行簡(jiǎn)單調(diào)試）
user agent stylesheet? ? 用戶代理樣式
Inherited from** ? ? ? ? 從**繼承
代碼有個(gè)刪除線表示沒有應(yīng)用，有個(gè)黃色三角嘆號(hào)表示寫錯(cuò)了
? ? Unknown property name? ? 不認(rèn)識(shí)的屬性名稱（屬性名寫錯(cuò)了）
? ? Invalid property value ? ? ?? 未驗(yàn)證的屬性值（屬性值寫錯(cuò)了 || 忘加分號(hào) || 分號(hào)寫成中文）
Computed(計(jì)算后) ?? display: ?? online? ? 行內(nèi)元素
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? block ? ? 塊級(jí)元素
margin ?? 示意圖若邊距上的數(shù)字為 - ，表示沒有
Network ?網(wǎng)絡(luò)請(qǐng)求和響應(yīng) ? ?利用瀏覽器緩存的技術(shù)減少請(qǐng)求的次數(shù)
inherit屬于CSS關(guān)鍵字，所有的屬性都可以接受該值，該值使得屬性能夠繼承祖先設(shè)置
normal也是關(guān)鍵字，可將元素的屬性恢復(fù)為設(shè)置前的值，如：line-height：normal;
display:initial; ? ?不論父元素如何設(shè)定，恢復(fù)到瀏覽器最初始時(shí)的display屬性
display: unset; ? ?改值混合了inherit和initial，如果父元素設(shè)置了就用父元素的設(shè)定,否則用瀏覽器的缺省設(shè)定
CSS的七層層疊順序:
background/border < 負(fù)z-index < block塊級(jí)元素 < float浮動(dòng) < inline/inline-block
< z-index:auto或z-index:0 < 正z-index
注意：若設(shè)置opacity，則會(huì)形成一個(gè)新的層疊上下文，如opacity:0.99，則會(huì)位于正z-index的下面
CSS應(yīng)遵循關(guān)注分離、松耦合的原則，同時(shí)需要注重理解，即使更改了 HTML?標(biāo)簽，也不需要修改 CSS?選擇符，所以，給相應(yīng)元素添加 class?是一個(gè)可選方案
_______________________________________________________________________________________
css的渲染的過程:
①?根據(jù)HTML的結(jié)構(gòu)生成DOM樹(DOM樹包含了display:none的節(jié)點(diǎn))
②?在DOM樹的基礎(chǔ)上，根據(jù)節(jié)點(diǎn)的幾何屬性(margin/padding/width/height/left等)生成render樹
③?在render樹的基礎(chǔ)上繼續(xù)渲染color、font、transform、opacity等屬性
如果①和②發(fā)生變化，會(huì)發(fā)生回流(reflow)，而如果僅僅③中的屬性發(fā)生改變，僅會(huì)觸發(fā)重繪(repaint)，即回流必然伴隨著重繪，回流會(huì)影響瀏覽器css的渲染速度
reflow(回流):?當(dāng)render樹中的一部分或者全部因?yàn)榇笮∵吘嗟葐栴}發(fā)生改變而需要重建的過程叫做回流
repaint(重繪):?當(dāng)元素的一部分屬性發(fā)生變化，如外觀背景色，不會(huì)引起布局變化而需要重新渲染的過程叫做重繪
在瀏覽器中用css開啟硬件加速，使用GPU(Graphics Processing Unit)可以提升頁(yè)面性能
常用3d變化(translate3d屬性)來(lái)開啟硬件加速(會(huì)增加內(nèi)存使用)，如:
.css{ -webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);
? ? ? ?transform:translate3d(0,0,0);?}
_______________________________________________________________________________________
CSS（Cascading Style Sheets）層疊樣式表、級(jí)聯(lián)樣式表、簡(jiǎn)稱：樣式表
? ? 實(shí)現(xiàn)了內(nèi)容（HTML）與表現(xiàn)（CSS）的分離
CSS與HTML之間的關(guān)系
? ? HTML：主要用于構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)與內(nèi)容
? ? CSS： ?用于構(gòu)建HTML元素的樣式
????CSS的作用：1、以統(tǒng)一的方式實(shí)現(xiàn)樣式的定義
? ? ? ? ? ? ? ? ? ? ? 2、提高頁(yè)面代碼的可重用性和可維護(hù)性
HTML屬性與CSS樣式的使用原則
W3C：建議盡量使用CSS樣式取代HTML屬性
? ? HTML特有的屬性只能使用HTML屬性
? ? 例：colspan(在CSS中沒有方式能夠取代，所以針對(duì)跨行跨列來(lái)講，只能使用HTML元素屬性，不能使用CSS屬性)，rowspan也一樣
CSS語(yǔ)法
一、css樣式表的使用方式
? ①內(nèi)聯(lián)方式：也叫行內(nèi)樣式，將css樣式聲明在單個(gè)HTML元素中的style屬性中
? ? ? 語(yǔ)法：<ANY style="樣式聲明；樣式聲明"></ANY>
? ? ? 樣式聲明：表示一個(gè)具體顯示效果，多個(gè)樣式聲明之間，用;隔開
每個(gè)樣式聲明都由兩部分組成：樣式屬性：屬性值；
? ? ? ?? 例：設(shè)置某元素的文本顏色為紅色，文字大小為24px；背景顏色為綠色
? ? ? <ANY style="color:red;font-size:24px;background-color:green;"></ANY> ? ? ??用分號(hào)分隔
? ②內(nèi)部樣式表：將"樣式表"定義在頁(yè)面<head></head>的 style 屬性中
? ? ? 步驟：1. 在<head>中添加<style></style>元素
? ? ? ? ? ? ?? 2. 在 style 中添加若干"樣式規(guī)則"
樣式規(guī)則：
選擇器{
? 樣式聲明；
? 樣式聲明；
? ...
}
選擇器：規(guī)范了頁(yè)面中哪些元素能夠使用定義好的樣式
? ③外部樣式表：將 "樣式表" 定義在外部 css 文件中(**.css)
步驟：1. 創(chuàng)建一個(gè)單獨(dú)的樣式表文件保存樣式規(guī)則：**.css
? ? ? ? ? ? ? ? ?? 只能編寫遵循css規(guī)范的內(nèi)容
? ? ? ? ? ? ? ? 2. 在需要的頁(yè)面上使用 <link> 標(biāo)記鏈接引入樣式表文件
<head>
? <link rel="stylesheet" type="text/css" href="樣式表文件路徑">
</head>
二、css樣式表特征
? 1. 繼承性：子級(jí)元素可以直接使用父級(jí)元素聲明好的樣式(可減少代碼量)
? ? ? ? ? ? ? ? ? 大部分的css樣式屬性是可以被繼承的
? 2.層疊性：可以為一個(gè)元素聲明多個(gè)樣式規(guī)則
? ? ? ? ? ? ? ? ? 如果樣式不沖突的話，多個(gè)樣式規(guī)則中的樣式可以層疊為一個(gè)
? 3. 優(yōu)先級(jí)：樣式定義沖突時(shí)，按照不同樣式規(guī)則的"優(yōu)先級(jí)"來(lái)應(yīng)用樣式
? ? ? ? ? ? ? ? ?就近原則：就近優(yōu)先---誰(shuí)離元素近，就用誰(shuí)，后定義者優(yōu)先
? ? ? ? ? ? ? ? ? 瀏覽器缺省設(shè)置（user agent stylesheet，UA樣式） ?? 最低
? ? ? ? ? ? ? ? ? 外部樣式表或內(nèi)部樣式表 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 中
? ? ? ? ? ? ? ? ? 內(nèi)聯(lián)樣式 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?最高
? ? ? ? ? ? ? ? ? 相同樣式，以最后一次為主
? 4. ! important規(guī)則(僅對(duì)前面的一個(gè)屬性生效)
? ? 作用：顯示調(diào)整優(yōu)先級(jí)，永遠(yuǎn)都以!inportant的為準(zhǔn)
? ? 語(yǔ)法：屬性名：值? !important;
? ? ? ? ? ? ?將 !important 添加到樣式屬性值的后面，中間用空格隔開
? ? 注意：盡量少用
? ? 弊端：① IE6及以下瀏覽器不支持
? ? ? ? ? ? ?② 會(huì)打破默認(rèn)的優(yōu)先級(jí)規(guī)則
三、注釋：/*注釋語(yǔ)句*/
____________________________________________________________________________________
CSS基礎(chǔ)選擇器
作用：規(guī)范了頁(yè)面中哪些元素能夠使用定義好的樣式
目的：將定義好的樣式匹配給頁(yè)面中的元素
1、通用選擇器
? 作用：匹配頁(yè)面中所有的元素
語(yǔ)法：*{樣式聲明；}
? 缺點(diǎn)：效率較低，盡量不用
? ? ? ? ?? 大部分屬性可以通過繼承來(lái)取代*
2、元素選擇器
? 別名：標(biāo)簽選擇器、標(biāo)簽樣式、元素樣式、標(biāo)記選擇器
? 作用：定義或重寫頁(yè)面某一類標(biāo)簽元素的默認(rèn)樣式
語(yǔ)法：元素名稱{樣式聲明；}
3、類選擇器
? 作用：用于定義一些元素的通用樣式，定義好樣式后，可以被任意元素的class屬性值進(jìn)行引用的選擇器
語(yǔ)法：.類名{樣式聲明；}
? 使用：<ANY class="類名"></ANY>
? 注意：① 由英文，數(shù)字，下劃線（_）連字符（-）組成
? ? ? ? ?? ② ?類名不能以數(shù)字開頭
? ? ? ? ?? ③ ?除 _ - 以外不能有其他特殊符號(hào)
? 1、多類選擇器的引用
? ? ? ?方式：讓一個(gè)元素同時(shí)引用多個(gè)類選擇器
語(yǔ)法：<ANY class="類名1 類名2 類名3"></ANY>
? ? ? ?使用：.類選擇器1.類選擇器2.類選擇器3 ... {樣式聲明;}
? 2、分類選擇器的定義
? ? ? ?方式：將元素選擇器和類選擇器結(jié)合起來(lái)使用，從而實(shí)現(xiàn)對(duì)某種元素不同樣式的細(xì)分控制
語(yǔ)法：元素選擇器.類選擇器 {樣式聲明;}
? ? ? ?例：div.redBack{} ? ? ??定義class為redBack的div元素的樣式
4、ID選擇器
? 作用：用于匹配頁(yè)面中指定ID值的元素（專屬，唯一的id值，只能使用一次）
語(yǔ)法：#id值{樣式聲明;}
? ? ? ? ?? ID值一定要對(duì)應(yīng)頁(yè)面某個(gè)元素的ID值
5、群組選擇器
? 作用：選擇器聲明是以 , 隔開的選擇器列表
? 場(chǎng)合：將一些相同的規(guī)則用于多個(gè)元素時(shí)
語(yǔ)法：選擇器1，選擇器2，選擇器3...{ }
6、后代選擇器
? 后代：出現(xiàn)在某元素的任意層級(jí)的子元素，都可以稱之為后代元素
語(yǔ)法：選擇器1 選擇器2{樣式聲明;}
? 例：div span{匹配div中所有的span}
7、子代選擇器
? 子代：出現(xiàn)在某元素中，只具備一級(jí)層級(jí)關(guān)系的元素，被嵌套的稱之為子代元素
語(yǔ)法：選擇器1>選擇器2{樣式聲明}
? 例：#d1>div>p{匹配ID中的下一級(jí)div元素中的p元素}
8、偽類選擇器
? 作用：匹配頁(yè)面元素中的不同狀態(tài)的選擇器
語(yǔ)法：由 : 作為結(jié)合符????????選擇器:偽類選擇器{ }
? 分類：1、鏈接偽類
? ? ? ? ? ? ? ?? :link ? ? ?? 定義未被訪問的超鏈接狀態(tài)
? ? ? ? ? ? ? ?? :visited ?? 定義訪問過的超鏈接狀態(tài)
? ? ? ? ? ? 2、動(dòng)態(tài)偽類
? ? ? ? ? ? ? ??:hover??定義鼠標(biāo)懸停在元素上時(shí)的狀態(tài)
? ? ? ? ? ? ? ?? :active ? ? 定義元素被激活時(shí)的狀態(tài)（一瞬間的狀態(tài)，點(diǎn)擊瞬間），常用于移動(dòng)端
? ? ? ? ? ? ? ?? :focus ? ? ?定義元素獲取焦點(diǎn)時(shí)的狀態(tài)（長(zhǎng)時(shí)間的狀態(tài)，光標(biāo)閃動(dòng)時(shí)，使用Tab鍵切換a標(biāo)簽時(shí)）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text/password/textarea(多數(shù)使用在文本框上)
? ? ? ? ? ? 3、目標(biāo)偽類
? ? ? ? ? ? 4、元素狀態(tài)偽類
? ? ? ? ? ? 5、結(jié)構(gòu)偽類
? ? ? ? ? ? 6、否定偽類
復(fù)雜選擇器（非繼承的）沖突時(shí)，把權(quán)值加到一起，權(quán)值大的優(yōu)先，如果權(quán)值一樣則后面的會(huì)覆蓋前面的
繼承的權(quán)值最低
選擇器類型權(quán)值
元素選擇器0、0、0、1
類選擇器0、0、1、0
偽類選擇器0、0、1、0
ID選擇器0、1、0、0
內(nèi)聯(lián)樣式(最高)1、0、0、0
____________________________________________________________________________________
尺寸
尺寸單位
? 1、% ? ?? 百分比（相對(duì)單位，響應(yīng)式時(shí)使用）
? 2、in ? ? ? 英寸（1in=2.54cm，對(duì)角線）
? 3、cm ? ? 厘米
? 4、mm ?? 毫米
? 5、pt ? ? ? 磅（點(diǎn)，Point）（1pt等于1/72英寸）（多數(shù)用于文字大?。?/p>
? 6、px ? ??像素（Pixel，計(jì)算機(jī)顯示器上的一個(gè)點(diǎn)）（默認(rèn)）
? 7、em ? ? 倍數(shù)，父元素文字大小的倍數(shù)，1em：父元素的字體尺寸；2em：父元素字體尺寸的兩倍
? 8、rem ?? 倍數(shù)，相對(duì)于根元素（html）設(shè)置的字體大小，css3新屬性，IE8及以下不支持
? 9、ex ? ? ?是一個(gè)距離單位，表示一個(gè)小寫字母x(x、y、z的x)的高度，是相對(duì)單位，和父元素的字號(hào)有關(guān)系
瀏覽器的默認(rèn)字體大小都為16px，所有未經(jīng)調(diào)整的瀏覽器都符合:? 1rem=16px
顏色單位
? 1、rgb（ , , ,）
? ? ? ?R：red ? ? ? 紅色
? ? ?? G：green ? 綠色
? ? ?? B：blue ? ?? 藍(lán)色
? ? ?? 每個(gè)值的范圍：0-255
? ? ? ? ? ? ? ? ? ? ?? 例：rgb(0,0,0) ?? 黑色
? ? ? ? ? ? ? ? ? ? ? ? ? ?? rgb(255,255,255)? 白色
? ? ? ? ? ? ? ? ? ? ? ? ? ?? rgb(255,0,0) ?? 紅色
? 2、rgb(r%,g%,b%)
? 3、rgba（r，g，b，alpha）
? ? ?? alpha：透明度，0-1之間的數(shù)字
4、#rrggbb
? ? ? ?由6位十六進(jìn)制數(shù)字表示一個(gè)顏色：0-9? A-F（A-11,B-12,C-13...F-15）
? ? ? ?例：#000000 ?? 黑色
? ? ? ? ? ?? #ffffff ? ? ? ? 白色
? ? ? ? ? ?? #ff0000 ? ? ?紅色
? 5、#rgb（#rrggbb的縮寫）每種顏色的兩位數(shù)字相同時(shí)，才可以縮寫
? ? ?? #000? 表示? #000000
? ? ?? #abc ? 表示? #aabbcc
? 6、顏色的英文單詞
尺寸屬性
? 1、作用：用于設(shè)置元素的寬度和高度
? ? ?? 單位：百分比(%,相對(duì)于父元素)和像素(px)
? 2、寬度
? ? ?? width ? ? ? ? ? 設(shè)置元素的寬度
? ? ?? max-width ?? 設(shè)置元素的最大寬度
? ? ?? min-width ?? 設(shè)置元素的最小寬度
? 3、高度
? ? ?? height ? ? ? ? ? 設(shè)置元素的高度
? ? ?? max-height ?? 設(shè)置元素的最大高度
? ? ?? min-height ?? 設(shè)置元素的最小高度
注意：塊級(jí)元素寬度默認(rèn)為父元素寬度的100%，高度自適應(yīng)
? ? ? ?? 行內(nèi)元素寬度默認(rèn)寬度以內(nèi)容為準(zhǔn)，高度自適應(yīng)
注意:
1、max-系列的權(quán)重非常的高，超越了!important
2、當(dāng)min-width與max-width大小有沖突的時(shí)候會(huì)采用最大原則，即誰(shuí)大取誰(shuí)的值
注意：允許修改尺寸屬性的元素
? 1、塊級(jí)元素（p,div,hn,ul,ol,dl,dt,dd）都允許修改尺寸
? 2、大部分的行內(nèi)塊元素
? ? ?? 行內(nèi)塊：文本框、密碼框... 能修改尺寸
? ? ? ? ? ? ? ? ? ? 單選按鈕(radio)、復(fù)選框(checkbox)... 無(wú)法修改尺寸
? 3、大部分的行內(nèi)元素(span,a,b,i)無(wú)法修改尺寸
? ? ?? 本身就存在width和height屬性的html元素允許被修改尺寸（img，table）
? 4、溢出處理：
? ? ? ?使用尺寸屬性控制元素大小時(shí)，如果內(nèi)容所需要的空間的大于元素本身，則會(huì)導(dǎo)致內(nèi)容"溢出"
屬性：overflow
? ? ? ? ? ? ? ? overflow-x ?? 橫向溢出處理方式
? ? ? ? ? ? ? ? overflow-y ?? 縱向溢出處理方式
? ? ? ?取值：visible ? ? 溢出可見，不處理（默認(rèn)值）
? ? ? ? ? ? ? ? ?hidden ? ?溢出隱藏（把溢出的內(nèi)容隱藏）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ① 當(dāng)子元素為"文檔流定位"定位時(shí)，會(huì)剪掉外面的
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ② 當(dāng)子元素為"脫離文檔流"定位時(shí)，會(huì)撐開顯示
? ? ? ? ? ? ? ?? scroll ? ? ?讓元素顯示滾動(dòng)條，當(dāng)內(nèi)容溢出時(shí)，滾動(dòng)條可用
? ? ? ? ? ? ? ?? auto ? ? ? 自動(dòng)，不溢出不顯示滾動(dòng)條，溢出的話則顯示滾動(dòng)條
第二章*******************************************************************************
邊框?qū)傩?/p>
邊框：圍繞在元素內(nèi)容和內(nèi)邊距外的線條
通過一個(gè)屬性控制四個(gè)方向邊框的效果
2、簡(jiǎn)寫方式：border：width? style? color;
? ? width：寬度，邊框粗細(xì)，以px為單位
? ? style： 樣式，邊框樣式，實(shí)線，虛線
? ? ? ? ? ? ? 取值：solid ? ? ?? 實(shí)線
? ? ? ? ? ? ? ? ? ? ? ? dotted ? ? 虛線（點(diǎn)）
? ? ? ? ? ? ? ? ? ? ? ? dashed ? ?虛線（線條）
? ? ? ? ? ? ? ? ? ? ? ? double ? ?兩條實(shí)線
? ? ? ? ? ? ? ? ? ? ? ? groove ? ?定義3D凹槽邊框，其效果取決于border-color的值
? ? ? ? ? ? ? ? ? ? ? ? ridge ? ? ?定義3D壟狀邊框，其效果取決于border-color的值
? ? ? ? ? ? ? ? ? ? ? ? inset ? ? ??定義3D inset邊框，其效果取決于border-color的值
? ? ? ? ? ? ? ? ? ? ? ? outset ? ??定義3D outset邊框，其效果取決于border-color的值
? ? color：顏色，邊框顏色 ??transparent? 透明色（有邊框,通過設(shè)置透明,防止在添加邊框時(shí)出現(xiàn)抖動(dòng)）
? ? ? ? ? ? ? 取值：合法顏色值（#fff，#000）
? ? ? ? ? ? ? ? ? ? ? ? 默認(rèn)為當(dāng)前的文字顏色（也可寫為currentColor關(guān)鍵字，為color的計(jì)算后屬性值）
注意：border：none；或者border：0；(不加px可以提高效率,不會(huì)渲染)可以取消元素邊框（無(wú)邊框）
2、單邊定義：border-方向：width? style? color;
? ? 方向：top/right/bottom/left ?? （上右下左）
? ? ? ?例：border-left：1px? dotted? red
3、單屬性定義：定義四個(gè)邊框的某一個(gè)屬性值
屬性：border-屬性：值
? ? ? ?例：border-style：solid
4、單邊單屬性定義：定義某一方向的具體某一屬性值
? ? 屬性：border-方向-屬性：值
? ? ?? 例：border-left-color：red
____________________________________________________________________________________
邊框倒角
將元素的四個(gè)方向的角倒成圓角
屬性：border-radius
????取值：絕對(duì)數(shù)值（px,圓的半徑）或 百分比（%,根據(jù)寬度和高度的占比來(lái)作為倒角圓的半徑）
? ? 單獨(dú)定義：border-top-left-radius ?? 左上角
? ? ? ? ? ? ? ? ? ? border-top-right-radius ?? 右上角
? ? ? ? ? ? ? ? ? ? border-bottom-left-radius ?? 左下角
? ? ? ? ? ? ? ? ? ? border-bottom-right-radius ?? 右下角
? ? ? ? ? ?? 例：border-redius：5px
? ? ? ? ? ? ? ? ?? border-redius：50% ? ?如果當(dāng)前元素寬和高相等的時(shí)候，將得到一個(gè)圓
邊框陰影，元素陰影
屬性：box-shadow
取值：h-shadow? v-shadow? blur? spread? color? inset;
? ? ? ? ? ? ? h-shadow ?? 必須設(shè)置，陰影的水平偏移距離，+向右偏移；-向左偏移，0向兩邊偏移
? ? ? ? ? ? ? v-shadow ?? 必須設(shè)置，陰影的垂直偏移距離，+向下偏移；-向上偏移，0向上下偏移
? ? ? ? ? ? ? blur ? ? ?? 模糊距離，向水平/垂直方向模糊的距離
? ? ? ? ? ? ? spread ?? 陰影的尺寸長(zhǎng)度（向周圍擴(kuò)散的距離）
? ? ? ? ? ? ? color ? ?? 顏色 ?? transparent 透明色
? ? ? ? ? ? ? inset ? ?? 值，默認(rèn)的外陰影更改為內(nèi)陰影(有凸起感)
? ? ? ? ? ? ? ? ? ? ? ? ? ?例：下陰影：box-shadow：0 2px 3px #BDBDBD;
? ? ? ? ? ? ? padding會(huì)加上陰影，margin不會(huì)加
? ? 注意：spread為blur的負(fù)值(數(shù)字相等)時(shí)，生成的陰影會(huì)被包含在原來(lái)的元素之下，可實(shí)現(xiàn)單側(cè)投影
? ? ? ? ? ? ? 如：下側(cè)投影 box-shadow: 0 7px 5px -5px #DDD
輪廓
? ? 作用：繪制于元素周圍的一條線，位于邊框之外
????屬性：outline：width style color;
? ? ? ? ? ? ? outline-width ?? 輪廓的寬度
??????????????outline-style ? ? 輪廓的樣式
??????????????outline-color ?? 輪廓的顏色 ?? transparent 透明色
? ? 注意：outline不占用任何空間，可與clip搭配來(lái)填充空間
? ? ? ?如：outline:9999px?solid #F00;?clip:rect(0, 9999px, 9999px, 0)
outline：none 或 outline：0；取消輪廓(常用)
? ? 例：<input type="text" style="outline: none ;"> ?? 取消文本框輸入時(shí)的默認(rèn)輪廓
a:active,a:hover{ outline：0 } ? ?取消點(diǎn)擊a鏈接時(shí)的輪廓(:focus使用鍵盤操作時(shí)不要取消效果)
剪裁
clip?用于剪裁已設(shè)置絕對(duì)定位(position:absolute)的元素
作用：用于定義一個(gè)剪裁矩形，對(duì)于一個(gè)絕對(duì)定位元素，在這個(gè)矩形的內(nèi)容才可見，出了這個(gè)剪裁區(qū)域的內(nèi)容會(huì)剪裁掉，剪裁區(qū)域可能比元素的內(nèi)容區(qū)大，也可能小
語(yǔ)法：clip:?rect(top, right, bottom, left);? ? ? ? 設(shè)置元素的形狀
? ? ? ? ? clip:?auto;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?默認(rèn)值，不應(yīng)用任何剪裁
? ? ? ? ? clip:?inherit;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 從父元素繼承clip屬性的值
____________________________________________________________________________________
框模型
框：頁(yè)面的一切元素皆為框
框模型：Box-Model又稱盒子模型，定義了元素框處理元素內(nèi)容、內(nèi)邊距、外邊距的方式
對(duì)象實(shí)際寬度 = 左右外邊距+左右邊框+左右內(nèi)邊距+width
????對(duì)象實(shí)際高度 = 上下外邊距+上下邊框+上下內(nèi)邊距+height
注：增加邊框的內(nèi)邊距和外邊距，元素內(nèi)容區(qū)域大小不會(huì)改變，但元素的總體占地尺寸會(huì)發(fā)生變化
元素的可視化尺寸，在邊框內(nèi)：邊框內(nèi)寬度 = 左右邊框+左右內(nèi)邊距+width
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 邊框內(nèi)高度 = 上下邊框+上下內(nèi)邊距+height
一、外邊距：圍繞在元素邊框周圍的空白區(qū)域就是外邊距(元素與元素之間的間距)
? ? ? ? ? ? ? ? ? 正常情況下，外邊距是不允許被其他元素所占據(jù)的
? ? 語(yǔ)法：四個(gè)方向外邊距：margin：value;/* px相對(duì)于自己,%相對(duì)于父元素?*/
? ? ? ? ? ?? 單邊設(shè)置：margin-top ? ? ? ?? 上外邊距
? ? ? ? ? ? ? ? ? ? ? ? ? ?? margin-bottom ?? 下外邊距
? ? ? ? ? ? ? ? ? ? ? ? ? ?? margin-left ? ? ? ? ?左外邊距
? ? ? ? ? ? ? ? ? ? ? ? ? ?? margin-right ? ? ?? 右外邊距
? ? 取值：① 單位可以為px（可以為負(fù)）
? ? ? ? ? ? ? ② 單位可以為%（以父元素為參考）
? ? ? ? ? ? ? ③ 取值為auto
? ? ? ? ? ? ? ? ? 默認(rèn)情況下，可以自動(dòng)計(jì)算左右外邊距，實(shí)現(xiàn)塊級(jí)元素水平居中對(duì)齊
? ? ? ? ? ? ? ? ? 注意：必須為元素設(shè)置寬度
? ? ? ? ? ? ? ④取值為負(fù)值（向相反的方向移動(dòng)元素）
? ? ? ? ? ? ? ? ? 移動(dòng)元素：margin-top：上外邊距取值為負(fù)，元素向上移動(dòng)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? margin-left：左外邊距取值為負(fù)，元素向左移動(dòng)
? ? 外邊距的簡(jiǎn)潔寫法：margin：value （四個(gè)方向的外邊距）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? margin：v1，v2 （上下，左右）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? margin：v1，v2，v3 （上，左右，下）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?margin：v1，v2，v3，v4 （上，右，下，左）
注意：
①?有些元素存在默認(rèn)外邊距
? ? 例： body? h1-h6? p? ul? ol? pre? dl? dd? dt
? ? ? ? ? ?編寫網(wǎng)頁(yè)時(shí)一般會(huì)進(jìn)行CSS Reset（CSS重寫），將默認(rèn)的外邊距全部都清除
? ? ? ? ? ?選擇器1，選擇器2...{margin：0;}
② 外邊距不可以被繼承
③ 外邊距的特殊處理
? ? 1、外邊距的合并
? ? ? ?? 當(dāng)兩個(gè)垂直外邊距相遇時(shí)，他們將形成一個(gè)外邊距，稱為外邊距合并
? ? ? ? ?合并后的外邊距的高度定于兩個(gè)外邊距中高度較大者
2、外邊距溢出
在某些特殊情況下，為子元素設(shè)置上下外邊距時(shí)，有可能作用在父元素上
? ? ? ? ?兩個(gè)條件：① 父元素沒有上或下邊框
? ? ? ? ? ? ? ? ? ? ? ? ?② 必須為第一個(gè)子元素或者最后一個(gè)子元素設(shè)置外邊距
? ? ? ?? 解決方案(4種)：① 為父元素增加邊框（弊端：父元素高度會(huì)變化）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ② 為父元素中增加一個(gè)空的<table>（弊端：多一個(gè)空元素）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ③ 通過給父元素的上內(nèi)邊距取代子元素的上外邊距(弊端:父元素高度會(huì)變化)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ④ 使用內(nèi)容生成，為父元素生成一個(gè)空元素，把空元素變成表格元素
? ? 3、為行內(nèi)元素和行內(nèi)塊元素設(shè)置外邊距
? ? ? ? ?① 為 "行內(nèi)元素" 設(shè)置上下外邊距是無(wú)效的（比如：img）
? ? ? ? ?② 為 "行內(nèi)塊元素" 設(shè)置上下外邊距，則整行元素都跟著變
二、內(nèi)邊距：元素的邊框（邊緣）到 內(nèi)容 之間的距離
? ? 特點(diǎn)：會(huì)擴(kuò)大元素邊框所占用的區(qū)域
語(yǔ)法：padding：value;
? ? ? ? ? ?? 單邊設(shè)置：padding-top / right / bottom / left：value;
? ? 取值：① 單位為px（沒有負(fù)值）
? ? ? ? ? ?? ② 單位可以為%(相對(duì)于父元素)
? ? 簡(jiǎn)潔寫法：padding：value（四個(gè)方向的內(nèi)邊距）
? ? ? ? ? ? ? ? ? ? padding：v1，v2（上下，左右）
? ? ? ? ? ? ? ? ? ? padding：v1，v2，v3（上，左右，下）
? ? ? ? ? ? ? ? ? ? padding：v1，v2，v3，v4（上，右，下，左）
? ? 特殊處理：
? ? ? ? 對(duì)行內(nèi)元素和行內(nèi)塊元素設(shè)置內(nèi)邊距（上下）時(shí)，只會(huì)影響自己，并不會(huì)影響到其他元素
? ? ? ? padding-bottom：50%; 指當(dāng)前父元素width的100%，可以設(shè)置height為0，width:50%生成一個(gè)正方形
三、box-sizing
? ? 作用：重新指定框模型的計(jì)算模式
? ? ? ? ? ? ? 邊框內(nèi)寬度width ?=左右邊框+左右內(nèi)邊距+width;
? ? ? ? ? ? ? 邊框內(nèi)高度height =上下邊框+上下內(nèi)邊距+height;
? ? 屬性：box-sizing：
取值：①content-box：默認(rèn)值，采用默認(rèn)計(jì)算模式，即元素的width屬性值，不包含padding和border
②border-box：? 元素的尺寸會(huì)包含該元素的padding（內(nèi)邊距）和border（邊框）,不包含margin
常用: .li{width:100%; box-sizing:border-box;} ? ? ? ?//占滿屏幕的寬
____________________________________________________________________________________
背景屬性：背景顏色，背景圖像
注：設(shè)置的背景顏色/圖像，會(huì)填充到內(nèi)容區(qū)域、內(nèi)邊距、邊框
1、背景顏色：以單一顏色填充
屬性：background-color
? ? 取值：任意合法顏色? 或? transparent 透明色
? ? 注意：背景顏色會(huì)填充到邊框、內(nèi)邊距、內(nèi)容區(qū)域
2、背景圖片（一般會(huì)顯示在背景顏色上面）
? ? 作用：以圖像作為元素的背景
屬性：background-image
? ? 取值：url（"圖片url"）或 url（圖片url）
? ? 注意：<img>是獨(dú)立的元素
? ? ? ? ? ? ?而背景圖不是元素，是某元素背景的襯托
3、背景圖片重復(fù)
屬性：background-repeat
? ? 取值：① repeat ? ? ? ? 默認(rèn)值，水平垂直方向都平鋪
? ? ? ? ? ?? ② repeat-x ? ? ?僅在水平方向平鋪
? ? ? ? ? ?? ③ repeat-y ? ? ?僅在垂直方向平鋪
? ? ? ? ? ? ?④no-repeat??不平鋪
注：IE8及更早瀏覽器、Firefox4.0-8.0 不支持為background-repeat定義2個(gè)參數(shù)值，要寫在一起
? ? ? 如：background-repeat: repeat no-repeat;
4、背景圖片尺寸（定位圖片時(shí)，若改變圖片尺寸則改變整個(gè)圖片的尺寸）
屬性：background-size
? ? 取值：① value1? valie2 ? ? ? ? ?指定背景圖像的寬度和高度，單位為px
? ? ? ? ? ?? ② value1%? value2% ? ?采用當(dāng)前元素的寬和高的百分比作為背景圖像大小，不能寫成一個(gè)
? ? ? ? ? ? ?③ cover(覆蓋) ? ? ??將背景圖像等比放大，直到背景圖完全覆蓋到元素的所有區(qū)域?yàn)橹?/p>
? ? ? ? ? ? ?④contain(包含)?將背景圖像等比放大，直到背景圖像的下邊或右邊有一個(gè)邊緣碰到元素區(qū)域?yàn)橹?/p>
5、背景圖片的固定
屬性：background-attachment
? ? 取值：① scroll ?? 滾動(dòng)，背景圖會(huì)隨著元素本身而滾動(dòng)（默認(rèn)值）
? ? ? ? ? ? ?② fixed ? ? 固定，背景圖不會(huì)隨著滾動(dòng)條而發(fā)生滾動(dòng)，一直保持在可視化區(qū)域中
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?移動(dòng)的只是視口，背景圖一直固定(當(dāng)滾動(dòng)到下一個(gè)背景圖時(shí)會(huì)被覆蓋掉)
? ? ? ? ? ? ?③?local? ? ?背景相對(duì)于元素的內(nèi)容而滾動(dòng)
? ? ? ? ? ? ? 注意：盡量為 body 設(shè)置背景
6、背景圖片的定位（在同一個(gè)標(biāo)簽中，和尺寸分成兩個(gè)類，可以將圖片應(yīng)用于多個(gè)場(chǎng)合）
? ? 作用：改變背景圖像在元素中的默認(rèn)位置
屬性：background-position
? ? 取值：① x y
? ? ? ? ? ? ? ? ? x：背景圖水平方向移動(dòng)距離，+背景圖向右偏移，-向左
? ? ? ? ? ? ? ? ? y：背景圖垂直方向移動(dòng)距離，+背景圖向下偏移，-向上
②x% y%
? ? ? ? ? ? ? ? ? 0% 0%： ? ? ? 顯示在元素的左上方
? ? ? ? ? ? ? ? ? 100% 100%：顯示在元素的右下方
? ? ? ? ? ? ? ? ? 50% 50%： ?? 居中
③ 關(guān)鍵字：x：left左 / center中 / right右
y：top上 / center中 / bottm下
? ? ? ? ? ? ? ? ? ? ? ? ?例：background-position：left top;? 左上方
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? background-position：top left;? 左上方
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? background-position：center; ? 水平垂直都居中
背景屬性的簡(jiǎn)寫
屬性：background：
? ? 取值：color(顏色)? url(圖像路徑)? repeat(重復(fù))? attachment(固定方式)? position(定位);
? ? 注意：如果不設(shè)置其中的某個(gè)值，將采用默認(rèn)值，不能加background-size(圖片尺寸)，要單獨(dú)寫
例如：
div{
? background-image: url("../img/red.png");
? background-repeat: no-repeat;
? background-position: center;
? /*以上可簡(jiǎn)寫為: background: url("../img/red.png") no-repeat?center?center; */
? background-size: contain;
}
CSS Sprites ?? 雪碧圖，精靈圖（圖像拼合技術(shù)）
? ? 作用：將若干幅小圖像封裝到一幅大圖像中，以減少http的請(qǐng)求次數(shù)
? ? 步驟：
① 在頁(yè)面中，根據(jù)要顯示的圖像的尺寸，創(chuàng)建一個(gè)一模一樣大小的元素
② 為該元素設(shè)置背景圖，并且通過背景圖像定位，實(shí)現(xiàn)位置偏移，將要顯示的圖像，顯示在元素中
③ 可使用 transform：scale（value）對(duì)圖片進(jìn)行縮放
第三章*******************************************************************************
漸變：兩種或多種顏色間平滑過渡的效果
1、分類：① 線性漸變
? ? ? ? ? ? ? ② 徑向漸變
? ? ? ? ? ? ? ③ 重復(fù)漸變
2、漸變的組成（元素）
? ? 色標(biāo)：決定了漸變的每種顏色及其出現(xiàn)的位置
? ? 每一種漸變效果都是由多個(gè) 色標(biāo) 組成（兩個(gè)及以上）
3、漸變的語(yǔ)法
? ? ① 語(yǔ)法
屬性：background-image
? ? ? ? 取值：linear-gradient（）? 線性漸變
? ? ? ? ? ? ? ?? radial-gradient（）? 徑向漸變
? ? ? ? ? ? ? ? ?repeating-linear-gradient（）? 重復(fù)線性漸變
? ? ? ? ? ? ? ?? repeating-radial-gradient（）? 重復(fù)徑向漸變
②線性漸變
語(yǔ)法：background-image：linear-gradient（angle，color-point，color-point，…）
? ? ? ? 1、angle：方向或角度，即漸變的填充方向
? ? ? ? ? ? 取值：關(guān)鍵字：to top ? ? ? ?? 從下向上填充
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? to right ? ? ? ?從左向右填充
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? to bottom ? ?從上向下填充
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? to left ? ? ? ?? 從右向左填充
? ? ? ? ? ? ? ? ? ? ? 角度：0deg~360deg
? ? ? ? ? ? ? ? ? ? ? ?? 例：0deg ? ? ? to top
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 90deg ? ? ?to right
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?180deg ?? to bottom
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?270deg ?? to left
? ? ? ? 2、color-point：色標(biāo)，表示每個(gè)顏色值，及其出現(xiàn)的位置，多個(gè)色標(biāo)之間用，分隔
? ? ? ? ? ? ? ? ? ? ? ? ?例：red? 0% ? ?? 開始的時(shí)候是紅色
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? bule 50px ?? 填充到第50像素時(shí)變?yōu)樗{(lán)色
? ? ? ? ? ? ?注意：色標(biāo)的位置可以省略，省略位置后，會(huì)將每個(gè)色標(biāo)平均分配到元素區(qū)域
③徑向漸變
? ? ? ? 語(yǔ)法：background-image：radial-gradient（[size at position]，color-point，color-point，…）
? ? ? ? ? ? ? ??size at position：徑向漸變的半徑 以及 圓心位置（可以不設(shè)置，默認(rèn)在元素正中央）
? ? ? ? ? ? ? ?? size ? ? ? ?? 圓的半徑，px為單位
? ? ? ? ? ? ? ?? position ? ?圓心位置
? ? ? ? ? ? ? ? ?例：0px ? 0px ? ? ? ? 將圓心設(shè)置在元素的左上角
? ? ? ? ? ? ? ? ? ? ?? 50%? 50% ? ? ? 將圓心設(shè)置在元素的中間位置
? ? ? ? ? ? ? ? ? ? ?? right? bottom ?? 關(guān)鍵字：top / right / bottom / left
4、瀏覽器的兼容性
? ? 各主流瀏覽器的主流版本，均支持漸變效果
? ? 對(duì)于不支持漸變的瀏覽器，可以嘗試增加瀏覽器前綴，去實(shí)現(xiàn)漸變的顯示
? ? 瀏覽器的前綴：Firefox ?? -moz-
? ? ? ? ? ? ? ? ? ? ? ? ? Chrome和Safari ?? -webkit-
? ? ? ? ? ? ? ? ? ? ? ? ? Opera ? ? -o-
? ? ? ? ? ? ? ? ? ? ? ? ? IE ? ? ? ?? -ms-
瀏覽器添加前綴的位置：① 如果瀏覽器不支持屬性的話，則將前綴加到屬性前
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?例：animation：scroll 5s
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?-moz-animation：scroll 5s
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?-webkit-animation：scroll 5s
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?-o-animation：scroll 5s
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ② 如果瀏覽器支持屬性，但不支持值的話，則將前綴加載到屬性值的前邊
____________________________________________________________________________________
字體屬性
1、指定字體系列
? ? 屬性：font-family
? ? 取值：value1，value2…
除了各種特定的字體系列外，CSS 定義了5種通用字體系列：
? ? Serif、Sans-serif、Monospace、Cursive、Fantasy
注意：字體取值包含 '中文或特殊符號(hào)' 時(shí)，使用 "" 引起來(lái)
常用字體：font-family："Microsoft YaHei", "微軟雅黑", "sans-serif",Helvetica;
2、字體大小(字體系列也會(huì)影響字體大小)
? ? 屬性：font-size
? ? 取值：rem / em / px / % / pt
3、字體加粗
? ? 屬性：font-weight
? ? 取值：① normal ?? 正常體
? ? ? ? ? ?? ② bold ? ? ?? 粗體(h1~h6)
? ? ? ? ? ? ?③ bolder ? ? 更粗
? ? ? ? ? ? ?④ lighter ? ? 更細(xì)
? ? ? ? ? ? ?③400~900 ?整百倍數(shù)字，取值越大越粗(PC端不太明顯，移動(dòng)端明顯)
? ? ? ? ? ? ? ?? 400 ?? normal
? ? ? ? ? ? ? ? ?700 ?? bold
4、字體樣式
? ? 屬性：font-style
? ? 取值：① normal ?? 正常體
? ? ? ? ? ?? ② italic ? ? ? 斜體
5、小型大寫字母
? ? 作用：針對(duì)英文字符，將小寫字符變成大寫字符，但是大小與小寫一樣
? ? 屬性：font-variant
? ? 取值：① normal
? ? ? ? ? ?? ② small-caps
字體屬性的簡(jiǎn)寫方式
屬性：font
取值：style(樣式)? variant(小型大寫)? weight(加粗)? size(大小)/line-height? family(字體，必給)
? ? 注意：使用簡(jiǎn)寫屬性時(shí)，必須要設(shè)置family的值，否則無(wú)效
? ? ? ? ? ? ?font-size和line-height之間要加'/'
____________________________________________________________________________________
文本屬性
1、文本顏色
? ? 屬性：color
? ? 取值：任意合法顏色
2、文本排列方式
? ? 作用：指定當(dāng)前元素中的文本、行內(nèi)元素、行內(nèi)塊元素的水平對(duì)齊方式
屬性：text-align
取值：left(左對(duì)齊) / center(居中) / right(右對(duì)齊) / justify(兩端對(duì)齊)
3、文字修飾（線條樣式）
? ? 作用：指定文本的線條樣式
屬性：text-decoration
? ? 取值：①none ? ?沒有線條顯示(常用于去除超鏈接的默認(rèn)樣式)
? ? ? ? ? ?? ② underline ? ? ? 下劃線
? ? ? ? ? ?? ③ overline ? ? ? ?上劃線
? ? ? ? ? ? ?④ line-through ?刪除線
4、行高（可用于單行文本，使其line-height為文本的高，用于文字垂直居中）
? ? 作用：調(diào)整一行文本的高度
? ? ? ? ? ? ? 如果行高的高度高于文字高度本身，那么該行文本將在指定的行高內(nèi)呈現(xiàn)出垂直居中的顯示效果
? ? 場(chǎng)合：① 控制一行文本垂直居中對(duì)齊
? ? ? ? ? ? ?② 設(shè)置行間距
? ? ? ? ? ? ? ? ?line-height與font-size的計(jì)算值之差叫做'行間距',會(huì)分為2份，分別加到文本內(nèi)容的頂部和底部
屬性：line-height
? ? 取值：① 以px為單位的數(shù)值，固定的行間距
? ? ? ? ? ?? ② 設(shè)置為數(shù)字，此數(shù)字會(huì)與當(dāng)前的字體尺寸相乘來(lái)設(shè)置行間距
? ? ? ? ? ? ? ? ? ? 設(shè)置不同的字體大小，相同的行高數(shù)字，會(huì)出現(xiàn)不同的行高效果
? ? ? ? ? ? ?③ 設(shè)置為%，基于當(dāng)前字體尺寸的百分比行間距
? ? 注意：在行內(nèi)元素中，有一個(gè)"幽靈空白節(jié)點(diǎn)"，不占寬度，無(wú)法用js獲取，但確實(shí)存在，其行高大于1，當(dāng)子元素的行高與字體大小相同時(shí)(父元素未設(shè)置行高)，"幽靈空白節(jié)點(diǎn)"會(huì)撐開父元素
? ? 解決：設(shè)置父元素line-height: 1，防止幽靈空白節(jié)點(diǎn)撐開父元素，設(shè)置行內(nèi)元素子元素為行內(nèi)塊元素，有多個(gè)不同字體大小的子元素時(shí)，設(shè)置子元素vertical-align: middle
5、首行文本縮進(jìn)（距離）
屬性：text-indent
? ? 取值：縮進(jìn)的距離，以px為單位的數(shù)值
? ? ? ? ? ? ?允許使用負(fù)值，首行會(huì)被縮進(jìn)到左邊
? ? ? ? ? ? ?若設(shè)置為%，則參照的是父元素的width
6、文本陰影
屬性：text-shadow
? ? 取值：h-shadow? v-shadow? blur? color;
7、修改input元素提示文字(placeholder)的樣式(如：顏色)，(必須分開寫)
input::-webkit-input-placeholder{WebKit browsers
? color: red;
}
input:-moz-placeholder{Mozilla Firefox 4 to 18
? color: red;
}
input::-moz-placeholder{Mozilla Firefox 19+
? color: red;
}
input:-ms-input-placeholder{Internet Explorer 10+
? color: red;
}
input::placeholder{
? color: red;
}
8、修改input、textarea輸入框的光標(biāo)顏色(光標(biāo)的粗細(xì)與縮放有關(guān)，與字體無(wú)關(guān))
input, textarea{
? color:red;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 設(shè)置光標(biāo)顏色
? -webkit-text-fill-color:blue;? ? ? ? 設(shè)置字體顏色
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
-webkit-text-fill-color: initial;修改placeholder顏色
}
9、letter-spacing: 50px;? ? 中文、字母間距(可取負(fù)值)
? ? ?word-spacing: 50px;? ? 英文單詞間距
____________________________________________________________________________________
表格table（bug較多，用ul代替）(在手機(jī)端，改變寬、高，可能會(huì)使邊框合并之后加的border斷開)
1、表格的常用屬性
? ? ① 邊距屬性：padding
? ? ② 尺寸屬性：width，height
? ? ③ 文本格式化屬性：font-**
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text-align，color，text-indent…
? ? ④ 背景屬性：背景色，背景圖，漸變
? ? ⑤ border屬性
⑥vertical-align
? ? ? ? 作用：在單元格中，設(shè)置文本的垂直對(duì)齊方式
? ? ? ? 取值：top / middle / bottom
? ? ? ? 注意：在父元素上設(shè)置此樣式時(shí)，對(duì)inline-block類型的子元素都有效
2、表格的特有屬性
? ? ① 邊框合并：將 table 和 td 的邊框合并到一起，以單線框的模式進(jìn)行顯示
屬性：border-collapse
? ? ? ? 取值：1、separate ?? 默認(rèn)值，分離邊框
? ? ? ? ? ? ? ? ? 2、collapse?? 邊框合并效果(chrome中：左邊的覆蓋右邊的、上面的覆蓋下面的)
? ? ? ? ? ? ? ? ? ? ? ?注意：僅限于邊框分離狀態(tài)時(shí)使用，即border-collapse：collapse
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 若想改變個(gè)別邊框的顏色，可使用內(nèi)容生成，生成一個(gè)點(diǎn)或線，并絕對(duì)定位
? ? ② 邊框邊距
? ? ? ? 作用：?jiǎn)卧裰g的距離
屬性：border-spacing
? ? ? ? 取值：1、指定一個(gè)值：表示單元格間水平和垂直間距是相同
? ? ? ? ? ? ? ?? 2、指定兩個(gè)值：第一個(gè)值：?jiǎn)卧耖g的水平間距
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 第二個(gè)值：?jiǎn)卧耖g的垂直間距
3、標(biāo)題位置
? ? 屬性：caption-side
? ? 取值：① top ? ? ? ? 默認(rèn)值，標(biāo)題顯示在表格之上
? ? ? ? ? ? ?② bottom ?? 標(biāo)題顯示在表格之下
4、顯示規(guī)則
? ? 作用：指定的表格布局方式
? ? ? ? ? ? ? 默認(rèn)布局方式為自動(dòng)表格布局，即單元格的寬度實(shí)際上是由內(nèi)容來(lái)決定的，與設(shè)定的值無(wú)關(guān)
屬性：table-layout
? ? 取值：①auto?? 列寬度由內(nèi)容決定，默認(rèn)值，自動(dòng)表格布局
? ? ? ? ? ?? ②fixed?? 列寬度由設(shè)置的值來(lái)決定，而不取決于內(nèi)容，固定表格布局
自動(dòng)表格 vs 固定表格布局
① 自動(dòng)表格布局—————td里的元素決定td的寬高
? ? 1、單元格大小會(huì)適應(yīng)內(nèi)容大小
? ? 2、缺點(diǎn)：表格復(fù)雜時(shí)，加載速度慢
? ? 3、適用于不確定每列大小的情況下使用
? ? 4、雖然算法較慢，但是能體現(xiàn)出傳統(tǒng)表格的特點(diǎn)
② 固定表格布局
? ? 1、單元格大小取決于td中設(shè)置的值
? ? 2、優(yōu)點(diǎn)：加載速度較快
? ? 3、確定每列大小時(shí)，可以使用固定表格布局
? ? 4、算法較快，缺點(diǎn)是不夠靈活
