1. 程式人生 > >計算盒子模型的尺寸、display屬性、塊級和內聯元素、浮動、overfloat

計算盒子模型的尺寸、display屬性、塊級和內聯元素、浮動、overfloat

計算盒子模型的尺寸

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

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

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;   谷歌瀏覽器可以這樣寫,但其他瀏覽器要加字首

           padding20px

          }

          .class2{

           Padding20px

          }

          .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

的寬度:300+5*2+20*2=350px(乘以2是左右內邊距)

       若在樣式中再新增”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> 內容是多少,寬度就是多少,並不會獨佔一行

                                 設定寬高但不起作用,設定paddingmargin也不起作用

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

標準文件流的組成

 塊級元素

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

 內聯(行內)元素

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

display屬性

  控制元素的顯示和隱藏

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

      值            說明

     none    設定元素不會被顯示

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

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

     inline-block 行內塊元素         讓內聯元素擁有塊級元素的特點(寬高,paddingmargin的效果)

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

 Div,span{

      Width100px

      Height100px

      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。樣式為:clearboth,讓父元素和子元素拉到一個層級

  方法二:給父容器填加一個樣式。樣式為:overfloathidden

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

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

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


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





相關推薦

no