HTML & CSS

 

前端的知識總結:

HTML
屬性：能夠經過屬性來設置標籤處理標籤中的內容，能夠在開始標籤中添加屬性
屬性須要寫在開始標籤中，實際上就是一個名值對的結構
屬性名=「屬性值」，一個標籤中能夠同時設置多個屬性，屬性之間要使用空格隔開

文檔聲明 避免進入怪異模式
xml比HTML語法比較嚴謹

元素就是標籤

進制
幾進制就是滿幾進一
二進制 十進制 十六進制 八進制

亂碼
計算機底層只認識0,1
在計算機中保存的任何內容，最終都要轉換爲01這種二進制編碼來保存，包括網頁中的內容

編碼 解碼 字符集
依據必定的規則，將字符轉換爲二進制編碼的過程
編碼和解碼所採用的規則，咱們稱之爲字符集

使用HTML標籤時，關心的是標籤的語義，咱們使用的標籤都是語義化標籤
在顯示效果上h1最大，h6最小，可是文字的大小咱們並不關心

段落標籤，段落標籤用於表示內容中的一個天然段<p>

在HTML中字符之間寫再多的空格，瀏覽器也會當成一個空格解析，換行也會當成一個空格
<br>換行標籤

<hr>是一個字節數標籤 能夠再頁面生成一條直線
實體
在HTML中一些如< >這種特殊字符是不能夠直接使用的，須要使用一些特殊的符號來表示這些特殊的字符
&實體的名字；
< &lt;小於
> &gt;大於
空格 &nbsp;
版權符號&copy;

圖片標籤
使用img標籤來向網頁中引入一個外部圖片
<img src="1.gif" alt="這是描述"/>
src：設置一個外部圖片的路徑
alt：能夠用來設置在圖片不能顯示時，對圖片的描述

width：能夠用來修改圖片的寬度
height：能夠用來修改圖片的高度，通常使用px做爲單位

src屬性配置的圖片的路徑，目前咱們所要使用的路徑全都是相對路徑：
相對路徑指相對於當前資源所在目錄的位置
可使用../來表示返回上級目錄

圖片的格式
jpg -支持的顏色比較多，圖片能夠壓縮，但不支持透明。通常使用jpeg來保存照片等顏色豐富的圖片
gif支持顏色少，只支持簡單的透明，支持動態圖。圖片顏色單一，或者是動態圖時可使用gif
png支持顏色多，而且支持複雜透明，能夠用來顯示顏色複雜的透明的圖片

meta
使用meta標籤還能夠用來設置網頁關鍵字
<meta name="keywords" content="這裏邊寫關鍵字"/>meta是一個字節數標籤 有兩個屬性

還能夠用來指定網頁的描述
<meta name="description" content="這裏邊寫描述內容"

這裏邊是給搜索引擎看的，搜索引擎在 檢索頁面時，會同時檢索頁面中的關鍵字和描述

使用meta能夠用來請求的重定向
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>

xhtml的語法規範
1.HTML中不區分大小寫，可是咱們通常都使用小寫
2.HTML中的註釋不能嵌套
3.HTML標籤必須結構完整，要嘛成對出現，要麼自結束標籤
<p>我是一個p標籤</p>
<p>我是一個p標籤
這兩個在瀏覽器中顯示的是同樣
由於瀏覽器會以最大的善意去理解本身寫的代碼 會自動糾正錯誤的代碼

4.標籤能夠嵌套但不能夠交叉嵌套
5.HTML標籤中的屬性必須有值，且值必須加引號
列子：<p>今每天氣 <font color=「red」>真不錯<p>

內聯框架
使用內聯框架能夠引入一個外部的頁面
使用iframe來建立一個內聯框架
屬性：
src:指向一個外部頁面的路徑，可使用相對路徑
在現實開發中咱們並不推薦使用內聯框架，由於內聯框架的內容不會被搜索引擎所檢索
width：
height：
name：能夠爲內聯框架指定一個name屬性
<iframe src="demo.html" name=「tom」></iframe>

超連接
使用a標籤來建立一個超連接
屬性：href：指向鏈接跳轉的地址
<a href=「http://www.baidu.com」target=「_blank」>我是一個超連接</a>

a標籤中的target屬性能夠用來指定打開鏈接的位置
_self,表示在當前窗口中打開
_blank在新的窗口中打開鏈接
能夠設置一個內聯框架name屬性來在內聯框架中打開

<center></center>
center 標籤默認會居中

CSS（層疊樣式表）
多層次的 tilt插件能夠查看網頁3D視圖

能夠將css樣式編寫到元素的style屬性當中 將樣式直接編寫到style屬性中，這種樣式咱們稱之爲內聯樣式 內聯樣式支隊當前的元素中的內容起做用

內聯樣式不方便複用 不建議使用

內聯樣式屬於結構與表現耦合，不方便後期的維護，不推薦使用
列子：
<p style="color:red;font-size:20px">牀前明月光</p>

 

也能夠將css樣式編寫到head中的style標籤裏 而後經過css選擇器選中指定的元素
而後能夠同時爲這些元素一塊兒設置樣式，這樣可使樣式進一步複用

將樣式表編寫到style標籤中，也能夠是表現和結構進一步分離，推薦使用

 

<style type="text/css">
p{color:red;
font-size:40;
}
</style>

<p>疑是地上霜</p>

還能夠把css樣式寫到外部的文件中方便其餘的複用 ，而後經過link標籤來將外部的css文件引入到當前的頁面中

這樣徹底使結構和表現分離，能夠在不一樣的頁面中使用，最大限度的使樣式能夠進行復用，將樣式贊成寫在樣式表中，而後經過link標籤引入，能夠提升速度
<link rel="stylesheet" type="text/css" href="style.css"/>

在style標籤裏不能寫HTML代碼和註釋
在style標籤裏寫註釋用/* */注意

css語法
選擇器：經過選擇器能夠選中指定的元素，並將聲明快的樣式應用到選擇器對應的元素上
生命塊：聲明塊緊跟選擇器後面，使用{}括起來，
生命塊中實際上就是一組一組的名值對結構，這一組一組的名值對咱們知之爲聲明。多個聲明之間使用；隔開
p{

color:red;
font-size:50px
}

學習css就是學選擇器 和 聲明塊

