Css盒狀模型用於描述一個為HTML元素形成的矩形盒，盒狀模型為各個元素調整外邊距、邊框、內邊距和內容的具體操作。
二.例Css盒狀模型<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %><!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 runat="server"> <title>測試</title> <link href="css/tests.css" rel="stylesheet" type="text/css" /></head><body> <form id="form1" runat="server"> <div class="model"> 這是一個盒狀模型！ </div> <div class="model1"> 第二個盒狀模型 </div> <div class="model2"> 第三個盒狀模型 <div class="model3"> 內建 </div> </div> </form></body></html>
body { width:500px; height:300px; padding:200px 200px; margin:10px 10px; border:20px 20px;}.model{ margin:50px 150px; padding:100px 100px; width:600px; } .model1 { margin-left:150px; padding-left:150px; } .model2 { width:200px; height:50px; } .model3 { width:300px; height:100px; }
1. width 、height
width設定盒狀模型的內容的寬度，height設定盒狀模型中內容的高度。
如上述body盒狀模型內容的寬度為500px,高度為300px,內邊距為200px,邊框寬度為20px。
圖中900x700代表整個盒子的大小。900x700=(500+200X2)X(300+200X2),即盒子整體大小為內容所佔容量加上內邊距所佔的容量。由於width為500px,height為300px,所以如果在盒子中放內容的話，它只能佔500x300的大小，即內邊距占盒子的大小但不允許放內容。
2. 盒狀模型中套盒狀模型對於大盒子中的小盒子的定位問題，小盒子的外邊距的起始以大盒子的內容地區開始，所以小盒子的外邊距所佔地區加內邊距所佔地區加內容地區為大盒子的內容地區。
大盒子布局：
內建小盒子：
其中橘紅色為外邊距，淺綠色為內邊距局，藍色為內容地區，小盒子的外邊距+內邊距+內容地區=大盒子的內容地區（小盒子的內容地區為預設值時）。
對於小盒子設定內邊距來說，內邊距地區以小盒子的內容地區為基準即小盒子的內邊距地區隨小盒子的內容地區變化而變化。
而小盒子的外邊距以大盒子的內容地區為基準即外邊距地區隨大盒子的內容地區變化而變化。
3.大盒子內容地區大小與小盒子內容地區大小小盒子的內容地區不一定非比大盒子的內容地區的小，完全可以設定小盒子的內容地區比大盒子的內容地區大。當小盒子的內容地區比大盒子的內容地區大時，小盒子的外邊距此時仍舊隨大盒子的內容地區變化，此時小盒子的左邊距仍舊正確，右外邊距會向右擴充設定的大小即在大盒子的內容地區的基礎上向右擴充相應距離。
大盒子布局
小盒子布局：
其中大盒子的內容地區設定為500x300，小盒子內容地區為width=600,由於小盒子內容地區大小已經比大盒子的整個地區大，所以在外邊距上左外邊距設定正常，右邊距在大盒子的內容地區基礎上向右擴充150px。
三.背景設定如果給盒狀模型定義背景，定義後背景將在內容（content）地區和內邊距（padding）地區顯示，就是圖上的淺藍色地區，外邊框是無法設定背景的。四.總結
盒狀模型有內至外的順序是：
padding設定的是內容到邊框之間的距離，就像一個緩衝帶。 border設定內容的邊框線粗線和樣式等。 margin設定的是一塊內容與另一塊內容之間的距離。 使用css定義盒狀模型時，我們設定的寬度和高度，只是設定了內容（content）區塊的高度和寬度，而不是內容、內邊距、邊框和外邊距的總和。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
