css核心樣式

時(shí)間：2023-09-19 10:30:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-19 10:30:02 來源：網(wǎng)站運(yùn)營

css核心樣式

font-weight粗細(xì)

• 作用：設(shè)置文字粗細(xì)，是font的單一屬性。
• 屬性值：有兩種類型，（1）單詞類型，（2）數(shù)字類型。
• 單詞類型：
  屬性值 | 說明 --- | --- normal | 默認(rèn)值，標(biāo)準(zhǔn)字體 bold | 粗體，b（沒有語義）、Strong（有語義）標(biāo)簽的默認(rèn)值 bolder | 更粗的字體 lighter | 更細(xì)的字體
• 數(shù)字類型：100-900之間的整百數(shù)字，數(shù)字越大，字體越粗。
  其中，400等價(jià)于normal，700等價(jià)于bold。實(shí)際100~500都是正常的，600~900都是加粗的。

font-style字體風(fēng)格

• 作用：設(shè)置文字是否斜體顯示，是font的單一屬性。
• 屬性值 | 說明 --- | --- normal | 正常字體，默認(rèn) italic | 設(shè)置斜體的文字，主要針對(duì)英文。且?guī)в袃A斜屬性的字體才能設(shè)置傾斜操作。i標(biāo)簽的默認(rèn)值。 obique | 傾斜的文字，只是將文字傾斜顯示，與字體無關(guān)。沒有傾斜屬性的字體也可以設(shè)置傾斜操作。（不常用，了解即可）
  

line-height行高

• 作用：設(shè)置的是一行文字實(shí)際占有的高度，文字字號(hào)在行高中是垂直居中的，font的單一屬性，文字有默認(rèn)行高。
• 屬性值 | 說明 --- | --- px像素值 | 設(shè)置行高的具體像素值 百分比數(shù)值 | 參考本身字號(hào)像素值的百分比
• 量取行高的步驟：（fireworks工具）
• 確定字體和字號(hào)。
• 根據(jù)已知的字號(hào)和字體，在書寫上下對(duì)齊的兩行文字，調(diào)整屬性面板的行高值，直到兩行文字都對(duì)齊。

font字體綜合

• 寫法1：兩個(gè)屬性，必須有字號(hào)和字體，字號(hào)必須在前，字體在后。
• 寫法2：三個(gè)屬性，字體，字號(hào)，行高。
• 書寫方式： 字號(hào)/行高 字體

• 寫法3：如果需要設(shè)置加粗和斜體，這兩個(gè)屬性只能寫在最前面，兩個(gè)值之間可以相互換位置。后面的字號(hào)，行高，字體不能變換位置。

text-align水平對(duì)齊

• 作用：設(shè)置文本水平方向的對(duì)齊方式
• 屬性值 | 說明 --- | --- left | 左對(duì)齊，默認(rèn) right | 右對(duì)齊 center | 居中對(duì)齊

text-decoration文本修飾

• 作用：設(shè)置文本整體是否有線條的修飾效果。
• 屬性值 | 說明 --- | --- none | 沒有修飾，大部分標(biāo)簽的默認(rèn)值 overline | 上劃線 line-through | 中劃線（刪除線），del標(biāo)簽的默認(rèn)值 underline | 下劃線，a標(biāo)簽的默認(rèn)值

text-indent文本縮進(jìn)

• 作用：設(shè)置段落首行是否縮進(jìn)。
• 屬性值 | 說明 --- | --- px單位 | 表示縮進(jìn)多少像素 em單位 | 縮進(jìn)幾個(gè)中文字符的位置（常用） 百分比 | 縮進(jìn)文字所在標(biāo)簽的父級(jí)標(biāo)簽的width屬性值得百分比
• 屬性值區(qū)分正負(fù)，正數(shù)代表向右縮進(jìn)，負(fù)數(shù)代表向左縮進(jìn)。

盒模型屬性

• 寬度width，高度height，邊框border，內(nèi)邊距padding，外邊距margin。
• 常見盒模型區(qū)域，根據(jù)不同屬性的效果，可以劃分
• 書寫元素內(nèi)容區(qū)域：width+height
• 盒子可以實(shí)體化（可以加顏色）的區(qū)域：width+height+padding+border
• 盒子實(shí)際占位的位置：width+height+padding+border+margin

寬度width：

• 作用：設(shè)置元素的寬度
• 屬性值| 說明 --- | --- auto | 默認(rèn)值。瀏覽器可以計(jì)算出實(shí)際的寬度。（參考父元素） px | 像素值定義的寬度 % | 定義參考父元素寬度width的百分比寬度 注：body元素比較特殊，不需要設(shè)置寬度，自適應(yīng)瀏覽器窗口的寬度。

高度height：

• 作用：設(shè)置元素的高度。
• 屬性值| 說明 --- | --- auto | 默認(rèn)值。瀏覽器可以計(jì)算出實(shí)際的高度，高度會(huì)被內(nèi)容撐開 px | 像素值定義的高度 % | 定義參考父元素高度height的百分比高度