塊元素和內聯元素
<div></div>
div就是一個塊元素就是會獨佔一行的元素
不管他的內容有多少他都會獨佔一整行
其餘額塊元素有p h1 h2 h3...
div這個標籤沒有任何語義，他就是一個純粹的塊元素沒有任何默認樣式
div就是爲頁面進行佈局的

<span></span>
span是一個內聯元素或者叫作行內元素
所謂的行內元素指的是隻佔自身大小的元素，不會佔用一整行

常見的內聯元素：a img iframe span

span也沒有任何語義，span標籤用來選中文字，而後爲文字設置樣式

通常狀況下只是用快元素去包含內聯元素，而不會使用內聯元素去包含一個塊元素

a元素能夠包含任意元素 可是除了它自己

p元素不能夠包含任何其餘的塊元素

經常使用選擇器

元素選擇器
做用：經過元素選擇器能夠選中頁面中的全部指定元素
語法：標籤名{}

ID選擇器
經過元素id屬性值選中惟一的一個元素
語法：
#id屬性值{}

咱們能夠爲元素設置class屬性，class屬性和id屬性相似，只不過class屬性能夠重複。擁有相同class屬性值得元素，咱們說他們是一組元素

類選擇器
經過元素的class屬性值選中一組元素
語法：.class屬性值{}

選擇器分組（並集選擇器）：
經過選擇器分組能夠同時選中多個選擇器對應的元素
語法：選擇器1，選擇器2，選擇器n{}

統配選擇器
它能夠用來選中頁面中的全部元素
語法：*{}

複合選擇器（交集選擇器）
做用：能夠選中同時知足多個選擇器的元素
語法：選擇器1選擇器2選擇器n{}

對於id選擇器不建議使用複合選擇器

元素之間的關係：
父元素：直接包含子元素的元素
子元素：
祖先元素：
後代元素：
兄弟元素：

後代元素選擇器：
做用：選中指定元素的指定後代元素
語法：祖先元素 後代元素{}

子元素選擇器：
做用：選中指定父元素的指定子元素
語法：父元素>子元素
IE6及如下的瀏覽器不支持子元素選擇器

ietester這個軟件專門測試ie的兼容性

僞類選擇器
專門用來表示元素的一種的特殊的狀態
好比：訪問過的超連接，好比普通的超連接，當咱們須要爲處在這些特殊狀態的元素設置樣式時可使用僞類
a:link 表示普通的鏈接（就是沒訪問過的鏈接）
a:visited 表示訪問過的鏈接
瀏覽器是經過咱們的歷史記錄來判斷一個鏈接是否訪問過
（因爲涉及到用戶的隱私問題，因此使用visited僞類只能設置字體的顏色）
a:active表示的是超連接被點擊的狀態
a:hover表示鼠標移入的狀態

:focus 獲取焦點 當光標在輸入框一閃一閃的時候就是獲取焦點
:before
:after
::selection 爲標籤中選中的內容設置樣式
注意：這個僞類在火狐中須要採用另外一種方式編寫
::moz-selection

僞元素
使用僞元素來表示元素中的一些特殊的位置
<p>我是一個段落</p>
爲p中的第一個字符來設置一個特殊的樣式
:first-letter
爲p中的第一行設置一個背景顏色
:first-line

:before表示元素最前邊的部分
通常before都須要結合content這個樣式一塊兒使用，經過content能夠向before或after的位置添加一些內容
:after和before相反

屬性選擇器
title屬性，這個屬性能夠給任何標籤指定。當鼠標移入到元素上時，元素中的title屬性的值將會做爲提示文字顯示

做用：能夠根據元素中的屬性或屬性值來選取指定元素
語法:[屬性名]選取含有指定屬性的元素
[屬性名="屬性值"]選取含有指定屬性值得元素
[屬性名^="屬性值"]選取以什麼開頭的元素
[屬性名$="屬性值"]選取以什麼結尾的元素
[屬性名*="屬性值"]選取屬性值以包含指定內容的元素
<p title="hello"> 我是一個段落</p>

子元素選擇器
<body>
<p>我是一個p標籤</p>
<p>我是一個p標籤</p>
<p>我是一個p標籤</p>
<p>我是一個p標籤</p>
<div><p>我是一個p標籤</p></div>
</body>
:first-child:表示找的第一個子元素
:last-child:表示找最後一個子元素
:nth-child（1）:表示第n個子元素
括號裏表示選擇第幾個子元素
even表示偶數位置的子元素
odd表示奇數位置的子元素

:first-of-type
:last-of-type
:nth-of-type
和first-child這些很是相似，只不過child，是在全部的子元素中排列
而type，是當前類型的子元素中排列

兄弟元素選擇器
後一個兄弟元素選擇器
做用：能夠選中一個元素後緊挨的執行的兄弟元素
語法：前一個+後一個

選中後邊的全部兄弟元素
語法：前一個~後邊全部

否認僞類
做用：能夠從已宣紅的元素中剔除某些元素
語法：
:not(選擇器)

樣式的繼承
在css中，祖先元素上的樣式，也會被他的後代元素所繼承
利用繼承，能夠將一些基本的樣式設置給祖先元素，這樣全部的後代元素自動繼承這些樣式

可是並非全部的樣式都會被子元素所繼承：好比：背景相關的樣式邊框，定位都不會被繼承

選擇器的優先級
當使用不一樣的選擇器，選中同一個元素時而且設置相同的樣式時，這時咱們的樣式之間產生了衝突，最終到底採用哪一個選擇器定義的樣式，由選擇器的優先級（權重）決定優先級高的優先顯示。

優先級的規則：
內聯樣式，優先級1000
id選擇器，優先級100
類和僞類，優先級10
元素選擇器，優先級1
統配*，優先級0
繼承的樣式，沒有優先級
當選擇器中包含多種選擇器時，須要將多種選擇器的優先級相加而後在比較
可是注意：選擇器的優先級計算不會超過最大的數量級
若是選擇器的優先級同樣則使用靠後的樣式。

並集選擇器的優先級是單獨計算的

能夠在樣式的最後添加一個！important，則此時樣式將會得到一個最高的優先級，將會優先於全部的樣式顯示將會超過內聯樣式，可是在開發中儘可能避免使用！important

