盒子模型

1. 盒子模型

元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是使用現實中盒子來做比喻，幫助我們設置元素對應的樣式

1. 內容區(content)

  • 存放element,box中設置的是內容區的寬高,背景顏色
    • width:100px
    • height:100px
    • background-color:red;

2. 內邊距(padding)

  • 內容區到盒子邊之間的距離
    • 內邊距會影響盒子的可見框的大小，元素的背景會延伸到內邊距
  • 盒子的大小由內容區 內邊距和邊框共同決定,
    • 盒子可見框的寬度 = border-left-width + padding-left + width + padding-right + border-right-width
    • 盒子可見框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
    • 盒子的寬度:width+ 左右兩邊邊框的寬度+左右兩邊的內邊距
    • 盒子的高度:height + 上下內邊距+向下邊框
  • padding-top:100px-----上內邊距
    • padding-top padding-right padding-left padding-bottom
  • padding:100px;-----四邊框都是100px
  • padding:100px,50px----上下 左右
  • padding:100px,20px,50px;

3. 邊框(border)

大部分的瀏覽器中，邊框的寬度和顏色都是有默認值，而邊框的樣式默認值都是none

1. 四邊都設置

  • width color style
    • border-width:10px(四個邊框相同)
    • border-width:10px,20px,30px,40px(上 右 下 左)
    • border-width:10px,20px,,40px(上 左右 下 )
    • border-width:10px,20px,,40px(上下 左右 )
      • color style 也適用這種方法
    • border-color:red
    • border-style:solid
      • color(黑色) style width(1) 如果不寫,會有默認值
      • 三個都不寫,沒有邊框

2. 指定方向設置樣式

  • color style width
    • top----上方向color style width
      • border-top-color:yellow----上邊框顏色
      • border-top-style:solid
        • dotted:點狀
        • solid:實線
        • double:雙線
        • dashed:虛線
      • border-top-width:100px

3. 簡寫

  • border:100px red solid;
    • 三個參數沒有順序,只能指定四個方向的邊框
    • 如果想單獨指定某個方向的邊框,可以先全部簡寫,在單獨為某一方向重新指定樣式
      • border:100px red solid;
      • border-left:10px red solid
      • border-right:10px red solid
      • border-top:10px red solid
      • border:100px red solid
      • border-right :none

4. 外邊距(margin)

1. 外邊距設置

  • 與另外一個盒子的距離
    • 影響位置
    • 擴大盒子的占地面積
  • margin-top;100px;
    • 上下 ,影響當前盒子的位置
    • 右下較小 ,變化微小,影像其他的盒子位置
    • 可以指定負值,向反方向移動
      • margin-left:-100px;
      • margin-top:-100px;
      • margin-bottom:-100px;
  • margin-left:auto----左右上外邊距自動設置到最大
    • 上下設置為:auto,則為最小:0
    • 左右都設為auto ,則為居中
      • margin-left:auto
      • margin-right:auto
      • margin:0 auto;

2. 外邊距的重疊

  • 外邊距重疊的條件:
    • 相鄰的元素
    • 垂直方向上的元素
      • 垂直方向上的外邊距是重疊的
        • 發生在兄弟元素中間,取兩者之間的最大值
        • 如果父子元素的垂直外邊距相鄰了，則子元素的外邊距會設置給父元素.如果想設置matgin,可以為父元素設置 border padding ,而達到效果
  • 解決方案:
    • 對父元素加:border,padding
    • 在父子之間插入其他元素

2.瀏覽器的默認樣式

瀏覽器為了在頁面中沒有樣式時，也可以有一個比較好的顯示效果，所以為很多的元素都設置了一些默認的margin和padding，而它的這些默認樣式，正常情況下我們是不需要使用的。

  • 清除瀏覽器的默認樣式
    *{
        margin:0;
        padding:0
    }