內(nèi)邊距padding：

• 作用：設(shè)置元素內(nèi)部到寬高之間的距離。
• 特點(diǎn)：可以添加背景，但是不能書寫內(nèi)容。
• 屬性值：常用px為單位的數(shù)值。
• padding是一個(gè)復(fù)合屬性，有四個(gè)方向。順序?yàn)樯嫌蚁伦?，順時(shí)針方向。
• 簡寫（四種）：
• 四值法：padding: 10px 20px 30px 40px，上，右，下，左。
• 三值法：padding: 10px 20px 30px，上，左右，下。
• 二值法：padding: 10px 20px，上下，左右。
• 單值法：padding: 10px，上右下左。

邊框border：

• 作用：設(shè)置的是內(nèi)邊距外面的邊界區(qū)域，作為合資實(shí)體化的最外層。
• 屬性值：由三個(gè)值組成，分別為線的寬度，線的形狀，線的顏色。順序不是必須的。
• 復(fù)合屬性。線寬border-width，線型border-style，邊框顏色border-color。
• 線寬border-width，有四值寫法。
• 線型border-style，有四值寫法，屬性值：none無邊框，solid實(shí)線，dashed虛線（有兼容問題），dotted點(diǎn)線。

• 邊框顏色border-color，有四值寫法。
• 按邊框方向劃分：border-top，border-right，border-bottom，border-left。
• 根據(jù)方向和類型，進(jìn)一步細(xì)分：border-方向-類型。順序不能錯(cuò)。

外邊距margin：

• 作用：設(shè)置的是盒子和盒子之間的距離。
• 特點(diǎn)：不能渲染背景。
• 屬性值：常用px為單位的數(shù)值。
• 外邊距的設(shè)置方式與內(nèi)邊距的方式同。

盒模型擴(kuò)展-清除默認(rèn)樣式

• 作用：為避免默認(rèn)樣式對(duì)整體布局效果造成影響。
• 大部分容器級(jí)標(biāo)簽都有默認(rèn)邊距。
• ul和ol列表有默認(rèn)的列表前綴，需要清除list-style屬性。
• a標(biāo)簽的默認(rèn)樣式：設(shè)置color和text-decoration
• h系列標(biāo)簽,b標(biāo)簽，strong標(biāo)簽有加粗效果，設(shè)置font-weight。
• 給body設(shè)置整體文字樣式，讓大部分后代標(biāo)簽全部去繼承。

盒模型擴(kuò)展-height應(yīng)用

• 根據(jù)不同的需求，高度可以設(shè)置，也可以不設(shè)置，如果設(shè)置了高度，盒子占有的高度位置就定死了，后面的同級(jí)元素會(huì)緊挨著加載，如果不設(shè)置高度，會(huì)根據(jù)標(biāo)簽內(nèi)部內(nèi)容高度自動(dòng)撐開。
• 必須設(shè)置高度：設(shè)計(jì)圖中盒子高度占位是固定的，后面同級(jí)元素在高度下面加載。
  注：設(shè)置高度后，如果盒子中的內(nèi)容很多的話，也不會(huì)把盒子撐開，且盒子后面的元素位置不變。
• overflow屬性：對(duì)溢出的內(nèi)容顯示進(jìn)行設(shè)置
• 屬性值| 說明 --- | --- visible | 默認(rèn)值，溢出的部分顯示。 hidden | 溢出的部分隱藏，隱藏超過邊框范圍的內(nèi)容 scroll | 溢出的部分出現(xiàn)滾動(dòng)條，可以拖動(dòng)滾動(dòng)條看到隱藏的部分，多出盒子高度的部分不顯示，不論有沒有溢出，水平和垂直方向都會(huì)出現(xiàn)滾動(dòng)條 auto | 自動(dòng)的，如果沒有溢出就正常顯示，如果有溢出，溢出的方向自動(dòng)出現(xiàn)滾動(dòng)條
• 必須不設(shè)置高度：要求盒子高度必須自適應(yīng)內(nèi)部內(nèi)容的高度，或者設(shè)置height的屬性值是自動(dòng)的。

盒模型擴(kuò)展-居中

• 文本水平居中：text-align屬性，不論單行或多行都可以設(shè)置。
• 單行文本垂直居中：設(shè)置文字的line-height等于盒子的高度。
• 多行文本垂直居中：讓元素高度自適應(yīng)或者正好等于多行文本的高度，設(shè)置元素內(nèi)邊距上下值相同。
• 元素垂直居中：讓父元素高度自適應(yīng)，子元素高度自動(dòng)撐開父級(jí)的高度，再給父元素設(shè)置相同的上下邊距。
• 元素水平居中：子盒子的寬度低于父盒子的寬度，可以設(shè)置子盒子的margin值，為margin：0 auto；
• 原因：auto只在水平方向有作用，水平方向的margin如果設(shè)置為auto，邊距會(huì)自動(dòng)無限增大，直到撐滿整個(gè)父元素除了子元素之外剩余的區(qū)域，如果兩個(gè)水平方向都是auto，兩邊都要無限大，只能達(dá)到一個(gè)平衡，兩邊距離相同，導(dǎo)致盒子居中。