a的僞類
涉及到a的僞類一共有四個：
:link
:visited
:hover
:active
這四個選擇的優先級是同樣的

文本標籤
<em>
<strong>
<i>
這兩個標籤都表示強調的內容
em主要表示語氣上的強調，em在瀏覽器中默認使用斜體顯示

strong表示強調的內容，比em更強烈，默認使用粗體顯示

i標籤中的內容會以斜體顯示
b標籤中的內容會以加粗顯示

h5規範中規定，對於不須要注重的內容而是單純的加粗或者是斜體就可使用b和i標籤

small
small標籤中的內容會比他的父元素中的文字要小一些
在h5中使用small標籤來表示細則一類的內容
好比：合同中的小字，網站的版權聲明均可以放到small

big標籤基本上已經被淘汰了

cite標籤
網頁中全部的加書名號的內容均可以使用cite標籤，表示參考的內容
好比：書名，歌名，話劇名，電影名
<cite>《論語》</cite>

q標籤
表示一個短的引用（行內引用）
標籤中的內容瀏覽器會默認加上引號
子曰：<q>學而時習之不亦說乎</q>

blockquote標籤表示一個長引用（塊級引用）會獨佔一行

<sup>
使用sup標籤來設置上標
好比寫2的2次方

<sub>
用來表示下標

<ins>
表示一個插入的內容
ins中的內容會自動添加下劃線

<del>
來表示一個刪除的內容，會自動加上一個刪除線

<code>
專門用來表示代碼
<pre>
是一個預格式標籤，會將代碼中的格式保存，不會忽略多個空格

通常結合使用pre和code來表示一段代碼

列表標籤
列表就至關於去超市購物時那個購物清單
在HTML也能夠建立列表，在網頁中一共有三種列表
1.無序列表
使用ul標籤建立一個無序列表
使用li在ul中建立一個列表項一個li就是一個列表項
經過type屬性能夠修改無序列表的項目符號
可選值：disc，默認值，實心的圓點
square，實心的方塊
circle，空心的圓圈
注意：默認的項目符號咱們通常都不使用！！！ 由於在不一樣的瀏覽器顯示的符號不一樣。 若是須要設置項目符號，則能夠採用li設置背景圖片的方式來設置

ul和li都是塊元素

2.有序列表
有序列表和無序列表相似只不過它使用ol來代替ul
有序列表使用有序的序號做爲項目符號
type屬性，能夠指定序號的類型
可選值：1。默認值，使用阿拉伯數字
a/A採用小寫或大寫字符做爲序號
i/I採用小寫或大寫的羅馬數字做爲序號

ol也是塊元素
<ol>
<li><li>
<ol>

注意：列表之間都是能夠互相嵌套的

3.定義列表（比較複雜）
定義列表來用來對一些詞彙或內容進行定義
使用dl來建立一個定義列表
dl中有連個字標籤
dt：被定義的內容
dd：對定義內容的描述
<dl>
<dt>武松</dt>
<dd>景陽岡打虎英雄</dd>
<dl>
一樣dl ul ol 之間均可以相互嵌套

單位
長度單位：
像素：px
像素是咱們在網頁中使用最多的一個單位
一個像素就至關於咱們屏幕中的一個小點，咱們的屏幕實際上就是由這些像素點構成的
可是這些像素點是不能直接看見
-不一樣的顯示器一個像素的大小也不相同，顯示效果越好越清晰，像素越小，反之像素越大

百分比%
也能夠將單位設置爲一個百分比的形式
這樣瀏覽器會根據其父元素的樣式來計算該值
使用百分比的好處是，當父元素的屬性值發生變化時，子元素也會按照比例發生改變
在咱們建立一個自適應的頁面時，常用百分比做爲單位

em和百分比相似，它是相對於當前元素的字體大小來計算
1em=1font-size
使用em時，當字體大小發生改變時，em也會隨之改變
當設置字體相關的樣式時，常常會使用em

顏色單位
顏色單位：
在css能夠直接使用顏色的單位的單詞來表示不一樣的顏色
紅色：red
藍色：blue
綠色：green
也可使用RGB值來表示不一樣的顏色
所謂的RGB值指的是經過Red Green Blue三元色，經過這三種顏色的不一樣的濃度，來表示出不一樣的顏色
例子：rgb(紅色濃度，綠色濃度，藍色濃度)；
顏色的濃度須要一個0-255之間的值，255表示最大，0表示沒有
rgb（163,243,15）
濃度也能夠採用一個百分數來設置，須要一個0%-100%之間的數字
rgb（100%，50%，50%）
0%表示0
100%表示255

也可使用十六進制的rgb值來表示顏色，原理上和上邊的RGB原理同樣，只不過使用十六進制數來代替，使用三組兩位的十六進制數組來表示一個顏色
每組表示一個顏色，範圍00-ff
語法：#紅色綠色藍色
十六進制：
0123456789abcdef
00表示沒有，至關於rgb中的0
ff表示最大，至關於rgb中的255

#0000ff 至關於blue

像這種兩位重複的顏色，能夠簡寫
好比#ff0000能夠寫成#f00
#abc #aabbcc

字體的樣式
瀏覽器中通常默認的文字大小都是16px
font-size設置的並非文字自己的大小， 在頁面中，每一個文字都是處在一個看不見的框中的
咱們設置的font-size其實是設置格的高度，並非字體的大小
通常狀況下文字都要比格要小一些，也有時會比格大
根據字體的不一樣，顯示效果也不一樣

經過font-family：能夠指定文字的字體
當採用某種字體時，若是瀏覽器支持則使用該字體，若是字體不支持
，則使用默認字體

該屬性能夠同時指定多個字體，多個字體之間使用逗號分開，當採用多個字體時，瀏覽器會有限使用前邊的字體，若是前邊沒有在嘗試下一個
例子：font-family：華文彩雲，微軟雅黑；

//瀏覽器使用的字體默認就是計算機中的字體，若是計算機中有，則使用，若是沒有就不用

//在開發中，若是字體太奇怪，用的太少了，儘可能不用，有可能用戶的電腦沒有，就不能達到想要的效果

