網頁的盒子模型是什麼？怎麼設定盒子樣式

冰山一樹Sankey發表於2022-03-11
網頁模型

歡迎大家去部落格冰山一樹Sankey，瀏覽效果更好。直接右上角搜尋該標題即可
冰山一樹Sankey

部落格園主頁：部落格園主頁-冰山一樹Sankey
CSDN主頁：CSDN主頁-冰山一樹Sankey

前端學習：學習地址：黑馬程式設計師pink老師前端入門教程，零基礎必看的h5(html5)+css3+移動，下面這些都是一些學習筆記。臨淵羨魚，不如退而結網！！願我自己學有所成，也願每個前端愛好者學有所成

一. CSS三大特性

  • 層疊性
  • 繼承性
  • 優先順序

具體可參考CSS 三大特性

二. 盒子模型

頁面佈局要學習三大核心, 盒子模型, 浮動 和 定位. 學習好盒子模型能非常好的幫助我們佈局頁面

2.1 看透網頁組成的本質

網頁佈局的核心本質： 就是利用 CSS 擺盒子。

image-20211103221231469

網頁佈局過程：

  1. 先準備好相關的網頁元素，網頁元素基本都是盒子 Box 。
  2. 利用 CSS 設定好盒子樣式，然後擺放到相應位置。
  3. 往盒子裡面裝內容.

2.2 盒子模型組成

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

image-20211103221413189

image-20211103221526831

2.3 邊框

image-20220308212530183

border可以設定元素的邊框。邊框有三部分組成:邊框寬度(粗細) 邊框樣式 邊框顏色

border : border-width || border-style || border-color
屬性 作用
border-width 定義邊框粗細,單位是px
border-style 邊框的樣式
border-color 邊框顏色

邊框樣式 border-style 可以設定如下值：

  • none：沒有邊框即忽略所有邊框的寬度（預設值）
  • solid：邊框為單實線(最為常用的)
  • dashed：邊框為虛線
  • dotted：邊框為點線

邊框簡寫：

border: 1px solid red; 沒有順序

邊框分開寫法：

border-top: 1px solid red; /* 只設定上邊框， 其餘同理 */

border-collapse 屬性控制瀏覽器繪製表格邊框的方式。它控制相鄰單元格的邊框。 語法：

border-collapse:collapse;
  • collapse 單詞是合併的意思
  • border-collapse: collapse; 表示相鄰邊框合併在一起

注意：邊框會額外增加盒子的實際大小。有兩種方案解決:

  1. 測量盒子大小的時候,不量邊框.
  2. 如果測量的時候包含了邊框,則需要 width/height 減去邊框寬度

2.4 內邊距

padding 屬性用於設定內邊距，即邊框與內容之間的距離。

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

padding 屬性（簡寫屬性）可以有一到四個值。

值的個數 表達意思
padding:5px; 1個值,代表上下左右都有5畫素內邊距;
padding:5px 10px; 2個值,代表上下內邊距是5畫素左右內邊距是10畫素;
padding:5px 10px 20px; 3個值,代表上內邊距5畫素左右內邊距10畫素下內邊距20畫素;
padding:5px 10px 20px 30px; 4個值,上是5畫素右10畫素下20畫素左是30畫素 順時針

注意：

當我們給盒子指定 padding 值之後：

  1. 內容和邊框有了距離，新增了內邊距。
  2. padding影響了盒子實際大小。
    也就是說，如果盒子已經有了寬度和高度，此時再指定內邊框，會撐大盒子。
  3. 如果盒子本身沒有指定width/height屬性, 則此時padding不會撐開盒子大小.
  4. 解決方案：
    如果保證盒子跟效果圖大小保持一致，則讓 width/height 減去多出來的內邊距大小即可。

案例

image-20211106223948645

image-20211106223958981

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新浪導航</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }
        .nav a {
            /* a屬於行內元素 此時必須要轉換 行內塊元素 */
            display: inline-block;
            height: 41px;
            padding: 0 20px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }
        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">新浪導航</a>
        <a href="#">手機新浪網</a>
        <a href="#">移動客戶端</a>
        <a href="#">微博</a>
        <a href="#">三個字</a>
    </div>
</body>
</html>

2.5 外邊距

margin 屬性用於設定外邊距，即控制盒子和盒子之間的距離。

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

2.6 塊盒子水平居中

外邊距可以讓塊級盒子水平居中，但是必須滿足兩個條件：

  • 盒子必須指定了寬度（width）。
  • 盒子左右的外邊距都設定為 auto 。
.header{
    width:960px;
    margin:0 auto;
}

常見的寫法，以下三種都可以：

  • margin-left: auto; margin-right: auto;
  • margin: auto;
  • margin: 0 auto;

注意：以上方法是讓塊級元素水平居中，行內元素或者行內塊元素水平居中給其父元素新增 text-align:center 即可。

2.7 外邊距合併

2.7.1 相鄰塊元素垂直外邊距的合併

當上下相鄰的兩個塊元素（兄弟關係）相遇時，如果上面的元素有下外邊距 margin-bottom，下面的元素有上外邊距 margin-top ，則他們之間的垂直間距不是 margin-bottom 與 margin-top 之和。取兩個值中的較大者這種現象被稱為相鄰塊元素垂直外邊距的合併。

image-20220308214158912

解決方案：儘量只給一個盒子新增 margin 值。

2.7.2 巢狀塊元素垂直外邊距的塌陷