盒模型擴(kuò)展-父子盒模型

• 一般情況下，一個(gè)父元素內(nèi)部可以放一個(gè)或者多個(gè)子元素，而且多個(gè)子元素要排成一行顯示，必須保證父元素的寬度一定要足夠（不考慮溢出情況），需要循環(huán)一個(gè)設(shè)置尺寸的規(guī)律：所以子元素的寬度加在一起不能大于父元素的寬度width。
  父元素的width >= 所有子元素width + padding + border + margin
  如果不滿足條件：要么多余的子元素掉下來不能在一排，要么溢出父元素。
• 特殊情況：盒模型自動(dòng)內(nèi)減（只針對(duì)width）
• 父子盒模型中，只有一個(gè)子元素，且子元素是類似div標(biāo)簽必須占一行的。不設(shè)置子元素的width屬性，子元素的width屬性值會(huì)自動(dòng)加載父級(jí)元素的width。
• 如果同時(shí)設(shè)置了子元素水平方向的padding和border、margin，不需要手動(dòng)去進(jìn)行內(nèi)減，子元素的width會(huì)自動(dòng)收縮尺寸。
• 子元素所有水平方向的屬性值加和等于父元素的寬度。

盒模型擴(kuò)展-margin塌陷現(xiàn)象

• margin塌陷現(xiàn)象：在垂直方向如果有兩個(gè)元素的外邊距有相遇，在瀏覽器中加載的真正的外邊距不是兩個(gè)間距的加和，而是兩個(gè)邊距中值比較大的，邊距小的塌陷到了邊距值大的值內(nèi)部。
• 同級(jí)元素塌陷：上面的元素有下邊距，下面的元素有上邊距，兩個(gè)邊距相遇，真正盒子間距離是較大的那個(gè)值。
• 父子元素塌陷（margin-top傳遞問題）：父子元素之間也會(huì)出現(xiàn)margin塌陷，（1）父元素和子元素都設(shè)置了同方向的margin-top值，兩個(gè)屬性之間沒有其他內(nèi)容進(jìn)行隔離，導(dǎo)致兩個(gè)屬性相遇，發(fā)生margin塌陷。（2）本身父元素與上一個(gè)元素的距離是0，子元素如果設(shè)置了垂直方向的上邊距，會(huì)帶著父級(jí)元素一起掉下來（父元素的上邊距0塌陷到了子元素的上邊距30里面）。
• 解決辦法：
• 同級(jí)元素：如果兩個(gè)元素垂直方向有間距，只需要設(shè)置給一個(gè)元素，不要進(jìn)行拆分。
• 父子元素：讓兩個(gè)邊距不要相遇，中間可以使用父元素border或padding將邊距分隔開；更加常用的方法，父子盒模型之間的距離就不要用子元素的margin去設(shè)置，而是用父元素的padding擠出來。
• 注：水平方向沒有margin塌陷。

標(biāo)準(zhǔn)文檔流

• 標(biāo)準(zhǔn)文檔流，指的是元素排版布局過程中，元素會(huì)默認(rèn)自動(dòng)從左往右，從上往下的流式排列方式。前面內(nèi)容發(fā)生了變化，后面的內(nèi)容位置也會(huì)隨著發(fā)生變化。
• html就是一種標(biāo)準(zhǔn)文檔流文件。
• HTML中的標(biāo)準(zhǔn)文檔流特點(diǎn)通過兩種方式體現(xiàn)：微觀現(xiàn)象和元素等級(jí)。
• 微觀現(xiàn)象：（1）空白折疊現(xiàn)象。（2）文字類的元素如果排在一行會(huì)出現(xiàn)一種高低不齊、底邊對(duì)齊效果。（3）自動(dòng)換行，元素內(nèi)一行內(nèi)容寫滿元素的width時(shí)會(huì)自動(dòng)進(jìn)行換行。
• 元素等級(jí)：在標(biāo)準(zhǔn)流中，大部分元素是區(qū)分等級(jí)的，習(xí)慣將元素劃分為幾種常見的加載級(jí)別：塊級(jí)元素，行內(nèi)元素，行內(nèi)塊元素。
• 塊級(jí)元素：a、塊級(jí)元素可以設(shè)置寬高，在瀏覽器中正常加載。b、塊級(jí)元素必須獨(dú)占一行，不能與其他任何標(biāo)簽并排一行。c、塊級(jí)元素如果不設(shè)置width，會(huì)自動(dòng)撐滿父級(jí)的width區(qū)域；高度height不設(shè)置，會(huì)被內(nèi)容自動(dòng)撐開高度。
• 行內(nèi)元素： a、行內(nèi)元素不能設(shè)置寬度和高度屬性，其他的盒模型屬性雖然能設(shè)置，但是容易出現(xiàn)加載問題，b、行內(nèi)元素可以與其他的行內(nèi)或行內(nèi)塊元素并排顯示。c、行內(nèi)元素不論是否設(shè)置寬高，寬高只能被內(nèi)容自動(dòng)撐開。
• 行內(nèi)塊元素：a、可以設(shè)置寬度和高度。b、可以與其他的行內(nèi)或行內(nèi)塊并排顯示。c、如果不設(shè)置寬高，要么以原始尺寸加載，要么被內(nèi)容自動(dòng)撐開。d、具有標(biāo)準(zhǔn)流的微觀性質(zhì)，例如空白折疊現(xiàn)象。