字體的分類
在HTML將字體分紅5大類
serif（襯線字體）
sans-serif（非襯線字體）
monospace（等寬字體）
cursive（草書字體）
fantasy（虛幻字體）
能夠將字體設置爲這些大的分類，當設置爲大的分類之後，瀏覽器會自動選擇指定的字體並應用樣式

字體的其餘樣式

font-size能夠用來設置字體的樣式
可選值：
normal,默認值，文字正常顯示italic 文字會以斜體顯示
oblique 文字會以傾斜的效果顯示
大部分瀏覽器都不會傾斜和斜體作區分，也就是說咱們設置italic和oblique他們的效果每每是同樣的
通常咱們只會使用italic

font-weight能夠設置文字的加粗效果：
可選值：normal，默認值，文字正常顯示
顯示
bold，文字加粗顯示

該樣式也能夠指定100-900之間的9個值
可是因爲用戶的計算機中每每沒有這麼多的字體，也就是200有可能100粗，300有可能比200粗，可是也肯能同樣（沒啥用忘了就行了）

font-variant能夠用來設置小型大寫字母
可選值：normal，默認值文字正常顯示
small-caps文本以小型大寫字母顯示

小型大寫字母：
將全部的字母都以大寫形式顯示，可是小寫字母的大寫，要比大寫字母的大小小一些（有點繞哈哈）

在css中還爲咱們提供了一個樣式font，使用該樣式能夠同時設置字體相關的全部樣式
//能夠將字體的樣式的值，統一寫在font樣式總，不一樣的值之間使用空格隔開
使用font設置字體樣式時，斜體 加粗 小大字母，沒有順序要求，甚至可寫可不寫，若是不寫則使用默認值
可是要求字體的大小和字體必須寫，並且字體必須是最後一個樣式，大小必須是倒數第二個樣式（有點難記。。）

實際上使用簡寫屬性也會有一個比較好的性能
font：italic small-caps 「微軟雅黑」；

行間距
在css並無爲咱們提供一個直接設置行間距的方式
咱們只能經過設置行高來間接設置行間距，行高越大行間距越大使用line-height來設置行高
行高相似於咱們上學單線本，單線本是一行一行，線於線之間的距離就是行高，網頁中的文字實際上也是寫在一個看不見的線中的，而文字會默認在行高中垂直居中顯示

行間距=行高-字體大小
//經過設置line-height能夠間接設置行高
能夠接收的值：
1.直接接收一個大小
2.能夠指定一個百分數，則會相對於字體去計算行高（不經常使用）
3.能夠直接傳一個數值，則行高會設置字體大小相應的倍數（經常使用）

對於單行文原本說，能夠將行高設置爲和父元素的高度一致，這樣能夠是單行文本在父元素中垂直居中

在font中也能夠指定行高
在字體後也能夠添加/行高，來指定行高，該值是可選的，若是不指定則會使用默認值
font：30px/30 「微軟雅黑」；

再來一點文本樣式

text-transform能夠用來設置文本的大小寫
可選值：none 默認值，該怎麼顯示就怎麼顯示，不作任何處理
capitalize 單詞的首字母大寫，經過空格來識別單詞
uppercase 全部的字母都大寫
lowercase 全部的字母都小寫

文本修飾
text-decoration
可選值：none：不添加任何修飾，正常顯示
underline 爲文本添加下劃線
overline 爲文本添加上劃線
line-thought 爲文本添加刪除線

超連接會默認添加下劃線，也就是超連接的text-decoration默認值是underline
若是要去除超連接的下劃線則設置
text-decoration：none

letter-spacing能夠指定字符間距

Word-spacing能夠設置單詞之間的距離 實際上就是設置詞與詞之間的距離

text-align用於設置文本的對其方式
可選值：left 默認值 ，文本靠左對齊 right ，文本靠右對齊
center 文本居中對齊

justify ，兩端對齊（經過調整文本之間的空格的大小，來達到兩端對齊的效果）

 

text-indent：用來設置首行縮進（只對第一行有影響）
當給他指定一個正值時，會自動向右側縮進指定的像素
若是爲他指定一個負值時，會自動向左移動指定的像素， 經過這種方式能夠將一些不想顯示的文字隱藏起來
這個值通常都使用em做爲單位

盒子模型（特別重要）

一個盒子分爲幾個部分
使用width來設置內容區的寬度
使用height設置盒子內容區的高度

爲元素設置邊框
要爲一個元素設置邊框必須制定三個樣式
border-width：邊框的寬度
border-color：邊框顏色
border-style：邊框樣式

width和height只是設置盒子內容區的大小
盒子可見框的大小由內容區和邊框寬度大小決定

使用border-width能夠分別指定四個邊框的寬度
若是在border-width中指定了四個值則四個值會分別設置給上右下左的順序，順時針
border-width：10px 20px 30px 40px
若是指定三個值則三個值會分別設定給上 左右 下
border-width：10px 20px 30px；
若是指定兩個值則兩個值則會分別給上下 左右
border-width：10px 20px ；
一個值得話則分別給四個邊
border-width：10px；（有點亂）

除了border-width ，css中還提供了四個border-xxx-width
xxx的值多是top right left bottom專門用來設置指定邊的寬度

和寬度同樣，color也提供了四個方向的樣式，能夠分別指定顏色
border-xxx-color

設置邊框的樣式：
可選值：
none沒有邊框
solid實線
dotted 點狀邊框
dashed 虛線
double 雙線
也能夠分別指定四個邊框的樣式，規則和上邊的同樣，相似。

繼續講邊框
大部分的瀏覽器中，邊框的寬度和顏色都是有默認值的，而邊框的樣式默認值都是none

border樣式：
邊框的簡寫樣式，經過他能夠同時設置四個邊框的樣式，寬度，顏色
而沒有任何的順序要求

注意：border一指定就是同時指定四個邊不能分別指定
例子：border：10px red solid；

也有border-xxx樣式
xxx表示top left right bottom
能夠單獨設置四個邊的樣式，規則和border同樣，只不過它只對一個邊生效

內邊距
內邊距指的是盒子的內容區與盒子邊框之間的距離padding
一共有四個方向的內邊距，能夠經過：
padding-top
padding-right
padding-bottom
padding-left
來設置四個方向的內邊距

內邊距會影響盒子的可見框的大小，修改內邊距會影響盒子的大小

盒子的大小由內容區，和內邊距和邊框共同決定

