CSS 盒子模型

阿新 • • 發佈：2018-12-29

gree 分享圖片圖片說明文本 spl pla 技術分享 mark 使用

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

下面的圖片說明了盒子模型(Box Model)：

技術分享圖片

不同部分的說明：

Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文本和圖像。

元素的寬度和高度

技術分享圖片 重要: 當您指定一個CSS元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，完全大小的元素，你還必須添加填充，邊框和邊距。.

下面的例子中的元素的總寬度為300px：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title>
<style>
div {
    background-color: lightgrey;
    width: 300px;
    border 
: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>

<h2>盒子模型演示</h2>

<p>CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。</p>

<div>這裏是盒子內的實際內容。有 25px 內間距，25px 外間距、25px 綠色邊框。</div>

</body>
</html>

View Code

技術分享圖片

讓我們自己算算：
300px (寬)
+ 50px (左 + 右填充)
+ 50px (左 + 右邊框)
+ 50px (左 + 右邊距)
= 450px

CSS 盒子模型

CSS盒子模型

ont asc pad 盒子模型 java box 其他 scrip script 標準W3C盒子模型的範圍包括 margin、border、padding、content，並且 content 部分不包含其他部分。 IE 盒子模型的範圍也包括 margin、border、

詳細認識一下CSS盒子模型

css 盒子模型定義CSS把每個元素看成是一個個單獨的框，這裏就叫它“元素框”吧。而CSS 盒子模型 (Box Model) 可以理解成一種規範，它規定了元素框處理其“最裏邊的內容區域（例如文本，圖像等）”、“內容周圍填充的區域”、“邊框” 和“邊界區域”的方式。PS: 為了方便區分概念，通常也會把

【輕松前端之旅】CSS盒子模型

webp 技術分享 activity 屬性概念 type title border eight 盒子模型，也叫框模型，在CSS裏是很重要的概念。每個元素都可以看做一個盒子。盒子包含四個部分：外邊距(margin)、邊框(border)、內邊距(padding)

html css`盒子模型

bottom right 上下 AC ext char 後代選擇器模型 -c 選擇器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

css盒子模型之邊框

oct document width itl bottom HA text 屬性顏色 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="

初識css盒子模型及外邊距

- 盒子的組成盒子由content（內容），padding（內邊距），border（邊距），margin（外邊距）組成。正文框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距預設是透明的，不會遮擋其後的任何元素。

html/css-css-盒子模型

1.盒子模型是什麼，又稱為框模型，裝html元素，設計html和實現佈局有四個邊：外邊距margin、邊框、內邊距padding、內容區大小：寬度和高度 div 所有元素都可以當作盒子模型元素佔頁面空間的大小；width+2*padding+2*border；heig

【CSS】css 盒子模型以及 box-sizing屬性

css 盒子模型以及 box-sizing屬性在標準的盒子模型下，css中 width，padding以及border的關係關於css中的width和padding以及border的關係。在css中，width和height指的是內容區域的寬度和高度，增加pad

CSS盒子模型及用法

模型中內容指什麼？ 1.當標籤不巢狀，例如： <div class=”dv1”>新聞</div> //”新聞”是內容, “新聞”是個文字 <div class=”dv2”>故事</div> //”

前端學習筆記day02 CSS盒子模型

1. 製作導航欄： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <

css盒子模型 - 初識CSS必會的盒子模型，非常詳細的講解，望幫助到初學者。

#初學CSS必須要會的盒子模型： ###首先，我先給你們介紹一下與盒子模型有關的CSS屬性。 ####1.margin：該屬性為外邊框，包含四個值：margin-top、margin-right、margin-bottom、margin-left. 分別為上、右、下、左外邊框。（要記住這個

11.29 CSS盒子模型

1.什麼是盒子模型所謂盒子模型，即是將網頁佈局中的元素（能設定寬高的元素）進行擬物化的比喻。一個盒子是由四個部分組成 ①　“內容–content”（盒子內的物件）、 ②　“內間距–padding”（物件和盒子的距離）、 ③　“邊框–border”（盒子壁）、 ④　“外間距–margin”

CSS盒子模型總結.md

在使用CSS進行網頁佈局時，我們一定離不開的一個東西————盒子模型。盒子模型，顧名思義，盒子就是用來裝東西的，它裝的東西就是HTML元素的內容。或者說，每一個可見的 HTML 元素都是一個盒子，下面所說的盒子都等同於 HTML 元素。這裡盒子與中的盒子又有點

CSS 盒子模型及 float 和 position

## CSS和模型 ##CSS盒模型本質上是一個盒子，封裝周圍的 HTML 元素，包括外邊距（marign），邊框（border），填充（padding），內容物（content）盒子模型的型別：W3C 標準和模型和 IE 盒模型（怪異盒模型） W3C 標準盒模型：屬性 width 和 height