前端的開發(fā)工具：HBuilder WebStorm VScode Sublime
查看文檔：1.www.w3school.com.cn 2.www.runoob.com
Html(超文本標記語言)： 版本Html4 Html5
CSS層疊樣式表(Cascading Style Sheets)：用于網(wǎng)頁的排版和美化
1.樣式定義如何顯示Html元素册倒。
2.樣式儲存在樣式表里科雳。
3.外部樣式表可以極大的提高工作效率甚颂。
4.外部樣式通常儲存在CSS文件當中。
5.多個樣式可重疊為一锤悄。
層疊次序：
當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？
一般而言逻卖，所有的樣式會根據(jù)下面的規(guī)則層疊于一個新的虛擬樣式表中叨吮，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)辆布。
1.瀏覽器缺省設(shè)置
2.外部樣式表
3.內(nèi)部樣式表（位于 <head> 標簽內(nèi)部）
4.內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）
因此，內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權(quán)茶鉴，這意味著它將優(yōu)先于以下的樣式聲明：<head> 標簽中的樣式聲明锋玲，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）涵叮。
總結(jié)：以上三種樣式是有優(yōu)先級的 內(nèi)聯(lián)樣式>內(nèi)部樣式>外部樣式惭蹂。
內(nèi)部樣式表>外部樣式表有一個前提：外部樣式表一定要寫在內(nèi)部樣式表的前面「盍福總體來說：就近原則（離被設(shè)置元素越近優(yōu)先級就越高）
CSS類選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式盾碗。
id 選擇器以 "#" 來定義。
類選擇器：.選擇器名稱
id選擇器與類選擇器的區(qū)別舀瓢？
相同點：可以應(yīng)用于任何html元素
不同點：
1.id選擇器只能在文檔中使用一次而類選擇器可以使用多次
2.可以使用類選擇器為一個元素同時設(shè)置多個樣式廷雅，而id選擇器是不可以的。
-子元素選擇器：使用（>）主要用于選擇指定標簽元素的第一代子元素
-后代選擇器：可以使用（空格）用于選擇指定標簽元素下的后代元素
總結(jié)：>作用于元素的第一代后代 空格：作用于元素的所有后代
通用選擇器（*）：它的作用是匹配html中所有的標簽元素
分組選擇器：element,element
注意：
1.CSS是具有繼承性的：它就是一種規(guī)則京髓，它允許樣式不僅應(yīng)用于某個特定的html標簽元素航缀，而且也可以應(yīng)用其后代。
2.CSS是具有特殊性的堰怨，瀏覽器會根據(jù)一個權(quán)值一判斷使用哪一種樣式芥玉。使用的是權(quán)值最高的樣式。
權(quán)值規(guī)則：
對于同一個元素設(shè)置了不同的css樣式备图，此時根據(jù)權(quán)值來判斷使用哪種樣式灿巧，選擇權(quán)值高的樣式進行設(shè)置皇型。
權(quán)值的定義：標簽的權(quán)值為1 類選擇器的權(quán)值為10 ID選擇器權(quán)值為100
P span 它的權(quán)值如何計算：1+1=2
P span .waring 它的權(quán)值是：12
3.CSS具有層疊性：當權(quán)值相同的時候，后面的樣式會覆蓋前面的樣式砸烦。
4.重要性(!important)在屬性后面使用!important弃鸦，會覆蓋頁面內(nèi)任何位置定義的元素樣式。
元素的分類：
Html中的標簽分類：塊級元素 內(nèi)聯(lián)元素（行內(nèi)元素） 內(nèi)聯(lián)塊級元素
常見的塊級元素：
<address> 定義地址
<caption> 定義表格標題
<dd> 定義列表中定義條目
<div> 定義文檔中的分區(qū)或節(jié)
<dl> 定義列表
<dt> 定義列表中的項目
<fieldset> 定義一個框架集
<form> 創(chuàng)建表單元素
<h1><h2><h3><h4><h5><h6> 標題元素
水平線
<li> 定義列表項目
<noframes> 為那些不支持框架的瀏覽器顯示文本幢痘，放置于frameset標簽內(nèi)
<noscript> 為那些不支持腳本的瀏覽器顯示文本
<ol> 有序列表
<ul> 無序列表
<p> 定義段落
<pre> 定義預(yù)格式化文本
<table> 定義表格
<tbody> 定義表格主體
<td> 表格中的標準單元格
<tr> 表格中的行
<tfoot> 表格中的頁腳
<th> 定義表頭單元格
<thead> 定義表格的表頭
常見的內(nèi)聯(lián)元素:
<a> 可定義錨以及超鏈接
<b> 字體加粗
<bdo> 可覆蓋默認的文本方向
<big> 大號字體加粗
換行
<cite> 引用進行定義
<code> 定義計算機代碼文本
<dfn> 定義一個定義項目
<em> 定義為強調(diào)的內(nèi)容
<i> 斜體文本效果
<img> 向網(wǎng)頁中嵌入一張圖像
<input> 輸入框
<kbd> 定義鍵盤文本
<label> 為input進行標記/標注
<q> 定義短的引用
<s> 表示不準確不相關(guān)唬格，卻不應(yīng)當給予刪除的內(nèi)容
<samp> 定義樣本文本
<select> 定義單選或者多選菜單
<small> 呈現(xiàn)小號字體效果
<span> 組合文檔中的行內(nèi)元素
<strong> 語氣更強的強調(diào)內(nèi)容
定義下標文本
定義上標文本
<textarea> 多行文本輸入控件
<tt> 打字機或者等寬的文本效果
<var> 定義變量
常見的內(nèi)聯(lián)塊元素：
<img>
<input>
塊級元素的設(shè)置 display:block 作用：將元素顯示為塊級元素
塊級元素的特點：
- 每個塊級元素都會從新的一行開始（獨占一行）
- 元素的高度 寬度 行高 頂邊距以及底邊距都是可以設(shè)置的
- 如果元素不設(shè)置寬度，它是本身父容器的100%（和父元素的一樣）
行內(nèi)元素（內(nèi)聯(lián)元素 inline）特點：
- 在同一行顯示
- 元素的寬度以及高度是不可以設(shè)置的
- 元素的寬度就是它包含文字或圖片的寬度颜说，是不可變的
內(nèi)聯(lián)塊（inline-block）:就是同時具備內(nèi)聯(lián)元素以及塊級元素的特點
元素的特點：
- 和其它元素在同一行來顯示的
- 元素的寬度以及高度是可以設(shè)置的
列出了內(nèi)聯(lián)元素和塊級元素的主要區(qū)別：
html中內(nèi)聯(lián)元素和塊級元素的區(qū)別 塊級元素 行內(nèi)元素
獨占一行,默認情況下购岗，其寬度自動填滿其父元素寬度 相鄰的行內(nèi)元素會排列在同一行里，直到一行排不下门粪，才會換行喊积，其寬度隨元素的內(nèi)容而變化
可以設(shè)置width，height屬性 行內(nèi)元素設(shè)置width玄妈，height屬性無效
可以設(shè)置margin和padding屬性 行內(nèi)元素起邊距作用的只有margin-left乾吻、margin-right、padding-left拟蜻、padding-right绎签，其它屬性不會起邊距效果。
對應(yīng)于display:block 對應(yīng)于display:inline
CSS的布局模型（3種）
- 流動模型(Flow)
- 流動模型它是網(wǎng)頁默認的布局方式酝锅，塊級元素诡必，它會垂直分布，因為塊級元素默認的寬度為100%搔扁，而內(nèi)聯(lián)元素在此模型下是從左到右水平分布的爸舒。
- 浮動模型(Float)
- 層模型（Layer）:它有三種類型 絕對定位 相對定位 固定定位