使用padding能夠同時設置四個邊框的樣式規則和border-width一致

外邊距
外邊距指的是當前盒子與其餘盒子之間的距離，它不會影響可見框的大小，而是會影響到盒子的位置。
盒子有四個方向的外邊距：

margin-top
margin-right
margin-bottom
margin-left

因爲頁面中的元素都是靠左靠上擺放的因此注意當咱們設置上和左邊距時，會致使盒子自身移動，反之會影響其餘盒子位置

外邊距也能夠指定一個負值
若是外邊距設置的是負值則元素會向反方向移動

margin還能夠設置爲auto，auto通常只設置給水平方向的margin
若是隻指定，左邊距或右邊距的margin爲auto則會將外邊距設置爲最大值
垂直方向外邊距若是設置爲auto，則外邊距默認就是0

若是將left和right同時設置爲auto，則會將兩側的外邊距設置爲相同的值，就可使元素自動在父元素中居中，因此咱們常常將左右外邊距設置爲auto以使子元素在父元素中水平居中

外邊距一樣可使用簡寫屬性margin，能夠同時設置四個方向的外邊距 ，規則和padding同樣

繼續外邊距
垂直外邊距的重疊
在網頁中垂直方向的相鄰外邊距會發生外邊距的重疊。所謂的外邊距重疊指兄弟元素之間的相鄰外邊距回去最大值而不是取和

若是父子元素的垂直外邊距相鄰了，則子元素的外邊距會設置給父元素

默認樣式
瀏覽器爲了在頁面中沒有樣式時，也可讓頁面有一個好的顯示效果，因此爲不少的元素都設置了一些默認的margin和padding，而他的這些默認樣式正常狀況下咱們是不須要使用的。
因此咱們每每在編寫樣式以前須要將瀏覽器中的默認的margin和padding去掉

清除瀏覽器的默認樣式
*{
margin：0
padding：0
}

內聯元素的盒子
列入span
內聯元素不能設置width和height
設置完不能用沒效果
水平方向的內邊距，內聯元素能夠設置水平方向的內邊距
內聯元素能夠設置垂直方向的內邊距，可是不會影響頁面的佈局。
內聯元素能夠設置邊框可是垂直的邊框不會影響頁面的佈局
內聯元素支持水平方向的外邊距
水平方向的相鄰外邊距不會重疊，而是求和
內聯元素不支持垂直外邊距

display樣式
將內聯元素變爲塊元素
經過display樣式能夠修改元素的類型
可選值：inline：能夠將一個元素做爲內聯元素顯示
block：能夠將一個元素設置塊元素顯示
inline-block將一個元素轉換爲行內塊元素（說白了就是可使一個元素既有行內元素的特色又有塊元素的特色，既能夠設置寬高又不會獨佔一行）
none：不顯示元素，而且元素不會在頁面中繼續佔有位置

display：none；
使用該方式隱藏的元素，不會在 頁面中顯示，而且再也不佔據頁面的位置

visibility
能夠用來設置元素的隱藏和顯示的狀態
可選值：
visible 默認值 元素默認會在頁面顯示
hidden 元素會隱藏不顯示

使用visibility：hidden；隱藏的元素雖然不會在頁面中顯示，可是他的位置依然保持

overflow
兩個div盒子
子元素默認是存在於父元素的內容區中，理論上講子元素的最大能夠等於內容區的大小
若是子元素的大小超過了父元素的內容區，則超過的大小會在父元素之外的位置顯示
超出父元素的內容，咱們成爲溢出的內容
父元素默認是將溢出內容，在父元素外邊顯示
經過overflow能夠設置父元素如何處理溢出內容
可選值：
visible：默認值，不會對溢出內容作處理，元素會在父元素之外的位置顯示
hidden，溢出的內容，會被修剪，不會顯示
scroll，會爲父元素添加滾動條，經過拖動滾動條查看內容， 該屬性不論內容是否溢出，都會添加水平和垂直方向的滾動條
auto 會根據需求自動添加滾動條比較智能。

文檔流（瞭解一下）

文檔流
文檔流處在網頁的最底層他表示的是一個頁面中的位置，咱們所建立的元素默認都處在文檔流中，
元素在文檔流中的特色
塊元素
div
1。塊元素在文檔流當中會獨佔一行，塊元素會自上向下排列
2.塊元素在文檔流中默認寬度是父元素的100%
3.塊元素在文檔流中默認高度默認被子元素（內容）撐開
內聯元素
span
1.內聯元素在文檔流當中只佔自身的大小，會默認從左向右排列，若是一行中不足以容納全部的元內聯元素，則會換到下一行，繼續自左向右
2.在文檔流中，內聯元素的寬度和高度默認都被內容撐開

浮動
塊元素在文檔流中默認垂直排列，因此這三個div（省略^_^）會從上到下依次排開

若是但願塊元素在頁面中水平排列，可使塊元素脫離文檔流
使用float來使元素浮動，從而脫離文檔流

可選值：
none，默認值，元素默認在文檔流中排列
left，元素會當即脫離文檔流，向頁面的左側浮動
right，元素會當即脫離文檔流，會向頁面的右側浮動

當爲一個元素設置浮動之後（float屬性是一個非none的值），元素會當即脫離文檔流，元素脫離文檔流之後，下面的元素會當即向上移動
元素浮動之後會盡可能向頁面的左上或右上漂浮，直到遇到父元素的邊框（再浮就飛外邊了。。。）或者其餘的浮動元素。

若是浮動元素上邊是一個沒有浮動的塊元素，則浮動元素不會超過塊元素

浮動的元素不會超過他的兄弟元素，最多最多一邊齊（比較講究）

繼續浮動

浮動的元素不會蓋着文字，文字會自動環繞在浮動元素的周圍
因此咱們能夠經過浮動來設置文字環繞圖片的效果

繼續浮動1
div
在文檔流中，元素的寬度默認佔父元素的所有
當元素設置浮動之後，會徹底脫離文檔流，塊元素脫離文檔流之後，高度和寬度都被內容撐開

span
內聯元素脫離文檔流之後會變成塊元素

高度塌陷
在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就有多高
可是當爲子元素設置浮動之後，子元素會徹底脫離文檔流，此時將會致使子元素沒法撐起父元素的高度，致使父元素的高度塌陷。