顯示模式-display

• 標(biāo)準(zhǔn)流中的元素有自己默認(rèn)的瀏覽器加載模式，但是加載模式不是一成不變的，后期可以通過display屬性改變一個(gè)標(biāo)簽的顯示模式。
• 屬性值 | 作用 --- | --- block | 以塊級(jí)元素模式加載，具備塊級(jí)特點(diǎn) inline | 以行內(nèi)元素模式加載，具備行內(nèi)特點(diǎn) inline-block | 以行內(nèi)塊模式加載，具備行內(nèi)塊特點(diǎn) none | 直接隱藏，不占標(biāo)準(zhǔn)文檔流的位置
• 脫離文檔流：display屬性改變的顯示模式并沒有改變標(biāo)準(zhǔn)流本質(zhì)性質(zhì)，頁面還是只能從上往下加載，存在空白折疊現(xiàn)象等微觀性質(zhì)。要想實(shí)現(xiàn)更多的頁面布局效果需要脫離標(biāo)準(zhǔn)流的限制。元素脫離標(biāo)準(zhǔn)文檔流的方法包括：浮動(dòng)、絕對(duì)定位、固定定位。

浮動(dòng)

• 定義：一種非常重要的布局屬性。
• 屬性值：left--左浮動(dòng)，right--右浮動(dòng)。
• 作用：讓元素脫離標(biāo)準(zhǔn)流，同一級(jí)的浮動(dòng)元素可以并排顯示。
• 性質(zhì)：
  （1）浮動(dòng)的元素脫離標(biāo)準(zhǔn)流。
• 標(biāo)準(zhǔn)文檔流特點(diǎn)：區(qū)分行塊。
• 浮動(dòng)的元素脫離了標(biāo)準(zhǔn)流的限制，具備行塊二象性，浮動(dòng)的元素可以設(shè)置寬高，還可以并排顯示，且不會(huì)有空白折疊現(xiàn)象，如果元素不設(shè)置寬高，可以被元素內(nèi)容自動(dòng)撐開。
  （2）浮動(dòng)的元素依次貼邊。 （3）浮動(dòng)的元素沒有margin塌陷。
• margin塌陷現(xiàn)象出現(xiàn)在標(biāo)準(zhǔn)流中，浮動(dòng)元素已經(jīng)脫離標(biāo)準(zhǔn)流，不在具有margin塌陷現(xiàn)象。 （4）浮動(dòng)的元素會(huì)讓出標(biāo)準(zhǔn)流的位置

• 元素浮動(dòng)后，脫離了標(biāo)準(zhǔn)流，會(huì)將原來占有的標(biāo)準(zhǔn)流位置讓給后面的一個(gè)同級(jí)元素。
• 壓蓋效果（字圍現(xiàn)象），ie6、ie7會(huì)出現(xiàn)兼容問題，所以一般不會(huì)使用這種方法，一般使用定位制作。
• 如果沒有特殊需求，不允許一個(gè)父元素的子元素有的浮動(dòng)，有的不浮動(dòng)，同級(jí)元素中有一個(gè)浮動(dòng)其他的也要浮動(dòng)。
• 浮動(dòng)問題：
• 問題1：標(biāo)準(zhǔn)流中的元素，不設(shè)置高度的情況下，都能被內(nèi)部的標(biāo)準(zhǔn)流元素自動(dòng)撐高。如果內(nèi)部的子元素進(jìn)行了浮動(dòng)，浮動(dòng)的子元素是撐不高標(biāo)準(zhǔn)流父親的。
• 問題2：父元素沒有高度，會(huì)影響后面元素的標(biāo)準(zhǔn)流位置，如果浮動(dòng)的子元素足夠高時(shí)，有可能影響到后面浮動(dòng)元素的貼邊。

清除浮動(dòng)