3. 內聯元素的盒模型

  • 不能設置寬高----width height
  • padding
    • 可以設置:padding: (上下左右都可以),但垂直方向上的padding,不影響布局,
  • border
    • border:1px blue solid
      • 左右可以,上下不影像布局
  • margin
    • margin:左右可以使用,
      • 水平方向上的外邊距求和,垂直方向上不支持外邊距

4. display 與 visibility

display可以將內聯元素變成塊元素

  • display:block;
    • inline---內聯元素
    • block:塊
    • inline-block:行內塊元素----同時具有行內元素 塊元素的特點,如<img>
    • none:不顯示元素，并且元素不會在頁面中繼續占有位置
  • visibility----設置元素的隱藏和顯示狀態
    • 可選值:
      • visible---默認值,顯示元素
      • hidden----元素會隱藏不顯示,但是位置依然保持
  • display visibility隱藏的區別:
    • display:不會在頁面中顯示,也不占位置
    • visibility:不會在頁面中顯示,但是會占位置

5. overflow

  • 理論上說,子元素大小最大是父元素的內容區大小若超出,超出部分則會在外面顯示,稱為溢出的內容
  • 處理溢出內容:overflow
    • overflow:visable-----顯示,默認,不處理,會在父元素以為的位置顯示
    • overflow:hidden----溢出內容會被修剪,不會顯示
    • overflow:scroll----水平 垂直方向出現滾動條,可拉動顯示內容;不管有沒有溢出,滾動條都在
    • overflow:auto----根據需求自動添加滾動條,

6. 文檔流

文檔流處在網頁的最底層，它表示的是一個頁面中的位置，我們所創建的元素默認都處在文檔流中.

  • 塊元素在文檔流中的特點
    • 獨占一行,塊元素會自上向下排列
    • 塊元素在文檔流中默認寬度是父元素的100%
      • 如果父元素沒有設置,則是瀏覽器的默認寬度,指定內邊距,不會影響寬度的大小
    • 塊元素在文檔流中的高度默認被內容撐開,高度是子元素的高度
  • 內聯元素
    • 只占自身的大小，會默認從左向右排列，如果一行中不足以容納所有的內聯元素，則換到下一行，繼續自左向右。
    • 在文檔流中，內聯元素的寬度和高度默認都被內容撐開
  • 當元素的寬度的值為auto時，此時指定內邊距不會影響可見框的大小，而是會自動修改寬度，以適應內邊距.

7. 浮動

  • 正常情況下,塊元素 獨占一行,垂直排列,如果想要塊元素水平排序,有以下方法:

  • 塊元素水平排列:

    1. display:inline-block;---設為行內塊
      • 塊元素一行排列,但中間有縫隙
        • 解決方法:將div代碼寫在一行
        • 若不寫一行,會有縫隙
    2. 脫離文檔流-----float,浮動不出父元素的范圍,盡量的向右向上,向左向上,直到遇到父元素的邊框或者其他的浮動元素
      • 可選值float:none
        • :none,不浮動
        • left: --會把文檔流中的覆蓋
        • right:--最右側
      • 設置浮動之后,不占原來的位置,其他的元素會補上
      • 如果浮動元素上邊是一個沒有浮動的塊元素，則浮動元素不會超過塊元素

  • 浮動停止:

    • 遇到父元素,停止
    • 遇到其他的浮動元素也會停止.

  • 浮動特點:

    • 浮動的元素上面是一個文檔流元素,浮動的元素不會超過上一個范圍
      • 浮動右上,可以調整代碼位置位置
    • 如果一行放不下文檔流 浮動元素 ,在右的浮動元素,會向下移動
      • 浮動的元素不會超過相鄰的兄弟
        • 想要超過,可以交換位置

8. 文字饒圖

浮動的元素不會蓋住文字，文字會自動環繞在浮動元素的周圍，所以我們可以通過浮動來設置文字環繞圖片的效果
塊浮動,段落文字圍繞

  • float:left

