background-size:cover

適用于背景圖片，會(huì)將圖片平鋪

text-align對(duì)齊

用法： 作用于塊級(jí)元素上讓行內(nèi)元素對(duì)齊或居中
比較典型的應(yīng)用：

1. 文本的對(duì)齊
2. 作用于table標(biāo)簽上
3. 用于圖片的對(duì)齊

表示強(qiáng)調(diào)

1. em標(biāo)簽：語(yǔ)義：強(qiáng)調(diào)。效果：斜體

2. strong標(biāo)簽：語(yǔ)義：強(qiáng)調(diào)。效果：粗體（一般使用這個(gè)）

表示引用

1. q標(biāo)簽：語(yǔ)義：一句話的簡(jiǎn)短引用。效果：文字被放到雙引號(hào)內(nèi)

2. blockquote標(biāo)簽：語(yǔ)義：長(zhǎng)文本引用。效果：文字首尾會(huì)添加縮進(jìn)

span標(biāo)簽

語(yǔ)義：沒有語(yǔ)義，如果需要單獨(dú)對(duì)標(biāo)簽添加效果，也可以使用它

br換行標(biāo)簽

語(yǔ)義：換行

語(yǔ)法：xhtml 1.0中使用〈br /〉（推薦使用）

html4.01中使用

注意：在html中輸入換行、空格都是沒有用的，需要添加標(biāo)簽實(shí)現(xiàn)效果

空格

語(yǔ)法：

添加代碼

添加一行代碼使用：code標(biāo)簽
添加多行代碼使用：pre標(biāo)簽

table標(biāo)簽

語(yǔ)義：用于創(chuàng)建表格
包含的標(biāo)簽：table、tbody、tr、th、td

• <tbody>…</tbody>：當(dāng)表格內(nèi)容非常多時(shí)，表格會(huì)下載一點(diǎn)顯示一點(diǎn)，但如果加上<tbody>標(biāo)簽后，這個(gè)表格就要等表格內(nèi)容全部下載完才會(huì)顯示。如右側(cè)代碼編輯器中的代碼。

• tr標(biāo)簽：用于創(chuàng)建表頭，默認(rèn)樣式：粗體并且居中

• th標(biāo)簽：用于創(chuàng)建表頭中的單元格

• tr標(biāo)簽：表示一行

• td標(biāo)簽：表示表中內(nèi)容的一個(gè)單元格

• 為表格添加摘要，如：

  <table summary="這是摘要"></table>
  

摘要在瀏覽器中是不會(huì)顯示的，只便于搜索引擎搜索到

• 為表格添加表頭，如：
  <caption>這是表頭</caption>

class與id選擇器

class選擇器可以使用詞列表，也就是可以指定多個(gè)類名，而id選擇器則不可以，如：
〈span class=“stress bless”〉可以使用詞列表〈/span〉
上面的是正確的
〈span id=“stress bless”〉不可以使用詞列表〈/span〉不可以這么寫，id只能指定一個(gè)

樣式優(yōu)先級(jí)

優(yōu)先級(jí)排列：瀏覽器默認(rèn)樣式 < 網(wǎng)頁(yè)制作者的樣式 < 用戶自定義的樣式；
注意： 如果樣式這只了"!important"， 那么它的優(yōu)先級(jí)高于用于自定義的樣式

段落中的文字設(shè)置

1. 文字上面的刪除線： p{text-decoration: line-through;}
2. 兩個(gè)字母之間的間距：p{letter-spacing: 20px;}
3. 兩個(gè)單詞之間的間距：p{word-spacing: 20px;}
4. 塊狀元素的排列：
   左對(duì)齊： p{text-align: left;}
   右對(duì)齊： p{text-align: right;}
   居中： p{text-align: center;}

元素分類

1. 塊級(jí)元素

包括：
<div>, <p>,<h1>~<h6>, <input>, <ul>,<ol>,
<dl>,<table>,<address>,<blockquote>,<form>等

2. 內(nèi)聯(lián)元素