對於兩個巢狀關係（父子關係）的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距值。

image-20220308214302061

解決方案：

  • 可以為父元素定義上邊框。
  • 可以為父元素定義上內邊距。
  • 可以為父元素新增 overflow:hidden。
  • 還有其他方法，比如浮動、固定，絕對定位的盒子不會有塌陷問題。後續會有講解
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>外邊距合併-巢狀塊級元素垂直外邊距塌陷</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
             /* 可修改margin-top值進行觀察 */
            margin-top: 150px;  
            /* border: 1px solid red; */
            /* border: 1px solid transparent; */
            /* padding: 1px; */
            overflow: hidden;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

2.7 清除內外邊距

網頁元素很多都帶有預設的內外邊距，而且不同瀏覽器預設的也不一致。因此我們在佈局前，首先要清除下網頁元素的內外邊距。

* {
 padding:0; /* 清除內邊距 */
 margin:0; /* 清除外邊距 */
 }

注意：行內元素為了照顧相容性，儘量只設定左右內外邊距，不要設定上下內外邊距。但是轉換為塊級和行內塊元素就可以了

2.8 綜合案例和總結

image-20211109214104936

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>綜合案例-產品模組</title>
    <style>
      * {
          margin: 0;
          padding: 0;
      }
      body {
          background-color: #f5f5f5;
      }
      a {
          color: #333;
          text-decoration: none;
      }
      .box {
          width: 298px;
          height: 415px;
          background-color:#fff;
          /* 讓塊級的盒子水平居中對齊 */
          margin: 100px auto;
      }
      .box img {
          /* 圖片的寬度和父親一樣寬 */
          width: 100%;
      }
      .review {
          height: 70px;
          font-size: 14px;
          /* 因為這個段落沒有 width屬性 所有 padding不會撐開盒子的寬度 */
          padding: 0 28px;
          margin-top: 30px;
      }
      .appraise {
          font-size: 12px;
          color: #b0b0b0;
          margin-top: 20px;
          padding: 0 28px;
      }
      .info {
          font-size: 14px;
          margin-top: 15px;
          padding: 0 28px;
      }
      .info h4 {
          display: inline-block;
          font-weight: 400;
        
      }
      .info span {
          color: #ff6700;    
      }
      .info em {
          font-style: normal;
          color: #ebe4e0;
          margin: 0 6px 0 15px;
      }
    </style>
</head>
<body>
    <div class="box">
        <img src="images/img.jpg" alt="">
        <p class="review">快遞牛，整體不錯藍芽可以說秒連。紅米給力</p>
        <div class="appraise">來自於 117384232 的評價</div>
        <div class="info">
               <h4> <a href="#">Redmi AirDots真無線藍...</a></h4>
               <em>|</em>
               <span> 99.9元</span>
        </div>
    </div>
</body>
</html>

一些問題：

  1. 佈局為啥用不同盒子,我只想用div？
    標籤都是有語義的, 合理的地方用合理的標籤。比如產品標題 就用 h, 大量文欄位落就用p
  2. 為啥用辣麼多類名？
    類名就是給每個盒子起了一個名字,可以更好的找到這個盒子, 選取盒子更容易,後期維護也方便。
  3. 到底用 margin 還是 padding？
    大部分情況兩個可以混用，兩者各有優缺點，但是根據實際情況，總是有更簡單的方法實現。
  4. 自己做沒有思路？
    佈局有很多種實現方式，同學們可以開始先模仿我的寫法，然後再做出自己的風格。
    最後同學們一定多運用輔助工具,比如螢幕畫筆,ps等等

三. 盒子其他樣式

3.1 圓角邊框

在 CSS3 中，新增了圓角邊框樣式。

border-radius 屬性用於設定元素的外邊框圓角。

border-radius:length;
  • 引數值可以為數值或百分比的形式
  • 如果是正方形，想要設定為一個圓，把數值修改為高度或者寬度的一半即可，或者直接寫為 50%
  • 該屬性是一個簡寫屬性，可以跟四個值，分別代表左上角、右上角、右下角、左下角
  • 也可以跟四個值，分別代表兩個對角線
  • 分開寫：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和
    border-bottom-left-radius
  • 相容性 ie9+ 瀏覽器支援, 但是不會影響頁面佈局,可以放心使用.

3.2 盒子陰影

CSS3 中新增了盒子陰影，我們可以使用 box-shadow 屬性為盒子新增陰影

box-shadow: h-shadow v-shadow blur spread color inset;
值 描述
h-shadow 必需。水平陰影的位置。允許負值。
v-shadow 必需。垂直陰影的位置。允許負值。
blur 可選。模糊距離。
spread 可選。陰影的尺寸。
color 可選。陰影的顏色。請參閱CSS顏色值。
inset 可選。將外部陰影(outset)改為內部陰影。

注意：

  1. 預設的是外陰影(outset), 但是不可以寫這個單詞,否則造成陰影無效
  2. 盒子陰影不佔用空間，不會影響其他盒子排列。

3.3 文字陰影

在 CSS3 中，我們可以使用 text-shadow 屬性將陰影應用於文字。
語法：

text-shadow: h-shadow v-shadow blur color;
值 描述
h-shadow 必需。水平陰影的位置。允許負值。
v-shadow 必需。垂直陰影的位置。允許負值。
blur 可選。模糊距離。
color 可選。陰影的顏色。請參閱CSS顏色值。

相關文章