因爲父元素的高度塌陷，則父元素下的全部元素都會向上移動，這樣將會致使頁面佈局混亂。

因此在開發中必定要避免出現高度塌陷的問題。
咱們能夠將父元素的高度寫死，以免塌陷問題出現，可是一旦高度寫死，父元素的高度將不能自動適應子元素的高度，因此這種方案不推薦使用的。

解決高度塌陷

根據w3c的標準，在頁面中元素都有一個隱含的屬性叫作block formatting context 簡稱BFC，該屬性能夠設置打開或者關閉，默認是關閉的。
當開啓元素的BFC之後，元素將會具備以下的特性：
1.父元素的垂直外邊距不會和子元素重疊
2.開啓BFC的元素不會被浮動元素所覆蓋
3.開啓BFC的元素能夠包含浮動的子元素

如何開啓元素的BFC
1.設置元素浮動
使用這種方式開啓，雖然能夠撐開父元素，可是會致使父元素的寬度丟失並且使用這種方式也會致使下邊的元素上移，不解決問題
2.設置元素絕對定位
3.設置元素爲inline-block
能夠解決問題可是會致使寬度丟失，不推薦使用這種方式。

4.將元素的overflow設置爲一個非visible的值

推薦方式：將overflow設置爲hidden是反作用最小的開啓BFC的方式

可是在IE6及如下的瀏覽器中並不支持BFC，因此使用這種方式不能兼容IE6.
在ie6中雖然沒有BFC，可是具備另外一個隱含的屬性叫作HasLayout，該屬性的做用和BFC相似，因此在ie6瀏覽器能夠經過開啓HasLayout來解決問題。
開啓方式不少，咱們直接使用一種反作用最小的：
直接將元素的zoom設置爲1便可。
zoom：1
zoom表示放大的意思，後面跟着一個數值，寫幾就將元素放大幾倍。
zoom：1表示不放大元素，可是經過該樣式能夠開啓hasLayout
zoom這個樣式，只在IE中支持，其餘瀏覽器都不支持

清除浮動

咱們有時但願清除掉其餘元素浮動時對當前元素產生的影響，這時可使用clear來完成功能
clear能夠用來清除其餘浮動元素對當前元素的影響
可選值：
none，默認值，不清除浮動
left，清除左側浮動
right，清除右側
both，清除兩邊
清除對他影響最大的那個

清除浮動之後，元素會回到其餘元素浮動以前的位置

解決高度塌陷2
解決高度塌陷方案二：
能夠直接在高度塌陷的父元素的最後，添加一個空白的div ，因爲這個div並無浮動，因此他是能夠撐開父元素的高度的，而後在對其進行清除浮動，這樣能夠經過這個空白的div來撐開父元素的高度基本沒有反作用

使用這種方式雖然能夠解決問題，可是會在頁面中添加多餘的結構。

高度塌陷問題3
經過after僞類，選中after僞類

在IE6中不支持after僞類，因此在IE6中還須要使用haslayout來處理

相對定位
定位指的就是將指定的元素擺放到頁面的任意位置。經過定位能夠任意的擺放元素
經過position屬性來設置元素的定位

可選值：
static：默認值，元素沒有開啓定位
relative：開啓元素的相對定位
相對定位是相對於其原來的位置來定位的
相對定位的元素不會脫離文檔流
相對定位會使元素提高一個層級
相對定位不會改變元素的性質，塊仍是塊，內聯仍是內聯

absolute：開啓元素的絕對定位
fixed：開啓元素的固定定位（也是絕對定位的一種）

1.當開啓了元素的相對定位之後，而不設置偏移量時，元素不會發生任何變化

當開啓了元素的定位（position屬性值是一個非static的值）時，能夠經過left right top bottom四個屬性來設置元素的偏移量
left：元素相對於其定位位置的左側偏移量
同理：right top bottom 。

一般偏移量只須要使用兩個就能夠對一個元素進行定位，通常水平方向的一個偏移量和垂直方向的偏移量來爲一個元素進行定位

絕對定位

1.開啓絕對定位，會使元素脫離文檔流
2.開啓絕對定位之後，若是不設置偏移量，則元素的位置不會發生變化
3.絕對定位是至關於離他最近的開啓定位的祖先元素
4.若是全部的祖先元素都沒有開啓定位則相對於瀏覽器窗口進行定位
5絕對定位會使元素提高一個層級
6.絕對定位會改變元素的性質，內聯元素變成塊元素。

固定定位
當元素的position屬性設置fixed時，則開啓了元素的固定定位
固定定位也是一種絕對定位，它的大部分特色都和絕對定位同樣
不一樣的是：固定定位永遠都相對於瀏覽器窗口進行定位的
固定定位會固定在瀏覽器窗口的某個位置不會隨着滾動條滾動
IE6不支持固定定位

層級
若是定位元素的層級是同樣的則下邊的元素會蓋着上邊（上邊下邊指的是結構的）
經過z-index屬性能夠設置元素的層級
能夠爲z-index指定一個正整數做爲值，該值將會做爲當前元素的層級，層級有越高，越優先顯示
對於沒有開啓定位的元素不能使用z-index
例子：
z-index：1
z-index：2
z-index：3
父元素的層級再高，也不會蓋住子元素（水漲船高。。）

設置元素的透明背景

opacity能夠用來設置元素背景的透明，他須要一個0-1之間的值
0表示徹底透明
1表示徹底不透明
0.5表示半透明

opacity屬性在IE8及如下屬性代替
filter：alpha（opacity=透明度）
透明度，須要一個0-100之間的值
0表示徹底透明
100表示徹底不透明
50表示半透明

這種方式支持IE6，可是這種效果在IE Tester中沒法測試（測試工具的一個bug）

 

背景
使用background-image來設置背景圖片
若是背景圖片大於元素，默認會顯示圖片左上角
若是背景圖片和元素同樣大則會將背景圖片所有顯示
語法:background-image:url(相對路徑)
相對路徑寫在哪就相對於哪一個文件夾
若是背景圖片小於元素大小，則會默認將背景圖片平鋪以充滿元素
能夠同時爲一個元素指定背景顏色和背景圖片，這樣背景顏色將會做爲背景圖片的底色
通常狀況下設置背景圖片時都會同時指定一個顏色