包括：
<a>,<i>,<span>,<em>,<strong>,<label>,
<br>,<q>,<code>,<cite>,<var>等

3. 塊級(jí)內(nèi)聯(lián)元素

<img>, <input>等

為什么這么分類？這三種元素的區(qū)別？
塊級(jí)元素的width、height、margin和padding有效
內(nèi)聯(lián)元素的width、height、margin(top和bottom)和padding(top和bottom)不能設(shè)置，但是margin-right、margin-left、padding-right和padding-left是可以設(shè)置的

塊級(jí)元素特點(diǎn)

1. 每個(gè)塊級(jí)元素獨(dú)占一行，并且其后的元素也另起一行
2. 元素的高度、寬度、行高、頂邊距和底邊距可以設(shè)置
3. 元素寬度在不設(shè)置的情況下是父元素的100％

內(nèi)聯(lián)元素特點(diǎn)

1. 和其他元素在一行上
2. 高度、寬度、行高、底邊距和頂邊距 不可設(shè)置
3. 寬度=內(nèi)容寬度
   注意： 如果兩個(gè)內(nèi)聯(lián)元素之間用空格或者換行隔開，則它們之間會(huì)有一個(gè)間隙

內(nèi)聯(lián)塊狀元素特點(diǎn)

1. 和其他元素在一行上
2. 寬度、高度、行高、底邊距和頂邊距可以設(shè)置

網(wǎng)頁(yè)布局的基本模型

布局模型和盒模型，布局模型是建立在盒模型之上的

CSS包含三種布局模型：Flow，F(xiàn)loat，Layer；
在網(wǎng)頁(yè)中，元素有三種模型：

1. 流動(dòng)模型（Flow）
2. 浮動(dòng)模型（Float）
3. 層模型（Layer）

流動(dòng)模型

流動(dòng)模型是默認(rèn)的網(wǎng)頁(yè)布局模式，其中網(wǎng)頁(yè)元素默認(rèn)按流動(dòng)模式布局
特點(diǎn)有二：

1. 塊級(jí)元素都會(huì)在所處的包含元素內(nèi)自上而下的垂直延伸分布，默認(rèn)情況下塊級(jí)元素寬度為100%，也就是占用一行寬度
2. 內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布

浮動(dòng)模型

使用float實(shí)現(xiàn)
塊級(jí)元素獨(dú)占一行，可以通過設(shè)置它的寬度，然后設(shè)置float，使兩個(gè)塊級(jí)元素排列在一行

層模型

三種形式：

1. 絕對(duì)定位：（position：absolute）
2. 相對(duì)定位：（position：relative）
3. 固定定位：（position: fixed）

絕對(duì)定位

positon: absolute

作用：

1. 將元素從文檔流中脫離出來
2. 然后使用top、bottom、left、right等屬性相對(duì)于其最接近的具有定位屬性(relative屬性)的父元素進(jìn)行絕對(duì)定位，如果沒有父元素存在定位屬性，則相對(duì)于html元素進(jìn)行定位，也就是瀏覽器窗口

長(zhǎng)度單位

主要分三種：px, em, %

1. em
   就是本元素給定字體的font-size。如下：
   p{font-size：12px; text-indent：2em;}
   這里實(shí)現(xiàn)的首行縮進(jìn)就是2*12px=24px
   **注意：當(dāng)本元素設(shè)置的font-size為em，那么它是以父元素的font-size為依據(jù)的

水平居中

分兩種情況：行內(nèi)元素和塊級(jí)元素
塊級(jí)元素又分為定寬塊級(jí)元素和不定寬塊級(jí)元素

行內(nèi)元素

如果需要句中的為文本或圖片，則可以設(shè)置它的父元素text-align：center來實(shí)現(xiàn)

塊狀元素

塊狀元素的居中分為兩種：定寬塊狀元素和不定寬塊狀元素，使用text-align：center設(shè)置不起作用

定寬塊狀元素

先需要設(shè)置width屬性，然后使用margin：0 auto進(jìn)行設(shè)置

