定位模型

• Flow（流動模型）（默認）
• Float（浮動模型）
• Layer（層模型）

定位方式

1. static定位：沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。
2. relative定位：對象不可層疊、不脫離文檔流，參考自身靜態位置通過top,bottom,left,right 定位，並且可以通過z-index進行層次分級。
3. absolute定位： 脫離文檔流，通過 top,bottom,left,right 定位。選取其最近一個最有定位設置的父級對象進行絕對定位，如果對象的父級沒有設置定位屬性，absolute元素將以body坐標原點進行定位，可以通過z-index進行層次分級
4. fixed定位： 這裏所固定的參照對像是可視窗口而並非是body或是父級元素。可通過z-index進行層次分級。

• 如果找到一個設置了position:relative/absolute/fixed的元素， 就以該元素為基準定位，如果沒找到，就以瀏覽器邊界定位,
• absolute元素是根據最近的定位上下文確定位置， 而fixed永遠根據瀏覽器確定位置
• 不會受空間限制，會超過容器尺寸
• absolute元素脫離了文檔結構。和relative不同，其他三個元素的位置重新排列了。
• 只要元素會脫離文檔結構，它就會產生破壞性，導致父元素坍塌。
• （此時你應該能立刻想起來，float元素也會脫離文檔結構）
• absolute元素具有“包裹性”。之前<p>
  的寬度是撐滿整個屏幕的，
• 而此時<p>的寬度剛好是內容的寬度。 如果該元素是塊級元素，元素的寬度由原來的 width: 100%（占據一行）， 變為了 auto
• absolute元素具有“跟隨性”。雖然absolute元素脫離了文檔結構，
• 但是它的位置並沒有發生變化，還是老老實實的呆在它原本的位置，
• 因為我們此時沒有設置top、left的值。
• absolute元素會懸浮在頁面上方，會遮擋住下方的頁面內容
• 設置absolute會使得inline元素被“塊”化，這在上一節將display時已經說過； 該元素將變為塊級元素，相當於給該元素設置了 display: block
• 設置absolute會使得元素已有的float失效。不過float和absolute同時使用的情況不多；
• 上文提到了absolute會使元素懸浮在頁面之上，如果有多個懸浮元素，層級如何確定？
• 答案是“後來者居上”

塊級元素：

1. 每個塊級元素都從新的一行開始，並且其後的元素也另起一行。（真霸道，一個塊級元素獨占一行）
2. 元素的高度、寬度、行高以及頂和底邊距都可設置。
3. 元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度

    <address>聯系方式信息。                
    <article>文章內容。 
    <aside> 伴隨內容。 
    <audio>音頻播放。 
    <blockquote>塊引用。    
    <canvas> 繪制圖形。 
    <dd>定義列表中定義條目描述。 
    <div>文檔分區。 
    <dl> 定義列表。 
    <fieldset>表單元素分組。 
    <figcaption> 圖文信息組標題 
    <figure> 圖文信息組 
    <footer> 區段尾或頁尾。 
    <form>表單。 
    <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 標題級別 1-6. 
    <header>區段頭或頁頭。 
    <hgroup> 標題組。 
    <hr>水平分割線。 
    <noscript> 不支持腳本或禁用腳本時顯示的內容。 
    <ol>有序列表。 
    <output> 表單輸出。 
    <p>行。 
    <pre>預格式化文本。 
    <section> 一個頁面區段。 
    <table> 表格。 
    <tfoot>表腳註。 
    <video> 視頻。       
    <ul>無序列表。    

行級元素：

1. 和其他元素都在一行上；
2. 元素的高度、寬度及頂部和底部邊距不可設置；
3. 元素的寬度就是它包含的文字或圖片的寬度，不可改變。

    b, big, i, small, tt 
    abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var 
    a, bdo, br, img, map, object, q, script, span, sub, sup 
    button, input, label, select, textarea

盒子模型

• 加上box-sizing: border-box;之後，設完width，再設padding，和border的寬度，就會擠壓content了，不會撐開。

彈性盒子 flex

• flex-direction 設置fb子元素的方向
• flex-wrap 設置折行模式
• flex-flow 合並上兩個屬性
• justify-content 設置子元素在主軸的對齊方式
• align-content 設置子元素在交叉軸的對齊方式

個人CSS筆記