CSS盒子（Box）模型入門

論您是CSS的新手還是經驗豐富的老手，了解和理解box模型都很重要。讓我們更好地了解它。

每個初學者都應該從基礎開始。以CSS為例，基礎是學習Box模型。在繼續學習其他CSS概念之前，您應該首先掌握它!

盒子（Box）模型是CSS的基本元素。

它確實會讓初學者感到困惑，所以現在是時候糾正錯誤了。在這里，您將了解box模型的所有基本元素以及它們是如何使用的。

在深入研究之前，每個人都需要了解web設計中的每個元素都是一個矩形框。您可能已經聽過很多次了，但是這是每個開發人員都應該注意的一個重要概念。

現在，讓我們來解釋一下神秘的盒子模型!

盒子模型結構

如上所述，box模型的結構包括：

Content (height and width).

Padding.

Border.

Margin.

這些是瀏覽器呈現框模型所需的所有元素。值得慶幸的是，有了CSS，我們可以單獨地控制它們。讓我們來看看。

在本文中，我們將使用以下代碼并逐漸添加到其中。

HTML

<div class="box">Lorem ipsum dolor amet whatever woke cronut, 
farm-to-table church-key tousled edison bulb. </div>

CSS

.box {
 background-color: hotpink;
 color: #fff;
}

The Content

Content非常清晰。它是具有特定寬度和高度的元素的內容。可以使用CSS屬性的高度和寬度設置固定的高度和寬度，也可以由內容本身決定。

現在，有一件事讓人有點困惑，那就是使用內聯或塊級元素。

使用內聯和塊級元素（Using Inline and Block Level Elements

）

為了刷新您的內存，內聯元素和塊元素之間的區別在于塊元素占用了容器寬度的100%，而內聯元素只占用了內容需要的空間量。

在使用內聯元素時，不可能為該元素設置固定的寬度或高度，因為元素沒有預先確定的寬度和高度(因為寬度和高度由內容決定)。這可以通過將元素轉換為塊元素來克服。

與內聯元素不同，使用塊級元素時，可以輕松地為其設置固定的寬度或高度。由于在默認情況下，塊級元素占容器寬度的100%，我們可以通過設置一個固定的寬度輕松覆蓋它。

您還可以將元素轉換為inline-block。當使用inline-block時，元素具有內聯元素的行為(只占用內容的空間)，但是您可以像使用塊元素那樣操作它。

現在，當我們有一個塊級元素時，我們可以給它一個寬度和高度。

CSS

.box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
}

結果如下圖：

The Padding

接下來，我們將在我們的框中添加一些填充。

padding定義了內容和框的邊緣之間的空間。

讓我們看看它在我們的例子中的作用

CSS

.box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
 padding: 10px;
}

結果如圖:

在圖像中，我們看到padding如何影響框的整體外觀。框的內容和四邊都有10px的空間。我們也可以向四面八方單獨添加padding,使用padding-top padding-bottom,padding-left padding-right。

The Border

因為我們是從內到外，下一步就是定義border。border圍繞著內容，您不必使用它，但它仍然存在。這意味著border的寬度為0。

現在我們添加一個邊框。

CSS

.box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
 padding: 10px;
 border: solid 3px black;
}

The Margin

框模型的最后一個方面是margin。正如你們所知道的，margin是border外的空間。它是元素之間的空間。

在實際示例中演示這一點的最佳方式是向您展示兩個元素是如何放置的，以及如何使用和不使用margin邊距。

HTML

<div class=”box”></div>
<div class=”box”></div>

CSS

.box {
 height: 200px;
 width: 200px;
 background-color: hotpink;
 color: #fff;
 padding: 10px;
 border: solid 3px black;
 margin: 0
}

在這個例子中，我們看到，沒有邊距，兩個元素是如何結合在一起的，它們之間沒有空間。

現在，添加margin

CSS

.box {
 margin: 20px;
}

現在,這看起來更好。我們在Box之間增加了一些空間。我們還可以使用margin - top、margin - bottom、margin - left或margin - right來單獨添加元素的每一側上的空間。

總結

