計算盒子模型的尺寸

 盒子實際高度=上下外邊距+上下邊框+上下內邊距+內容高度

 盒子實際寬度=左右外邊距+左右邊框+左右內邊距+內容寬度

box-sizing屬性

 content-box

   盒子的實際寬度和高度僅應用於元素內容，不包括內邊距和邊框

 border-box

   盒子的實際高度和段杜包括元素內容、邊框和內邊距

問題：求“馬”所在div的寬度

樣式： .class1{

          Width:200px;

          Height:300px;

          Border:5px;

       }

<div class=”class1”><img src=”image/1.jpg” ></div>

注意：1、這裡的200px不是指馬的寬度，而是這個div，所以寬度為200+5*2=210px

      2、 .class1{

           box-sizing:content-box；   谷歌瀏覽器可以這樣寫，但其他瀏覽器要加字首

           padding：20px；

          }

          .class2{

           Padding：20px；

          }

          .class3{

           box-sizing:border-box;

           padding:20px;

          }

          上面樣式1和樣式2效果一樣，說明box-sizing是加padding的。它會使包容它的那個塊邊大。

          而樣式3會使包容它的那個塊小一點

      3、.class4{

           Width:300px;

           Border:5px;

         }

         <div class=”class4”>

            <img src=”image/2.jpg”>

         </div>

說明：在div中放入一張圖片，求這個div的寬度？300px+5*2=310px

       若在樣式中新增”padding:20px;”則這個div

       若在樣式中再新增”box-sizing:content-box;”寬度為：300+5*2+20*2=350px會把div撐寬

    若在樣式中再新增“box-sizing:border-box;”寬度為300px，在內容中縮小，所以比原本div寬要小，導致那張圖片的寬度會被擠小點（圖片寬度為：300-5*2-20*2=250px）

結論：

應用：製作京東快報

display屬性

 技能目標

   會使用float屬性佈局網頁並定位網頁元素

   會使用clear屬性清除浮動

   會使用overflow進行溢位處理

塊級元素 <div>  <p> 獨佔一行，可以設定寬高

內聯（行內）元素 <a> <img> <span> 內容是多少，寬度就是多少，並不會獨佔一行

                                 設定寬高但不起作用,設定padding、margin也不起作用

塊級元素和內聯元素能否互相轉換呢？使用display

標準文件流的組成

 塊級元素

    <h1>...<h6>、<p>、<div>、列表

 內聯(行內)元素

<span>、<a>、<img/>、<strong>...

display屬性

  控制元素的顯示和隱藏

  塊級元素與行內元素的轉變

      值            說明

     none    設定元素不會被顯示

     inline  元素會被顯示為內聯元素

     block   元素會被顯示為塊級元素

     inline-block 行內塊元素         讓內聯元素擁有塊級元素的特點（寬高，padding，margin的效果）

 Display=none  一般用於網上購物時，比如滑鼠移動到購物車有你購買的商品顯示，移走就被隱藏了

 Div,span{

      Width：100px；

      Height：100px

      Border:1px red soild;

   }

   .class1{

      Display:inline                  加了這句會導致這個div塊級元素變為內聯元素，

   }                               因此特性：不會獨佔一行、設定寬高不起作用

<div class="class1">這是一個div塊級元素</div>

<span class=”class2”>這是一個內聯元素span</span>

將塊級元素設定為內聯元素加display:inline;

將內聯元素設定為塊級元素加display:block;

要想一個內聯元素寬高起作用，則加display:inline-block;

   .class1{

     Display:inline-block;

   }

<span class=”class1”>行內塊元素</span>

<span>內聯元素</span>

  這裡網頁效果是”行內塊元素”和”內聯元素”是佔一行的，說明行內塊元素原本是內聯元素，但是他能設定寬高。

應用：京東頂部的導航條

1、導航條用<ul><li>..</li><ul>製作，但是呈現豎直，要想變為水平則樣式中ul li{display:inline-block}  為什麼而不是inline，以為導航名之間要設定內邊距，效果更好看

2、盒子模型對行內元素不起作用

總結：先判斷元素是行內元素還是塊元素，要使它起作用是否要使它變為行內元素還是塊元素

常見的網頁佈局  上為導航，中為內容，下為版權

  上下結構

  上中下結構

  上左右下結構：1-2-1結構          內容分左右部分

  上左中右下結構：1-3-1結構

浮動 -float屬性(可以檢視京東導航條，列表項所在的div樣式)

  屬性值       說明

   left      元素向左浮動

   right     元素向右浮動

   none      預設值，元素不浮動

 當我讓元素浮動起來，停止浮動的條件：如果浮動元素遇到父容器的邊，它就會停止。遇到前一個浮動元素也會停止

clear屬性

  屬性值          說明

   left        在左側不允許浮動元素

   right       在右側不允許浮動元素

   both        在左右兩側不允許浮動元素

   none        預設值。允許浮動元素出現在兩側

一個div裡面有幾個div，父元素包含幾個子元素，如何讓父容器隨子元素的高度自適應？

因為浮動的原因，脫離了文件流，父元素起不了包裹的作用，而父容器還老實巴交在文件流待著，兩者的層級不一樣。

  方法一：在父容器中新增一個空的div。樣式為：clear：both，讓父元素和子元素拉到一個層級

  方法二：給父容器填加一個樣式。樣式為：overfloat：hidden；

兩種擴充套件盒子高度的區別

  使用overflow屬性擴充套件盒子高度減少程式碼量，也減少了空的HTML標籤，使程式碼更加簡潔，清晰，從而提高了程式碼的可讀性和網頁效能

  如果頁面中有定位元素，並且元素超出了父級的範圍，就必須使用clear屬性來清除浮動來擴充套件盒子高度

Overflow是對父容器的內容溢位了怎麼處理