所有html元素可以看作盒子,在css中,"box model"這一術語是用來設計和布局時使用。
css盒模型本質上是乙個盒子,封裝周圍的html元素,它包括:邊距,邊框,填充,和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的說明了盒子模型(box model):
中的任意一屬性都可以單獨設定,
margin(外邊距) - 清除邊框外的區域,外邊距是透明的。
border(邊框) - 圍繞在內邊距和內容外的邊框。
padding(內邊距) - 清除內容周圍的區域,內邊距是透明的。
content(內容) - 盒子的內容,顯示文字和影象。
重要:當您指定乙個css元素的寬度和高度屬性時,你只是設定內容區域的寬度和高度。要知道,完全大小的元素,你還必須新增填充,邊框和邊距。
下面的例子中的元素的總寬度為300px:
>
>
charset
="utf-8"
>
>
菜鳥教程(runoob.com)title
>
自學html two 盒模型
一 盒模型的概念 html的布局類似盒子模型,直觀理解如下圖 簡單介紹 margin是相鄰div之間的間距,影響的是不同塊元素的之間的位置 border是div盒模型的盒邊框,分別有三個要素 邊框厚度反應的是邊框大小,邊框風格即邊框樣式 實線,虛線,點線等等 邊框顏色color padding內邊框...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子,父元素和子元素的關係就行大盒子裡放了個小盒子,兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...
CSS 盒模型和怪異盒模型
盒模型是css布局的基石,它規定了網頁元素如何顯示以及元素間相互關係,css定義所有元素都可以擁有像盒子一樣的外形和平面空間,即都包含內容區,補白 填充,內邊距 邊框,邊界 外邊距 下面說明了盒子模型 盒模型又分為標準盒模型 w3c標準 和怪異盒模型 ie盒模型 標準盒模型與ie盒模型的區別在於寬高...