background-size:cover
適用于背景圖片袜蚕，會將圖片平鋪
text-align對齊
用法： 作用于塊級元素上讓行內(nèi)元素對齊或居中
比較典型的應(yīng)用：
- 文本的對齊
- 作用于table標(biāo)簽上
- 用于圖片的對齊
表示強(qiáng)調(diào)
em標(biāo)簽：語義：強(qiáng)調(diào)糟把。效果：斜體
strong標(biāo)簽：語義：強(qiáng)調(diào)。效果：粗體（一般使用這個(gè)）
表示引用
q標(biāo)簽：語義：一句話的簡短引用牲剃。效果：文字被放到雙引號內(nèi)
blockquote標(biāo)簽：語義：長文本引用遣疯。效果：文字首尾會添加縮進(jìn)
span標(biāo)簽
語義：沒有語義，如果需要單獨(dú)對標(biāo)簽添加效果凿傅，也可以使用它
br換行標(biāo)簽
語義：換行
語法：xhtml 1.0中使用〈br /〉（推薦使用）
html4.01中使用
注意：在html中輸入換行缠犀、空格都是沒有用的，需要添加標(biāo)簽實(shí)現(xiàn)效果
空格
語法：
添加代碼
添加一行代碼使用：code標(biāo)簽
添加多行代碼使用：pre標(biāo)簽
table標(biāo)簽
語義：用于創(chuàng)建表格
包含的標(biāo)簽：table狭归、tbody夭坪、tr、th过椎、td
<tbody>…</tbody>：當(dāng)表格內(nèi)容非常多時(shí)室梅，表格會下載一點(diǎn)顯示一點(diǎn)，但如果加上<tbody>標(biāo)簽后疚宇，這個(gè)表格就要等表格內(nèi)容全部下載完才會顯示亡鼠。如右側(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>
摘要在瀏覽器中是不會顯示的，只便于搜索引擎搜索到
- 為表格添加表頭榜揖，如：
<caption>這是表頭</caption>
class與id選擇器
class選擇器可以使用詞列表勾哩，也就是可以指定多個(gè)類名抗蠢，而id選擇器則不可以，如：
〈span class=“stress bless”〉可以使用詞列表〈/span〉
上面的是正確的
〈span id=“stress bless”〉不可以使用詞列表〈/span〉不可以這么寫思劳，id只能指定一個(gè)
樣式優(yōu)先級
優(yōu)先級排列：瀏覽器默認(rèn)樣式 < 網(wǎng)頁制作者的樣式 < 用戶自定義的樣式迅矛；
注意： 如果樣式這只了"!important"， 那么它的優(yōu)先級高于用于自定義的樣式
段落中的文字設(shè)置
- 文字上面的刪除線： p{text-decoration: line-through;}
- 兩個(gè)字母之間的間距：p{letter-spacing: 20px;}
- 兩個(gè)單詞之間的間距：p{word-spacing: 20px;}
-
塊狀元素的排列：
左對齊： p{text-align: left;}
右對齊： p{text-align: right;}
居中： p{text-align: center;}
元素分類
- 塊級元素
包括：
<div>, <p>,<h1>~<h6>, <input>, <ul>,<ol>,
<dl>,<table>,<address>,<blockquote>,<form>等
- 內(nèi)聯(lián)元素
包括：
<a>,<i>,<span>,<em>,<strong>,<label>,
<br>,<q>,<code>,<cite>,<var>等
- 塊級內(nèi)聯(lián)元素
<img>, <input>等
為什么這么分類潜叛？這三種元素的區(qū)別秽褒？
塊級元素的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è)置的
塊級元素特點(diǎn)
- 每個(gè)塊級元素獨(dú)占一行逮栅，并且其后的元素也另起一行
- 元素的高度悴势、寬度窗宇、行高措伐、頂邊距和底邊距可以設(shè)置
- 元素寬度在不設(shè)置的情況下是父元素的100％
內(nèi)聯(lián)元素特點(diǎn)
- 和其他元素在一行上
- 高度、寬度军俊、行高侥加、底邊距和頂邊距 不可設(shè)置
- 寬度=內(nèi)容寬度
注意： 如果兩個(gè)內(nèi)聯(lián)元素之間用空格或者換行隔開，則它們之間會有一個(gè)間隙
內(nèi)聯(lián)塊狀元素特點(diǎn)
- 和其他元素在一行上
- 寬度粪躬、高度担败、行高、底邊距和頂邊距可以設(shè)置
網(wǎng)頁布局的基本模型
布局模型和盒模型镰官，布局模型是建立在盒模型之上的
CSS包含三種布局模型：Flow提前，F(xiàn)loat，Layer泳唠；
在網(wǎng)頁中狈网，元素有三種模型：
- 流動(dòng)模型（Flow）
- 浮動(dòng)模型（Float）
- 層模型（Layer）
流動(dòng)模型
流動(dòng)模型是默認(rèn)的網(wǎng)頁布局模式，其中網(wǎng)頁元素默認(rèn)按流動(dòng)模式布局
特點(diǎn)有二：
- 塊級元素都會在所處的包含元素內(nèi)自上而下的垂直延伸分布笨腥，默認(rèn)情況下塊級元素寬度為100%拓哺，也就是占用一行寬度
- 內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布
浮動(dòng)模型
使用float實(shí)現(xiàn)
塊級元素獨(dú)占一行，可以通過設(shè)置它的寬度脖母，然后設(shè)置float士鸥，使兩個(gè)塊級元素排列在一行
層模型
三種形式：
- 絕對定位：（position：absolute）
- 相對定位：（position：relative）
- 固定定位：（position: fixed）
絕對定位
positon: absolute
作用：
- 將元素從文檔流中脫離出來
- 然后使用top、bottom谆级、left烤礁、right等屬性相對于其最接近的具有定位屬性(relative屬性)的父元素進(jìn)行絕對定位讼积，如果沒有父元素存在定位屬性，則相對于html元素進(jìn)行定位脚仔，也就是瀏覽器窗口
長度單位
主要分三種：px, em, %
- 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)元素和塊級元素
塊級元素又分為定寬塊級元素和不定寬塊級元素
行內(nèi)元素
如果需要句中的為文本或圖片玻侥，則可以設(shè)置它的父元素text-align：center來實(shí)現(xiàn)
塊狀元素
塊狀元素的居中分為兩種：定寬塊狀元素和不定寬塊狀元素决摧，使用text-align：center設(shè)置不起作用
定寬塊狀元素
先需要設(shè)置width屬性，然后使用margin：0 auto進(jìn)行設(shè)置
不定寬塊狀元素
三種方法實(shí)現(xià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%; 相對于父元素向左偏移50%，因?yàn)楦冈氐膶挾?子元素的寬度姑食，因此就是相對于自己的寬度向左偏移50%波岛；也就實(shí)現(xiàn)居中了
注意：如果設(shè)置了float，那么就會生成塊級框音半，導(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è)置了眠屎。
方法二：
對父元素添加：
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è)句之一：
- position : absolute
- float : left 或 float:right
簡單來說往湿，只要html代碼中出現(xiàn)以上兩句之一妖异，元素的display顯示類型就會自動(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)入課程請單擊這里</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í)钦铺。