• 清除浮動(dòng)1：給標(biāo)準(zhǔn)流的父元素強(qiáng)制一個(gè)合適的高度。
• 解決：父元素有高度了，前面的浮動(dòng)不能影響后面元素的標(biāo)準(zhǔn)流位置和貼邊。
• 問題：父元素高度不是自適應(yīng)，一旦子元素高度變化，問題可能再次出現(xiàn)。
• 清除浮動(dòng)2：clear屬性
• 給標(biāo)準(zhǔn)流父元素添加clear屬性，父元素不受前面浮動(dòng)影響，不會(huì)再占有浮動(dòng)讓出的位置。
• 屬性值 | 說明 --- | --- left | 清除前面左浮動(dòng)帶來的影響 right | 清除前面右浮動(dòng)帶來的影響 both | 清除前面所以浮動(dòng)帶來的影響
• 解決：浮動(dòng)元素影響后面元素標(biāo)準(zhǔn)流位置和貼邊
• 問題：父元素不能高度自適應(yīng)，兩個(gè)父元素之前如果有margin效果不正確。
• 清除浮動(dòng)3：隔墻法
• 外墻法：在兩個(gè)大的父盒子之間，添加一個(gè)空的div標(biāo)簽，標(biāo)簽上帶有clear：both屬性。
• 解決：浮動(dòng)影響后面元素標(biāo)準(zhǔn)流位置和貼邊，模擬父元素間的距離。
• 問題：父元素沒有高度自適應(yīng)。

• 內(nèi)墻法：在父元素內(nèi)部，所以浮動(dòng)的子元素后面添加一個(gè)空的div元素，標(biāo)簽高度為0，添加clear屬性。
• 解決：父元素高度自適應(yīng)，浮動(dòng)影響后面的元素位置和貼邊。
• 缺點(diǎn)：浮動(dòng)是css樣式屬性帶來的問題，內(nèi)墻法使用html結(jié)構(gòu)去輔助解決問題，如果頁面中浮動(dòng)元素很多，需要添加多個(gè)沒有語義的空標(biāo)簽，造成html結(jié)構(gòu)的冗余。
• 清除浮動(dòng)4：偽類
• 本質(zhì)：使用css的偽類，模擬一堵內(nèi)墻。
• 偽類選擇器：通過選中的標(biāo)簽添加偽類，去選中標(biāo)簽的某個(gè)狀態(tài)或位置。
• :after：這個(gè)偽類表示選中的是某個(gè)標(biāo)簽內(nèi)部的最后的位置。
• 將偽類添加給一個(gè)選中父盒子的選擇器后面，一般給需要清除浮動(dòng)的父盒子設(shè)置一個(gè)clearfix的類名。 .clearfix:after {
  content: " "; //可寫內(nèi)容
  display: block;
  height: 0px;
  clear: both;
  visibility: hidden; //content有屬性的時(shí)候?qū)?br> }
• 清除浮動(dòng)5：溢出隱藏
• 給內(nèi)部有浮動(dòng)子元素的父元素添加溢出隱藏overflow:hidden屬性，可以解決浮動(dòng)的所有問題。
• 高度自適應(yīng)原因：一個(gè)父元素沒有設(shè)置高度，同時(shí)設(shè)置了溢出隱藏，瀏覽器在加載盒子尺寸時(shí)，遇到溢出隱藏瀏覽器會(huì)強(qiáng)制性的去檢索內(nèi)部的子元素的高度，不論子元素是標(biāo)準(zhǔn)流還是浮動(dòng)，都會(huì)將最高的高度作為父盒子高度加載。
• 浮動(dòng)影響后面的元素：父元素有了高度以后，可以管理住內(nèi)部所有的浮動(dòng)元素，不會(huì)延伸到后面標(biāo)簽中，影響貼邊效果。

總結(jié)：

• 如果父元素高度是固定的，建議使用height屬性解決。
• 如果父元素高度需要自適應(yīng)，建議使用overflow屬性解決浮動(dòng)問題。

css偽類選擇器

• 概念：不需要給標(biāo)簽添加任何屬性，偽類名都是語法提前規(guī)定好的，書寫時(shí)偽類必須搭配其他選擇器使用，偽類選擇器后面添加的樣式不一定立即加載到瀏覽器之上，只有用戶觸發(fā)了對(duì)應(yīng)的行為，偽類的樣式才會(huì)立即加載。
• 偽類選擇器的權(quán)重與普通的類選擇器相同。
• a標(biāo)簽的偽類：link訪問前狀態(tài)，visited訪問后狀態(tài)，hover鼠標(biāo)懸浮狀態(tài)，active鼠標(biāo)點(diǎn)擊狀態(tài)。
• a標(biāo)簽的偽類書寫順序：link，visited，hover，active。
• 一般會(huì)將訪問前和訪問后狀態(tài)設(shè)置為一樣的效果，保證了頁面的統(tǒng)一性。

css背景屬性

• 背景顏色：background-color。
• 背景圖片：background-image。
• 背景重復(fù)：background-repeat。
• 背景定位：background-position。
• 屬性值：分為三種寫法，單詞表示法，像素表示法，百分比表示法。
• 單詞表示法：
• 水平方向可選單詞：left，center，right。
• 垂直方向可選單詞：top，center，bottom。

• 背景附著：background-attachment。
• 作用：設(shè)置的是背景圖片是否要隨著頁面或者是盒子的滾動(dòng)而滾動(dòng)。
• 屬性值 | 說明 --- | --- scroll | 滾動(dòng)的，表示背景圖片與盒子保持相對(duì)位置不變，隨著頁面的滾動(dòng)而滾動(dòng)。 fixed | 固定的，背景圖的定位的參考點(diǎn)從盒子border以內(nèi)的左上頂點(diǎn)變?yōu)榱藶g覽器窗口的左上頂點(diǎn)，頁面滾動(dòng)時(shí)，瀏覽器窗口的左上頂點(diǎn)是不變的，導(dǎo)致背景圖固定在瀏覽器窗口的某個(gè)位置，不會(huì)隨著頁面滾動(dòng)而滾動(dòng)。
• 綜合寫法時(shí)，沒有順序要求。一般background: url() no-repeat center top fixed #fff;
• 注意事項(xiàng)： 1、如果屬性值沒有設(shè)置完全，其他沒有設(shè)置的單一屬性會(huì)按照默認(rèn)值加載。2、如果想去層疊綜合屬性中的一部分，其他的屬性保持不變，最好使用單一屬性寫法進(jìn)行層疊。

