1.塊級元素

塊級元素並不等於display：black；
            li的預設display：list-item；table的display預設是table；
            他們都符合塊級元素的基本特徵，也就是一個水平流上只可以單獨顯示一個元素，多個塊級元素則換行顯示
            因此理論上可以配合clear屬性來清除浮動帶來的影響：
                因為浮動的影響，img就脫離文件流了，父級div獲取不到他的高度(但圖片的高度不變)，所以父元素的高度為0；但設定了.clear:after(後面介紹)，就相當於新增在父元素的最後一個子元素，他是一個了塊狀元素，並且清除左右浮動
                所以他(父元素的最後一個子元素),是在文件流的在圖片下面(但圖片的高度不變)，父元素就可以同時獲得img和.clear:after(後面介紹)的相同高度，但麼有給.clear:after(後面介紹)中的content設定內容
                (並不是認為沒有內容節點就不存在這個是錯誤的，節點中沒內容節點一樣存在)所以父高度就是圖片的高度。
    
            
            CSS
            .box{
                padding: 10px;
                background-color: darkred;
            }
            .box>img{
                float: left;
            }
            .clear:after{ //after相當於父元素中的最後一個子元素，他裡面的content中的內容為行內元素，給他設定了塊狀元素，並且清除左右浮動就可以清除浮動影響
                content: ""; //空內容保證只有圖片的高度
                display: block; //設定為塊及元素，這樣當他左右倆邊出現浮動的元素的時候就換行，行內元素不可以(這裡設定為list-item;table)都是可以的
                clear: both;
                
            }
            HTML
            <div class="box clear">
            
            <img src="images/IMISSYOU.jpg">

2.為什麼list-item元素會出現專案符號

display:list-item;是li標籤的預設的值(li是塊級元素;為什麼li標籤旁邊會有專案符號的原因)
            本來css世界只有black和inline元素，但是出現了list-item，需要預設顯示專案符號，一個盒子解釋不了，天神就給list-item在重新命名了一個盒子叫-"附加盒子"
            所以所有的塊級元素都有一個"塊級元素"，而list-item他多了個"附加盒子"來存成專案符號
            但故事沒有結束，搞定了list-item來個個真正的一個盒子解釋不了的怪物，inline-black，所以天神又新添加了一個盒子，也就是每個元素有2個盒子
                外在盒子(附加盒子也一同屬於外在盒子)：負責元素是可以一行顯示，還是隻能換行顯示
                內在盒子(也叫容器盒子)：負責寬高和內容等
                故其實：
                display：black == display：black-black
                ....
            測試學習結果
            display：inline-table的盒子是這麼現成的:外面是內聯盒子，裡面是table盒子(本來行內元素中部不可以放塊級元素單table盒子可以放塊級元素)；
            如果給p設定table-cell就可以一行顯示(實現了行內元素中可以放置塊級元素)

3.width的學習

            關於width:auto的4種表現
            1.充分利用可用空間:比分說div p 這些元素的寬度預設的是100%於父級容器
            2.收縮與包裹：典型的代表浮動，絕對定位，inline-block元素與table元素簡稱"包裹性"收縮到合適
            3.收縮到最小：table-layout為auto的時候，當每一列空間不夠漢子能斷就斷，英文單詞不可以斷(css3中min-content)
            4超出容器的限制：當設定了white-space：nowrap的時候，則表現為超出(css3中max-content)
    3.1流體佈局下的高寬分離

            因為預設的box-sizing:為content-box寬度作用在內容
            所以當出現
            .box{width: 100px; border:1px solid red; }或.box{width: 100px ; padding:20px}border/padding會影響寬度的屬性共存的時候.box的寬頻就不是我們所設定的那樣
            而是 實際寬度 = width + border + padding
            實際的內容寬度 content=width； 
            那該變的方法是什麼
            一.css流體佈局下的寬度分離原則
            給box在設定一個父級的DIV用他來放寬度這樣box就可以流動性在內部了width:auto，當在給box在設定border，padding就會在div內部改變，而不會改變box的寬度這個時候box的寬度等於父級元素的寬度就固定了；
            .father{
                width:180px;
            }
            .box{
                margin:0 20px;
                padding:0 20px;
                border:1px solid;
            }
            實際的寬度為 = 父級的寬度180px；
            實際的內容寬度 content=180-40-40-2px； 
            改變方法二
            用box-sizing，box-sizing的作用也叫width的細節(IE8要加-ms-字首)
            因為預設的box-sizing:為content-box寬度作用在內容，所以當我們改變其屬性值的時候padding-box其width就作用在padding box上面了就可以出現了想流動性自適應一樣的現象;
            content = width - padding - border;
            其他：為何box-sizing不支援margin-box因為沒有價值，margin只有在width：auto的時候才有用，但這個時候元素已經是處於流動性了，有沒有設定box-sizing都一樣

4.heightl的學習

            1.關於height：auto%
            width支援百分百，而height不支援百分百；
            為什麼？
            規範中說到：如果包含塊的高度沒有顯示指定(即高度由內容決定)，並且該元素不是絕對定位，則計算值為auto;
                        如果包含塊的寬度沒有顯示指定，那麼產生的佈局是未定義的
            auto*number = NAN;
            那如何讓height支援百分百;
            1.給父級設定固定高度；
            2.使用絕對定位；(使用在遮罩)
            但兩者是有區別的:絕對定位的寬高的百分百是相對於padding box的 而非決定定位元素是相對於content box

6.max min的學習

            1.為流體而生的main-width/max-height
            .container{
                mai-width:1200px;
                max-width:1400px;
            }
            2.對圖片的處理
            img{
                max-width：100%;
                height:auto !important;
            }
            height:auto是必須的，如果原始的圖片有設定height，在max-width生效的時候保證圖片保持原來的比例
            3.於眾不同的初始值
            min的初始值是auto； max的初始值是none;
            4.超越！important
            指的是max-width會覆蓋width，而且這種覆蓋不是普通的覆蓋，而是超級覆蓋
            在css中！important比直接在元素的style屬性中設定css的宣告還要高，一般用在CSS覆蓋javaScript設定是的
            但是max-width比！important的等級還要高
            &lt img src = "1.jpg" style = "width:148px !important"; >
            img{max-width:256px;}
            最終img的最大寬度為256px;
            5 超越 max-width
            當min-width 與max-width同時存在的時候 min-width會覆蓋max-width