恭喜，你終于完成了這篇文章!那么，我們學到了什么?

網頁上的每個元素基本上都是一個框。

box模型的方面是content, padding, border, and margin.。

使用內聯元素時，不能為該元素設置固定的寬度或高度，而使用塊和內聯塊元素則可以。

希望這能幫助你學到一些新的東西或者刷新你的記憶。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內邊框
        }
        /*給'注冊'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框寬度

        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框寬度
        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請注冊</h1>
<p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機號</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請輸入手機號" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗證碼</label>
    <input type="password" placeholder="請輸入驗證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協議<br>
    </div>
    <input type="submit" value="注冊" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述

)CSS 標準盒子模型(Box Model)

在網頁中所有HTML元素可以看作盒子,在CSS中,"box model"術語是用來設計和布局時使用的;CSS盒模型本質上是一個盒子,封裝周圍的HTML元素包括:外邊距(margin)邊框(border)內邊距(padding)實際內容(content)四個屬性,所以布局時每個元素所占的總寬高是這4個屬性的總和;比如寬度:總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

1.1Margin(外邊距)清除邊框外的區域,外邊距是透明的

1.2Border(邊框)圍繞在內邊距和內容外的邊框

1.3Padding(內邊距)清除內容周圍的區域,內邊距是透明的

1.4Content(內容)盒子里填充的內容比如文本,圖像等

標準盒子模型

寬度為100px的div

根據盒子模型得出該元素的總寬度為:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一個寬度為100px的元素,此元素的總寬度必須小于等于100px

2)DIV+CSS布局

Div+CSS布局就是將網頁內容用<div>分割為塊,之后使用css設置每個塊的大小,位置等

DIV+CSS布局最重要的是靈活運用float(浮動)屬性,其值:1)left 2)right 3)both

clear屬性作用是清除浮動,其值為:1)left 2)right 3)both

d2向右浮動 float:right

因為div是塊級元素,如果都沒有脫離文檔流div就會按照從上到下的順序放置

d2設置為右浮動其他兩個div位置的變化:

1)d1沒有脫離文檔流會占據一行,所以d2只能浮動到d1下面的右面如上圖所示

2)d2脫離文檔流,d3自動填充到d2的位置

d1,d2全部設置為右浮動

1)當d1,d2都設置為右浮動時:因為css中d1在d2上面先設置,因此d1在右側,如果d2在d1上面先設置樣式,則d2在右側,d1在左側,自己測試不再截圖

2)當d1,d2都設置為右浮動時:d3就會跑到上圖中d2的位置

3)如果3個div都設置左或右浮動,當3個width加一起<=100%就會在第一行顯示(d1,d2,d3)

 <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 50%;
      height: 100px;
    }
  </style>

d2清除左浮動,d3設置為右浮動

當d2清除了左浮動,d3設置為右浮動,就會如上圖所示;如果d2清除的是右浮動,d2就會在d1上面,d3就會定位在d1下面的右面,自己測試不再截圖

當d2清除了左浮動,如果想要d2緊挨著d1(與d1在一行上),可以通過position脫離文檔流設置其上下左右屬性使其定位在d1右側,自己測試

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>div+CSS布局</title>
  <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 30%;
      height: 100px;
      float:left; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 40%;
      height: 100px;
      clear: left;     
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 30%;
      height: 100px; 
      float: right; 
    }
  </style>
</head>
<body>
    <div id="d1"><span style="font-size: 50px;">d1</span></div>
    <div id="d2"><span style="font-size: 50px;">d2</span></div>
    <div id="d3"><span style="font-size: 50px;">d3</span></div>
  </body>
</html>

DIV+CSS布局綜合運用position+上下左右屬性與float屬性為網頁進行布局

注意:瀏覽器的兼容性問題,特別是使用IE內核的瀏覽器對W3C的規范不怎么遵守

在線咨詢

上一篇：編寫你的第一行 HTML 代碼，來幫助蝙蝠俠寫一封情書
下一篇：HTML常用代碼集合，背完這些基本可以自己做表白網頁了

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS盒子（Box）模型入門

您的項目需求