前端基礎知識學習記錄（一）

前端基礎知識學習記錄（一）

一、CSS position 屬性

經過使用 position 屬性，能夠選擇四種不一樣類型的定位，會影響元素框生成的方式。
position 屬性值的含義：

static：元素框正常生成。塊級元素生成一個矩形框，做爲文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。
relative：相對定位。相對於元素的原始位置進行定位。元素框偏移某個距離，它本來所佔的空間仍保留。
absolute：絕對定位。相對於其包含塊定位，包含塊多是文檔中的另外一個元素或者是初始包含塊；也可說相對於除static定位之外的第一個父元素進行定位。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
fixed：相對於瀏覽器窗口進行定位。

二、CSS display 屬性
block、inline、inlinke-block

display:block;
block元素會獨佔一行，多個block元素會各自新起一行。默認狀況下，block元素寬度自動填滿其父元素寬度，能夠自行設置寬高以及margin、padding屬性。
display:inline;
inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化，不能夠自行設置寬高，能夠設置水平方向的margin和padding屬性，但不能夠設置豎直方向的margin與padding屬性。
display:inline-block;
將對象呈現爲inline對象，但對象的內容做爲block對象呈現。即以後的對象會被排列在同一行內，亦可自行設置寬高以及margin、padding屬性。

三、CSS 選擇器

CSS元素選擇器：又稱類型選擇器，它匹配文檔樹中該元素類型的每個實例。
舉例：<style type="text/css">p{}</style><p></p>
類選擇器：類選擇器容許以一種獨立於文檔元素的方式來指定樣式，該選擇器能夠單獨使用，也能夠與其餘元素結合使用。
舉例：<style type="text/css">p.box{}</style><p class="box"></p>
ID選擇器：ID 選擇器容許以一種獨立於文檔元素的方式來指定樣式。只能在文檔中使用一次；且ID 選擇器不能結合使用（ID 屬性不容許有以空格分隔的詞列表）。
舉例：<style type="text/css">#box{}</style><div id="box"></div>
屬性選擇器：屬性選擇器能夠根據元素的屬性及屬性值來選擇元素。
舉例：<style type="text/css">a[href] {}</style><a href=""></a>
後代選擇器：又稱包含選擇器,能夠選擇做爲某元素後代的元素。
舉例：<style type="text/css">h1 em{}</style><h1><em></em></h1>
子元素選擇器：選擇做爲某元素子元素的元素。
舉例：<style type="text/css">h1>strong{}</style><h1><strong></strong><strong></strong></h1>
相鄰兄弟選擇器：可選擇緊接在另外一元素後的元素，且兩者有相同父元素。
舉例：<style type="text/css">h1+p{}</style><h1></h1><p></p><p></p>
僞類：用於向某些選擇器添加特殊的效果。
舉例：a:hover{}
僞元素：用於向某些選擇器設置特殊效果。