盒模型

盒模型

CSS 盒模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框 和 外邊距 的方式

1.標(biāo)準(zhǔn)盒模型(瀏覽器默認(rèn))

1.1. 盒模型有哪些屬性構(gòu)成
11.png
盒子模型涉及到的四個(gè)區(qū)域,包含5個(gè)屬性

  1. width/height 內(nèi)容區(qū)域: 這兩個(gè)屬性決定元素內(nèi)容content區(qū)域的的大小

  2. padding 內(nèi)邊距:元素的內(nèi)容邊界到邊框之間的距離

  3. border 邊框:元素的邊框

  4. margin 外邊距: 邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會(huì)遮擋其后任何元素。

注意:

在 CSS 中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸

1.2 邊框 border
1.2.1 邊框三要素:

單樣式寫(xiě)法:

  1. 邊框大小(粗細(xì)) border-width

  2. 邊框樣式 border-style

  3. 邊框顏色 border-color

復(fù)合寫(xiě)法:

border :1px solid #000;

1.2.2 邊框的大小

大小 就是像素值 px

border-width: 20px

邊框大小可以繼續(xù)細(xì)分

因?yàn)楹凶佑兴膫€(gè)邊

  1. border-top-width: 10px;

  2. border-right-width: 10px;

  3. border-bottom-width: 10px;

  4. border-left-width: 10px;

1.2.3 邊框的樣式

border-style:solid;

邊框的樣式值:

  1. none 無(wú)邊框

  2. solid 實(shí)線

  3. dashed 虛線

  4. dotted 點(diǎn)狀線

  5. double 雙線

邊框樣式細(xì)分:

  1. border-top-style: solid;

  2. border-right-style: solid;

  3. border-bottom-style: solid;

  4. border-left-style: solid;

1.2.4 邊框顏色

  1. 十六進(jìn)制顏色值 #CC00FF

  2. 英文單詞: red blue

邊框顏色細(xì)分

  1. border-top-color: #000;

  2. border-right-color: #000;

  3. border-bottom-color: #000;

  4. border-left-color: #000;

1.2.5 單獨(dú)定義某條邊的綜合樣式

  1. border-top:1px solid #CC00FF;

  2. border-right:5px solid red;

  3. border-bottom:10px dotted #660033;

  4. border-left:15px double blue;

1.3. 內(nèi)邊距 padding

元素內(nèi)容到邊框之間的距離

1.3.1 內(nèi)邊距的復(fù)合樣式(可以設(shè)置4個(gè)值)
padding:10px 20px 30px 40px;
1.3.2 內(nèi)邊距復(fù)合樣式不同值

padding:; 可以設(shè)置多個(gè)值

  1. 四個(gè)值

    padding:上 右 下 左;

  2. 三個(gè)值

    padding: 上 左右 下;

  3. 兩個(gè)值

    padding: 上下 左右;

  4. 一個(gè)值

    padding: 上下左右;

注意: 內(nèi)邊距不允許使用負(fù)值

1.3.3 內(nèi)邊距單樣式

  1. padding-top 上面(頂部)內(nèi)邊距

  2. padding-right 右邊內(nèi)邊距

  3. padding-bottom 下面(底部)內(nèi)邊距

  4. padding-left 左邊內(nèi)邊距

1.4. 外邊距 margin

margin 元素邊框外,元素與元素 或元素與瀏覽器之間的距離

1.4.1 外邊距復(fù)合樣式
margin:10px 20px 30px 40px;
1.4.2 外邊距復(fù)合樣式的不同值

margin:; 可以設(shè)置多個(gè)值

  1. 四個(gè)值

    margin:上 右 下 左;

  2. 三個(gè)值

    margin: 上 左右 下;

  3. 兩個(gè)值

    margin: 上下 左右;

  4. 一個(gè)值

    margin: 上下左右;

1.4.3 外邊距單樣式

  1. margin-top 上面(頂部)外邊距

  2. margin-right 右邊外邊距

  3. margin-bottom 下面(底部)外邊距

  4. margin-left 左邊外邊距