背景應(yīng)用-背景圖替換插入圖

• 背景圖替換插入圖：如果想解決SEO問題，可以將HTML結(jié)構(gòu)中，插入圖換成搜索關(guān)鍵字，然后使用css添加背景給a標(biāo)簽或者h(yuǎn)1標(biāo)簽。
• 文字隱藏法：（1）將文字字號(hào)設(shè)為0（ie8以下不兼容），（2）給abiaoqian設(shè)置一個(gè)text-indent屬性，屬性值為負(fù)的很大的值，文字會(huì)走到盒子外部，直接在設(shè)置溢出隱藏。

背景應(yīng)用-padding區(qū)域背景圖

• padding區(qū)域可以加載背景，但是不會(huì)有書寫內(nèi)容。
• 方法：在一個(gè)盒子中有背景圖部分，而且有文字內(nèi)容，文字會(huì)讓開背景圖區(qū)域進(jìn)行加載，背景區(qū)域應(yīng)該使用padding擠出位置。四個(gè)方向都可以。

背景應(yīng)用-精靈圖技術(shù)

• 當(dāng)用戶訪問一個(gè)網(wǎng)站時(shí)，需要向服務(wù)器發(fā)送請(qǐng)求，網(wǎng)頁上的每張圖片都要經(jīng)過一次請(qǐng)求才能展現(xiàn)給客戶。然而，一個(gè)網(wǎng)頁中旺旺會(huì)應(yīng)用很多小的背景圖像作為修飾，當(dāng)網(wǎng)頁中的圖像過多時(shí)，服務(wù)器就會(huì)頻繁地接受和發(fā)送請(qǐng)求，這將大大降低頁面的加載速度。為了更有效地減少服務(wù)器接受和發(fā)送請(qǐng)求的次數(shù)，提高頁面的加載速度，出現(xiàn)了css精靈技術(shù)。
• css精靈：是處理網(wǎng)頁背景圖像的方式，它將一個(gè)頁面涉及到的所有的零星背景圖像都集中到一張大圖中去，然后將大圖應(yīng)用于網(wǎng)頁，這樣，當(dāng)用戶訪問該網(wǎng)頁時(shí)，只需要向服務(wù)器發(fā)送一次請(qǐng)求，網(wǎng)頁中的背景圖像即可全部展示出來。通常情況下，這個(gè)由很多小的背景圖合成的大的圖就被成為精靈圖。
• 技術(shù)依據(jù)：（1）將網(wǎng)頁中需要用到的小的尺寸的背景圖制成一張背景透明的png圖片。（2）利用背景定位技術(shù)，將精靈圖的每個(gè)小圖片加載到對(duì)應(yīng)的標(biāo)簽上。
• 注意事項(xiàng)：（1）精靈圖上放的都是小的修飾性質(zhì)的背景圖，插入圖片不能網(wǎng)上放。（2）精靈圖的寬度取決于最寬的那個(gè)背景圖片的標(biāo)簽寬度。（3）精靈圖可以橫向擺放，也可以縱向擺放，但是每個(gè)圖片之間必須有留足夠多的空白，保證背景圖片加載到一個(gè)標(biāo)簽內(nèi)部時(shí)，不能出現(xiàn)多余內(nèi)容。（4）在精靈圖的底部，盡量留出一些空白，方便以后添加其他精靈圖。

css3新增背景屬性

• 背景半透明：顏色值增加了一種rgba模式。
• rgba模式：在rgb基礎(chǔ)上增加了一個(gè)不透明度的設(shè)置，不透明度alpha取值范圍在0-1之間，0表示完全透明，1表示完全不透明，0.5表示半透明。
• 背景半透明指的是盒子背景半透明，不會(huì)影響盒子里面的內(nèi)容。
• 背景縮放background-size（只能單獨(dú)寫，不能合寫）：通過這個(gè)屬性設(shè)置背景圖片的尺寸，就像我們?cè)O(shè)置img的尺寸一樣，在移動(dòng)web開發(fā)中左屏幕適配應(yīng)用非常廣泛。
• 屬性值 | 說明 --- | --- px值 | 1-2個(gè)像素值，只設(shè)置1個(gè)值，垂直方向等比例拉伸；設(shè)置2個(gè)值，按照設(shè)置值加載 百分比 | 同像素值設(shè)置方法相同，設(shè)置百分比時(shí)，數(shù)值參照盒子的寬、高屬性 cover | 自動(dòng)調(diào)整縮放比例，把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。如有溢出部分則會(huì)被隱藏。（填滿區(qū)域） contain | 自動(dòng)調(diào)整縮放比例，把圖像擴(kuò)展至最大尺寸，保證圖片始終完整顯示在背景區(qū)域。 （圖片最大，可能會(huì)有空白）