background-repeat用於設置背景圖片的重複方式
可選值：
repeat，默認值，背景圖片會默認雙方向重複（平鋪）
no-repeat，背景圖片不會重複，有多大就顯示多大
repeat-x，背景圖片沿着水平方向重複
repeat-y，背景圖片沿着垂直方向重複

導航條
是對上面的練習，截取一個像素的圖片而後水平方向平鋪

背景1

背景圖片默認是貼着元素的左上角顯示的
經過background-position能夠調整背景圖片在元素中的位置
可選值：
該屬性可使用top right
left bottom center 中的連個值來指定一個背景圖片的位置。
若是隻給出一個值則第二個值默認是center

也能夠直接指定兩個偏移量，
第一個值是水平偏移量
若是指定一個正值，則圖片會向右移動指定的元素
負值的話向左
第二個是垂直偏移量
同理以此類推
例子：background-position：100px 100px；

background-attachement用來設置背景圖片是否隨頁面一塊兒滾動
可選值：
scroll，默認值，背景圖片隨着窗口滾動
fixed，背景圖片會固定在某一位置，不隨頁面滾動

 

背景1
當背景圖片的background-attachement設置爲fixed時

 

練習
作完功能後，發如今第一次切換圖片時，會發現圖片有一個很是快的閃爍，這個閃爍會形成一次不佳的用戶體驗。
產生問題的緣由：
背景圖片是之外部資源的形式加載進網頁的瀏覽器每加載一個外部資源就須要單獨發送一次請求，可是咱們外部資源並非同時加載，瀏覽器會在資源被使用纔去加載資源。
因爲加載圖片須要必定的時間因此在加載和顯示的過程當中會有一段時間背景圖片沒法顯示，致使出現閃爍的狀況。

爲了解決該問題，能夠將三個圖片整合成一個圖片，這樣能夠同時將三張圖片一塊兒加載就不會出現閃爍的問題了，而後在經過background-position來切換要顯示的圖片的位置，這種技術叫作整合技術（CSS-Sprite）
優勢：
1.將多個圖片整合爲一張圖片裏，瀏覽器只須要發送一次請求，能夠同時加載多個圖片，提升了訪問了效率，提升了用戶的體驗。
2.將多個圖片整合爲一張圖片減少了圖片的總大小，提升了請求的速度，增長了用戶的體驗。

 

雪碧圖
用photoshop製做雪碧圖

背景2
background簡寫屬性
經過該屬性能夠同時設置全部背景相關的樣式
沒有順序要求，誰在前，誰在後都行，也沒有數量的要求，不寫的樣式就使用默認值

表格
表格在平常生活中使用的很是多，好比Excel就是專門建立表格的工具
表格就是用來表示一些格式化的數據的，好比：課程表，銀行的對帳單
在網頁中也能夠建立出不一樣的表格。
在HTML中，使用table標籤來建立一個表格
在table標籤中使用tr來表示表格中的一行，有幾行就有幾個tr
在tr中須要使用td來建立單元格，有幾個單元格就有幾個td
colspan橫向的合併單元格
rowspan用來設置縱向的合併單元格

表格1
table是一個塊元素
table和td邊框之間默認有一個距離
經過border-spacing屬性能夠設置這個距離

border-collapse能夠用來設置表格的邊框的合併
若是設置了邊框合併則border-spacing自動失效

可使用th標籤表示表頭中的內容他和td的用法同樣

長表格
有一些狀況下表格是很是的長的，這時就須要將表格分爲三個部分，表頭，表格的主題，表格底部
在HTML中爲咱們提供了三個標籤：
thead 表頭
tbody 表格主題
tfoot 表格底部
這三個標籤的做用，就是來區分表格的不一樣部分，他們都是table的字標籤，都須要直接寫到table中，tr須要寫在這些標籤當中。

thead中的內容永遠會顯示在表格的頭部
tfoot中的內容永遠都會顯示在表格的底部
tbody中的內容，永遠都會顯示錶格中間

若是表格中沒有寫tbody，瀏覽器會自動在表格中添加tbody而且將全部的tr都放到tbody中，因此注意tr並非table的子元素，而是tbody的子元素經過table>tr沒法選中行，須要經過tbody>tr

 

表格的佈局（基本上沒人用了）

之前表格更多的狀況其實是用來對頁面進行佈局的，可是這鐘方式早已被css淘汰了

表格的列數由td最多的元素決定

表格是能夠嵌套的

完善clearfix

子元素和父元素相鄰的垂直外邊距發生重疊，子元素的外邊距會傳遞給父元素

使用空的table標籤能夠隔離父子元素的外邊距，組織外邊距的重疊

display-table能夠將一個元素設置爲表格顯示

 

表單
表單的做用就是用來將用戶的信息提交給服務器的
好比：百度的搜索框 註冊 登陸這些的操做都須要填寫表單

使用form標籤建立一個表單
form標籤中必須制定action屬性，該屬性指向的是一個服務器的地址，當咱們提交表單時咱們將會提交到action屬性對應的地址
使用form建立的僅僅是一個空白的表單，咱們還須要想form中添加不一樣的表單項

使用input來建立一個文本框，他的type屬性是text

提交按鈕能夠將表單中的信息提交給服務器
使用input建立一個提交按鈕
使用input建立一個提交按鈕
若是但願表單相中的數據提交到服務器中，還必須給表單項指定一個name屬性
name表示提交內容的名字

用戶填寫的信息會負載url地址的後面以查詢字符串的形式發送給服務器
URL地址？查詢字符串
格式：屬性名=屬性值&屬性名=屬性值&屬性名=屬性值。。

在提交按鈕中能夠經過value屬性來指定按鈕上的文字
在文本框中有額能夠指定value屬性值，該值將會做爲文本框的默認值顯示

使用input建立一個密碼框，他的type屬性值是password

單選按鈕
使用input來建立一個單選按鈕
他的type屬性使用radio
單選按鈕他經過name屬性進行分組，name屬性相同是一組按鈕
像這種須要用戶選擇可是不須要用戶直接填寫內容的表單項，還必須制定一個value屬性，這樣被選中的表單項的value屬性值將會最終提交給服務器

多選框
使用input建立一個多選框，他的type戶型使用CheckBox