不定寬塊狀元素

三種方法實(shí)現(xiàn)：

圖片發(fā)自簡(jiǎn)書App

圖片發(fā)自簡(jiǎn)書App

注意：針對(duì)第一種方法的解釋，比較簡(jiǎn)潔的實(shí)現(xiàn)方法是.wrap{display：table; margin：0 auto;}（這里假設(shè)要居中的標(biāo)簽類名為wrap）

不定寬塊狀元素方法二

第一：設(shè)置需要水平居中的父元素 為：text-align: center;
第二： 設(shè)置需要水平居中的元素為：display: inline;

不定寬塊狀元素方法三

第一： 設(shè)置父元素position: relative; left: 50%; 此時(shí)父元素的左外邊界=屏幕中心線
第二：設(shè)置父元素float；父元素的寬度=子元素的寬度
第三： 設(shè)置居中元素position: relative; left: -50%; 相對(duì)于父元素向左偏移50%，因?yàn)楦冈氐膶挾?子元素的寬度，因此就是相對(duì)于自己的寬度向左偏移50%；也就實(shí)現(xiàn)居中了
注意：如果設(shè)置了float，那么就會(huì)生成塊級(jí)框，導(dǎo)致父元素的寬度=子元素的寬度，如果沒有設(shè)置float，那么它的寬度為屏幕的寬度（假如父元素的父元素為html）；

垂直居中

垂直居中分為兩種情況：父元素高度確定的單行文本 和 父元素高度確定的多行文本

父元素高度確定的單行文本

設(shè)置父元素的height(高度)和line-height（行間距）一致

父元素高度確定的多行文本

方法一：

給需要居中的標(biāo)簽添加：
<table><tbody><tr><td>
這里添加需要居中的標(biāo)簽
</table></tbody></tr></td>
同時(shí)，設(shè)置 vertical-align：middle。

html代碼：

<body>
<table><tbody><tr><td class="wrap">
<div>
     <p>看我是否可以居中。</p>
     <p>看我是否可以居中。</p>
      <p>看我是否可以居中。</p> 
</div>
</td></tr></tbody></table>
</body>

css代碼：

table td{height:500px;background:#ccc}

因?yàn)?td 標(biāo)簽?zāi)J(rèn)情況下就默認(rèn)設(shè)置了 vertical-align 為 middle，所以我們不需要顯式地設(shè)置了。

方法二：

對(duì)父元素添加：

display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、

html代碼：

<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>

css代碼：

<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

這種方法的好處是不用添加多余的無意義的標(biāo)簽，但缺點(diǎn)也很明顯，它的兼容性不是很好，不兼容 IE6、7而且這樣修改display的block變成了table-cell，破壞了原有的塊狀元素的性質(zhì)

隱性改變display類型

有一個(gè)有趣的現(xiàn)象就是當(dāng)為元素（不論之前是什么類型元素，display:none 除外）設(shè)置以下 2 個(gè)句之一：

1. position : absolute
2. float : left 或 float:right

簡(jiǎn)單來說，只要html代碼中出現(xiàn)以上兩句之一，元素的display顯示類型就會(huì)自動(dòng)變?yōu)橐?display:inline-block塊狀元素的方式顯示，當(dāng)然就可以設(shè)置元素的 width 和 height 了，且默認(rèn)寬度不占滿父元素。

如下面的代碼，小伙伴們都知道 a 標(biāo)簽是 行內(nèi)元素，所以設(shè)置它的 width 是 沒有效果的，但是設(shè)置為 position:absolute 以后，就可以了。

<div class="container"> <a href="#" title="">進(jìn)入課程請(qǐng)單擊這里</a></div>

css代碼

<style>.container a{ position:absolute; width:200px; background:#ccc;}</style>

想不起 display:inline-block 是做什么的小伙伴們，單擊“元素分類--內(nèi)聯(lián)塊狀元素”可返回到前面小節(jié)進(jìn)行復(fù)習(xí)。