• 多背景：css3中規(guī)定，一個(gè)盒子上，可以添加多個(gè)背景圖片。
• background-image的屬性值書寫時(shí)，以逗號(hào)分隔多背景的url路徑地址。
• 背景加載時(shí)，先寫的背景壓蓋后寫的背景圖片。

定位

• 定位屬性：position
• 屬性值 | 說明 --- | --- relative | 相對(duì)定位 absolute | 絕對(duì)定位 fixed | 固定定位
• 作用：設(shè)置定位的元素，它需要根據(jù)某個(gè)參考元素發(fā)生位置的偏移。
• 偏移量屬性：定位的元素想發(fā)生位置的移動(dòng)，必須搭配偏移量屬性進(jìn)行設(shè)置。
• 水平方向：left，right。
• 垂直方向：top，bottom。
• 屬性值：常用px為單位的數(shù)值，或者百分比。

相對(duì)定位

• 屬性值：relative。
• 參考元素：標(biāo)簽加載的原始位置。
• 必須搭配偏移量屬性才能發(fā)生位置移動(dòng)。
• 性質(zhì)：相對(duì)定位的元素不脫離標(biāo)簽的原始狀態(tài)（標(biāo)準(zhǔn)流，浮動(dòng)），不會(huì)讓出原來占有的位置。元素顯示效果上：原位留坑，形影分離。
• 注意：
• （1）偏移量屬性區(qū)分正負(fù)。
• （2）同一方向上，不能設(shè)置兩個(gè)偏移量屬性，如果水平方向同時(shí)設(shè)置了left和right屬性，只會(huì)加載left屬性。垂直方向只會(huì)加載top屬性。
• （3）由于相對(duì)定位的參考元素是自身，left的正值等價(jià)于right的負(fù)值，top的正值等價(jià)于bottom的負(fù)值。
• 實(shí)際應(yīng)用：
• （1）由于相對(duì)定位元素比較穩(wěn)定，不會(huì)隨意讓出位置，可以將相對(duì)定位的元素作為后期絕對(duì)定位的參考元素，就是所說的子絕父相情況。
• （2）相對(duì)定位比較穩(wěn)定，可以在占有原始位置的情況下，對(duì)加載效果區(qū)域進(jìn)行位置調(diào)整，進(jìn)行微調(diào)設(shè)置。或者對(duì)文字進(jìn)行微調(diào)。

絕對(duì)定位

• 屬性值：absolute。
• 參考元素：參考的是距離最近的有定位的祖先元素，如果祖先都沒有定位，參考body。必須搭配偏移量屬性才有位置的移動(dòng)。
• 性質(zhì)：絕對(duì)定位的元素脫離標(biāo)準(zhǔn)流，會(huì)讓出標(biāo)準(zhǔn)流的位置，可以設(shè)置寬高，也可以隨時(shí)定義位置，絕對(duì)定位的元素不設(shè)置寬高時(shí)只能被內(nèi)容撐開。
• 注意：（1）絕對(duì)定位的參考元素是不固定的，不同的參考元素以及不同的偏移量組合，會(huì)導(dǎo)致絕對(duì)定位元素的參考點(diǎn)不同，具體位移效果不同。（2）由于參考點(diǎn)不同，left的正值不在等于right的負(fù)值。
• body為參考元素的參考點(diǎn)：以body為參考元素時(shí)，參考點(diǎn)的確定與偏移量方向有關(guān)。
• 如有top參與的定位，參考點(diǎn)就是body頁面的左上頂點(diǎn)和右上頂點(diǎn)。自身的對(duì)比點(diǎn)是盒子的所有盒模型屬性最外面的左上角或右上角。
• 如有bottom參與的定位，參考點(diǎn)就是body頁面首屏的坐下頂點(diǎn)或右下頂點(diǎn)。對(duì)比點(diǎn)是盒子的所有盒模型屬性最外面的左下角或右下角。
• 注：實(shí)際應(yīng)用中，如果以body為參考元素，不同分辨率的瀏覽器中，絕對(duì)定位的元素位置是不同的，所以較少使用body作為參考元素。
• 祖先級(jí)為參考元素
• 參考元素：參考的是祖先元素中有任意定位的，在html結(jié)構(gòu)中距離目標(biāo)最近的祖先。
• 根據(jù)絕對(duì)定位的參考元素的位置類型不同，有三種定位組合方式：子絕父相，子絕父絕，子絕父固，由于相對(duì)定位的祖先級(jí)位置更穩(wěn)定，大多使用子絕父相的情況。
• 祖先元素參考點(diǎn)
• 如果絕對(duì)定位的參考元素是某個(gè)祖先級(jí)，參考點(diǎn)是盒子border以內(nèi)的四個(gè)頂點(diǎn)，組合方向決定了參考點(diǎn)。絕對(duì)定位的元素只關(guān)心對(duì)比點(diǎn)和參考點(diǎn)之間的距離，會(huì)忽視參考元素的padding區(qū)域。
• left、top：參考點(diǎn)是祖先的border以內(nèi)的左上頂點(diǎn)，對(duì)比點(diǎn)是盒子自身的左上角。
• right、top：參考點(diǎn)是祖先的border以內(nèi)的右上頂點(diǎn)，對(duì)比點(diǎn)是盒子自身的右上角。
• left、bottom：參考點(diǎn)是祖先的border以內(nèi)的左下頂點(diǎn)，對(duì)比點(diǎn)是盒子自身的左下角。
• right、bottom：參考點(diǎn)是祖先的border以內(nèi)的右下頂點(diǎn)，對(duì)比點(diǎn)是盒子自身的右下角。