下拉列表

使用select來建立一個下拉列表
在下拉列表中使用option標籤來建立一個一個列表列表項

下拉列表的name屬性須要指定給select，而value屬性

若是但願在單選按鈕或者是多選框中指定默認選中

當爲select添加一個multiple=「multiple」，則下拉列表變爲一個多選的下拉列表

optgroup
在select中可使用optgroup能夠對選項進行分組，同一個optgroup選項是一組
能夠經過label屬性來指定

使用textarea

建立一個文本域
input type=「reset」能夠建立一個重置按鈕點擊重置按鈕之後表單中內容將會恢復爲默認值

input type=button能夠建立一個單純的按鈕，這個按鈕沒有任何功能，只能被點擊

除了使用input也可使用button標籤建立一個按鈕

JavaScript
先死記住不須要知道爲何
alter
document.write
console.log（只有開發人員才能看到）

js編寫的位置
js代碼寫到script標籤裏邊

能夠將js代碼編寫到標籤onclick屬性中
當咱們點擊按鈕時，js代碼纔會執行

能夠將js代碼寫在超連接的href屬性中，這樣當點擊超連接時，會執行js代碼

雖然能夠寫在標籤的屬性中，可是他們屬於結構與行爲耦合，不方便維護，不推薦使用。

js基本語法
js註釋：
多行註釋/**/，註釋中的內容不會被執行，可是能夠在源代碼中查看
單行註釋：//

js嚴格區分大小寫
js中每一條語句以分號（；）結尾
若是不寫分號，瀏覽器會自動添加，可是會消耗一些系統資源，並且有些時候，瀏覽器會加錯分號，因此在開發中分號必須寫。
js中會忽略多個空格和換行，因此咱們能夠利用空格和換行對代碼進行格式化。

字面量和變量
字面量，都是一些不可改變的值
好比：1 2 3 4 5 6
字面量都是能夠直接使用的，可是咱們通常都不會直接使用字面量
變量： 變量能夠用來保存字面量，並且變量的值是能夠任意改變的
變量更加方便我麼內使用，因此在開發中都是經過變量去保存一個字面量，並且不多直接使用字面量

聲明變量
在js中var關鍵字來聲明一個變量

標識符
在js中全部的能夠由咱們自主命名的均可以稱之爲是標識符

數據類型
數據類型指的是字面量的類型
在js中一共有六種數據類型
string
number
Boolean
null
undefined
上面的數據基本數據類型
object 對象
數據引用數據類型

在js中字符串須要使用引號引發來
使用雙引號或單引號均可以，可是不要混着用
引號不能嵌套，雙引號不能放單引號

在字符串中咱們可使用\做爲轉移字符，當表示一些特殊符號時可使用\進行轉義

number類型
在js中全部的數值都是number類型
包括整數和浮點數（小數）

可使用一個運算符typeof來檢查一個變量的類型
語法：typeof 變量
檢查字符串時，會返回number

js中能夠表示的數字最大值
number.MAX_VALUE
infinity 表示正無窮
NaN表示not a number

在js中整數的運算基本能夠保證精確

若是使用js進行浮點運算，可能獲得一個不精確的結果
因此千萬不要使用js進行對精確要求比較高的運算

 

Boolean
使用typeof檢查一個布爾值時，會返回一個Boolean

null和undefined
null（空值）類型的值只有一個額，就是null
null這個值專門來表示一個爲空的對象

undefined（未定義）類型的值只有一個，就是undefined
聲明一個變量時，可是並不給變量賦值時

強制類型轉換
指將一個數據類型強制轉換爲其餘的數據類型
類型轉換主要指，將其餘的數據類型，轉化爲String Number Boolean

將其餘的數據類型轉換爲String
方式一：調用被轉換數據類型的toString（）方法
該方法不會影響原變量
可是要注意：null和undefined這兩個值沒有toString方法，若是調用會報錯

方式二：
調用String（）函數，並將轉換的數據做爲參數傳遞給函數

轉換爲Number
將其餘的數據類型轉換爲Number
轉換方式一：
使用number（）函數
--字符串--》數字
1.若是是純數字的字符串，則將其轉換爲數字
2.若是字符串中有非數字的內容，則轉換誒NaN
3.若是字符串時一個空字符串或者是一個全是空格的字符串則轉換爲0

布爾轉換爲數字
TRUE轉換爲1
false轉換爲0

轉換方式二：
這種方式專門用來對付字符串
parseInt（）
parseFloat（）

其餘的進制的數字
在js中若是須要表示16進制的數字，則須要 以0x開頭

8進制，用0開頭
2進制用0b開頭

像「070」這種字符串，有些瀏覽器會當成8進制解析，有些會當成10進制解析

能夠在parseInt（）中傳遞一個第二個參數，來指定

轉換誒Boolean
將其餘的數據類型轉換爲Boolean
使用Boolean（）函數
數字轉布爾 除了0和NaN其餘都是TRUE

字符串轉布爾 除了空字符串其餘都爲TRUE

null和undefined都會轉換爲false

對象也會轉換爲TRUE

運算符
運算符也叫操做符
經過運算符能夠對一個或多個值進行運算

算數運算符
+-/*/%

任何值和NaN運算結果都是NaN

任何值和字符串作加法運算都會轉換爲字符串再拼接

咱們能夠利用這一特色

-號

任何值作-*/都會自動轉換爲Number
能夠利用這一特色作隱士類型轉換

% 取模

一元運算符
只須要一個操做數

+對於number
：正號不會對數字產生任何影響

-對於非number類型的值

自增和自減
經過自增可使變量在自身的基礎上增長1
a++使a自增1
自增分紅兩種：後++和前++
不管是a++仍是++a，都會當即使元變量的值自增1

邏輯運算符
！非
&& 與
|| 或

對非布爾值

邏輯運算符

賦值運算符
+= -= *= /=

關係運算符
大於號
大於等於
小於號
小於等於
和數學中的是同樣的

非數值的狀況

任何值和NaN作任何比較都是false

 

 

JQuery學習
bom dom crud（增刪改查）

jquery最重藥的核心就是查找
（write less，do more）。

初識jquery：
what？是一個優秀的js函數庫
使用jquery的網站超過90%中大型web項目開發首選

why？
how？