9. 內聯元素的浮動

  • 塊元素拖地文檔流之后,寬度和高度都被內容撐開
  • 高寬不設置
    • 不浮動時,寬度是父元素的寬度
    • 浮動時,高寬是內容的大小
  • 脫離文檔流后,變成塊元素,寬高生效

10. 高度塌陷

  • 高度塌陷
    父元素的高度由子元素撐開,若子元素浮動,脫離父元素,父元素高度為0.這種現象就是高度塌陷,

    • 父元素高度塌陷,父元素下的所有元素都會向上移動,導致頁面布局混亂

  • 處理高度塌陷:

    1. 設置父元素的高度,但不能適應子元素的變化
    2. 開啟BFC[Block Formatting Context（塊的格式化環境）],元素的特點:
      • 父元素的垂直外邊距不會和子元素發生重疊
      • 開啟BFC不會被浮動元素所覆蓋,會在浮動元素的右側
      • 開啟BFC的元素,可以包含浮動的子元素
      • 開啟BFC
        • 開啟元素浮動--直接開啟,但會導致父元素的寬度丟失,導致布局混亂
        • 設置元素決定定位----布局混亂
        • 設置元素為:inline-block----導致寬度丟失,不改變布局
        • 將元素的overflow設置為一個非visible的值,即hidden(副作用最小) scroll auto
    • IE6一下的解決方法
      • 開啟haslayout,副作用最小的一種方法:
        • zoom:1;----不放大,相當于開啟BFC
        • 設置寬度 ,相當于開啟haslayout
    1. 空白div
    • 可以直接在高度塌陷的父元素的最后，添加一個空白的div，由于這個div并沒有浮動，所以他是可以撐開父元素的高度的
    • 然后再對其進行清除浮動，這樣可以通過這個空白的div來撐開父元素的高度，基本沒有副作用
      • 使用這種方式雖然可以解決問題，但是會在頁面中添加多余的結構
    1. .after偽類 去除div的多余結構
      • 可以通過after偽類向元素的最后添加一個空白的塊元素，然后對其清除浮動，這樣做和添加一個div的原理一樣，可以達到一個相同的效果，而且不會在頁面中添加多余的div，這是我們最推薦使用的方式，幾乎沒有副作用
<style type="text/css">
    .box1{
        border: 1px solid red;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
    }
    .clearfix:after{
        /*添加一個內容*/
        content: "";
        /*轉換為一個塊元素*/
        display: block;
        /*清除兩側的浮動*/
        clear: both;
    }
    /*在IE6中不支持after偽類,所以在IE6中還需要使用hasLayout來處理*/
    .clearfix{
        zoom: 1;
    }
</style>

<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>

11. 清除浮動

我們有時希望清除掉其他元素浮動對當前元素產生的影響，這時可以使用clear來完成功能

  • clear可選值：

    • none，默認值，不清除浮動
    • left，清除左側浮動元素對當前元素的影響
    • right，清除右側浮動元素對當前元素的影響
    • both，清除兩側浮動元素對當前元素的影響,清除對他影響最大的那個元素的浮動

  • clear

    • clear:left
    • 在父元素中的最后一個子元素添加一個class= clear的div----多了一個div
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 什么是盒子？ CSS處理網頁時，它認為每個元素都包含在一 個不可見的盒子里。 我們只需要將相應的盒子擺放到網頁中相...
    咻咻咻滴趙大妞閱讀 937評論 0贊 0
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,784評論 1贊 92
  • 一個盒子我們會分成幾個部分：內邊區(content)內邊距(padding)邊框(border)外邊距(margi...
    Khada閱讀 252評論 0贊 0
  • 引言 這次給大家帶來了CSS－盒子模型部分的筆記，大家一同交流?? 認識盒子模型之前，先來了解一下CSS元素的分類吧...
    zhaolion閱讀 4,327評論 9贊 85
  • 丹楓初呈白露后， 青柑已掛綠枝頭。 最是一年好光景， 園丁從不識悲秋。 __白露當天讀悲秋詩有感
    珠江潮平閱讀 356評論 40贊 37