固定定位

• 屬性值：fixed。
• 參考元素：瀏覽器窗口。
• 參考點(diǎn)：瀏覽器窗口的四個(gè)頂點(diǎn)。跟偏移量組合方向有關(guān)。
• 由于瀏覽器窗口的四個(gè)頂點(diǎn)位置不會(huì)發(fā)生變化，會(huì)導(dǎo)致固定定位的元素會(huì)始終顯示在定位位置。
• 性質(zhì)：脫離標(biāo)準(zhǔn)流，讓出標(biāo)準(zhǔn)流位置，可以設(shè)置寬高，根據(jù)偏移量屬性可以任意設(shè)置在瀏覽器窗口的位置。固定定位的元素會(huì)始終顯示在瀏覽器窗口上。

定位應(yīng)用-壓蓋

• 所有的定位類型都可以實(shí)現(xiàn)壓蓋效果。
• 由于絕對(duì)定位的元素脫離標(biāo)準(zhǔn)流，不占據(jù)標(biāo)準(zhǔn)流位置，壓蓋效果更加徹底，在實(shí)際工作中，常見的是絕對(duì)定位制作的壓蓋。

定位應(yīng)用-居中

• 定位的元素，如果想在參考元素中居中顯示，有自己的居中方法：
• （1）在居中的方向使用一個(gè)偏移量屬性，例如left，設(shè)置屬性值為50%。導(dǎo)致圖片的左頂點(diǎn)移動(dòng)到參考元素的中心位置。
• （2）給絕對(duì)定位的子盒子設(shè)置一個(gè)同方向的margin，例如margin-left，屬性值為負(fù)的自身寬度的一半。（不論子盒子的寬度是否比參考元素更寬，都能使用以上方法進(jìn)行居中設(shè)置。 ）
• 擴(kuò)展：
• （1）解決標(biāo)準(zhǔn)流中，寬的子盒子在窄的父盒子中的居中，可以設(shè)置大的子盒子相對(duì)定位，利用相對(duì)定位居中的方法進(jìn)行居中。 （大盒子在小盒子中居中）
• （2）浮動(dòng)的元素居中，在不改變?cè)几?dòng)狀態(tài)情況下，可以利用相對(duì)定位居中方法。

壓蓋順序z-index

• 默認(rèn)壓蓋順序：定位的元素不區(qū)分定位類型，都會(huì)去壓蓋標(biāo)準(zhǔn)流或浮動(dòng)的元素。
• 如果都是定位的元素，在html中后寫的定位壓蓋先寫的定位。
• 自定義壓蓋順序：如果想要更改定位的元素的壓蓋順序，可以設(shè)置一個(gè)z-index屬性。
• 屬性值：數(shù)字。
• 注意：
• 屬性值大的會(huì)壓蓋屬性值小的，設(shè)置z-index屬性的會(huì)壓蓋沒有設(shè)置的。
• 如果屬性值相同，比較html書寫順序，后寫的壓蓋先寫的。
• z-index屬性只能設(shè)置給定位的元素才會(huì)生效，如果給沒有定位的元素設(shè)置，不會(huì)生效。
• 父子盒模型中，如果父子盒子都進(jìn)行了定位，與其他的父子級(jí)有壓蓋的部分：
• 父級(jí)盒子：如果不設(shè)置z-index，后寫的壓蓋先寫的；如果設(shè)置了z-index，值大的壓蓋值小的。
• 子級(jí)盒子：如果父級(jí)沒有設(shè)置z-index屬性，子級(jí)z-index大的會(huì)壓蓋小的；如果父級(jí)設(shè)置了z-index值，無論子級(jí)值是多少，都是父級(jí)的值大的子級(jí)壓蓋父級(jí)值小的子級(jí)，俗稱“從父效應(yīng)”。