1.5. 決定盒模型的類型
<style>
    div{
        box-sizing:content-box;/*標(biāo)準(zhǔn)盒模型  盒子的寬度高度是給content設(shè)置的*/
    }
</style>

2. 怪異盒模型

怪異盒模型需要手動(dòng)設(shè)置屬性

box-sizing:border-box;
22.png
2.1. 怪異盒模型的原理

  1. width/height padding * 2 + border * 2 + content(內(nèi)容大小)

  2. padding 內(nèi)邊距:元素的內(nèi)容邊界到邊框之間的距離

  3. border 邊框:元素的邊框

  4. margin 外邊距: 邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會(huì)遮擋其后任何元素。

2.2. 怪異盒模型和標(biāo)準(zhǔn)盒模型的對(duì)比
2.2.1 所設(shè)置的width/height 值作用的區(qū)域不同

  1. 標(biāo)準(zhǔn)盒模型

    width/height 是作用在content區(qū)域內(nèi)

  2. 怪異盒模型

    width/height 是作用在content區(qū)域+padding區(qū)域+border區(qū)域

2.2.2 盒子的大小計(jì)算不同

  1. 標(biāo)準(zhǔn)盒模型

    盒子的占位 = width + padding(左右) + border(左右) + margin(左右)

    盒子的占位 = height+ padding(上下) + border上下) + margin(上下)

    盒子的寬度= width + padding(左右) + border(左右)

    盒子的高度= height+ padding(上下) + border上下)

  2. 怪異盒模型

    盒子的占位 = width + margin(左右)

    盒子的占位 = height+ margin(上下)

    盒子的寬度 = width

    盒子的高度 = height

3.外邊距合并

3.1. 同級(jí)元素發(fā)生外邊距合并

當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。請(qǐng)看下圖:

33.png
3.2. 父子級(jí)之間發(fā)生外邊距合并

當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒(méi)有內(nèi)邊距或邊框把外邊距分隔開(kāi)），它們的上和/或下外邊距也會(huì)發(fā)生合并。請(qǐng)看下圖：

44.png
3.3. 外邊距并的規(guī)則
  1. 正正取最大值 =====> 50 60 取60 . 正負(fù)值相加 =====> 50 -60 取-10 . 負(fù)負(fù)取最負(fù) =====> -50 -60 取-60
3.4. 外邊距合并的解決辦法

  1. 同級(jí)元素給第二個(gè)元素浮動(dòng),添加絕對(duì)定位,單獨(dú)設(shè)置某一個(gè)元素inline-block

  2. 父子級(jí)元素外邊距合并解決辦法

    • 給父級(jí)設(shè)置內(nèi)邊距代替子級(jí)的外邊距 記住

    • 給父級(jí)加邊框

    • 給父級(jí)overflow:hidden;

    • 設(shè)置絕對(duì)定位

記住所有的外邊距的觸發(fā)都是在垂直方向上

必須是在普通文檔流的塊級(jí)元素才會(huì)觸發(fā)外邊距合并,這是大前提!!!

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .wrap {
      height: 100px;
      ;
      background-color: #ccc;
      margin-top: 100px;
    }

    .box {}

    .item {
      float: left;
      width: 25%;
      box-sizing: border-box;
      background-color: pink;
      padding: 10px;
    }

    .item div {
      height: 100%;
      line-height: 50px;
      background-color: #fff;
    }
  </style>
</head>

<body>
  <!-- /*box-sizing:border-box;怪異盒模型根據(jù)屏幕寬度實(shí)現(xiàn)盒子之間間距不變，改變內(nèi)容區(qū)大小*/ -->
  <div class="wrap">
    <div class="box">
      <div class="item">
        <div>盒子一</div>
      </div>
      <div class="item">
        <div>盒子一</div>
      </div>
      <div class="item">
        <div>盒子一</div>
      </div>
      <div class="item">
        <div>盒子一</div>
      </div>

    </div>
    <div class="box">
      <div class="item">
        <div>盒子二</div>
      </div>
      <div class="item">
        <div>盒子二</div>
      </div>
      <div class="item">
        <div>盒子二</div>
      </div>
      <div class="item">
        <div>盒子二</div>
      </div>
    </div>
  </div>
</body>

</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容