盒子模型

盒子模型

1. 頁面佈局的三大核心，盒子模型，浮動和定位

2. 網頁佈局過程

   • 先準備好相關網頁元素，網頁元素基本都是盒子Box
   • 利用CSS設置好盒子樣式，而後放到相應位置
   • 往盒子裏面裝內容

3. 盒子模型的組成

   • 所謂盒子模型：就是把HTML頁面中的佈局元素看作是一個矩形的盒子，也就是 一個盛裝內容的容器，CSS盒子包括：邊框、外邊距、內邊距、和實際內容

     • border：邊框

       • 組成：邊框寬度、邊框樣式 、邊框顏色

       • border：border-width|border-style|border-color

         • 屬性	做用
           border-with	定義邊框粗細，單位是px
           border-style	邊框樣式：solid：實線邊框、dashed：虛線邊框、dotted：點線邊框
           border-color	邊框顏色

       • 邊框簡寫

       • border：1px solid red； #沒有順序

     • 表格邊框的粗細

       • border-collapse：collapse；

       • collapse：合併

       • border-collapse：collapse；表示相鄰邊框並在一塊兒

       • 【注意】

         • 邊框會額外增長盒子的實際 大小。兩種解決方案
           1. 測量盒子大小的時候不量邊框
           2. 若是測量的時候包含了邊框，則須要width\height減去邊框寬度

     • content：內容

     • padding：內邊距

       • 用於設置內邊距，即邊框與內容之間的距離

         • 屬性	做用
           padding-left	左內邊距
           padding-right	右內邊距
           padding-top	上內邊距
           padding-bottom	下內邊距

       • 簡寫

         • 值的個數	表達的意思
           padding：5px；	1個值，表明上下左右都有5像素內邊距
           padding：5px 10px；	2個值，表明上下5像素，左右10像素內邊距
           padding：5px 10px 20px；	3個值，表明上5像素，左右10像素內邊距，下內邊距20像素
           padding：5px 10px 20px 30px；	3個值，表明上5像素，左10像素右20像素內邊距，下內邊距30像素

       • 【注意】

         • 內容和邊框有了距離，添加了內邊距
         • padding影響了盒子的實際大小

     • margin：外邊距

       • 用於設置外邊距，即控制盒子與盒子之間的距離

         • 屬性	做用
           margin-left	左外邊距
           margin-right	右外邊距
           margin-bottom	下外邊距
           margin-top	上外邊距

       • 外邊距的典型應用：外邊距可讓塊級盒子水平居中，但須要知足兩個條件

         • 盒子必須指定寬度（width）
         • 盒子左右的外邊距都設置爲auto

       • 外邊距合併

         • 相鄰塊元素垂直外邊距的合併
           • 當上下相鄰的兩個塊元素相遇時，若是上面的元素有下邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，去兩個值中的較大者這種現象被稱爲相鄰塊元素垂直外邊距的合併
         • 解決方案
           • 儘可能只給一個盒子添加外邊距
         • 嵌套塊元素垂直外邊距的塌陷
           • 對於兩個嵌套關係（父子關係）的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距值
         • 解決方案
           • 能夠爲父元素定義上邊框
           • 能夠爲父元素定義上內邊距
           • 能夠爲父元素添加overflow：hidden；

       • 清除內外邊距

         • 網頁元素不少都帶有默認的內外邊距，並且不一樣的瀏覽器默認的也不一致，所以咱們在佈局前，首先要清除網頁元素的內外邊距

         • *{
               padding：0；
               margin：0；
           }

         • 【注意】行內元素爲照顧兼容性，儘可能只設置左右內外邊距，不要設置上下內外邊距。可是轉換爲快級和行內塊元素就能夠了