Ⅰ 在html5中哪些元素具有盒子模型
所謂盒子模型就是，在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部分可以顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一起構成了css中元素的盒模型。
內容（CONTENT）就是盒子里裝的東西；
而填充(PADDING)就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；
邊框(BORDER)就是盒子本身了；至於邊界(MARGIN)則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出。在網頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現實生活中盒子不同的是，現實生活中的東西一般不能大於盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，裡面的東西大過盒子本身最多把它撐大，但它不會損壞的。
填充只有寬度屬性，可以理解為生活中盒子每個HTML標記都可看作一個盒子；
Ⅱ 網頁設計css盒子模型代碼
CSS盒子模型
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型(Box Model)：
不同部分的說明：
Margin(外邊距)- 清除邊框外的區域，外邊距是透明的。
Border(邊框)- 圍繞在內邊距和內容外的邊框。
Padding(內邊距)- 清除內容周圍的區域，內邊距是透明的。
Content(內容)- 盒子的內容，顯示文本和圖像。
為了正確設置元素在所有瀏覽器中的寬度和高度，你需要知道的盒模型是如何工作的。
元素的寬度和高度
重要:當您指定一個 CSS 元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，完整大小的元素，你還必須添加內邊距，邊框和邊距。
下面的例子中的元素的總寬度為300px：
實例
div {
width: 300px; border: 25px solid green; padding: 25px; margin: 25px;}
嘗試一下 »
讓我們自己算算：
300px (寬)
+ 50px (左 + 右填充)
+ 50px (左 + 右邊框)
+ 50px (左 + 右邊距)
= 450px
試想一下，你只有250像素的空間。讓我們設置總寬度為250像素的元素:
實例
div {
width: 220px; padding: 10px; border: 5px solid gray; margin: 0;
}
嘗試一下 »
最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
瀏覽器的兼容性問題
一旦為頁面設置了恰當的 DTD，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現卻是不正確的。根據 W3C 的規范，元素內容占據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標准模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
雖然有方法解決這個問題。但是目前最好的解決方案是迴避這個問題。也就是，不要給元素添加具有指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持設置填充的寬度和邊框的寬度屬性。
解決IE8及更早版本不兼容問題可以在HTML頁面聲明 <!DOCTYPE html>即可。
Ⅲ 如何在做好的網頁中添加盒子模型
display：flex
單詞拼的可能不對，大概個意思有這個標識的就是盒子模型，建議你看下flex 的資料
Ⅳ 旅遊為主題的網頁，10個頁面，鏈接深度3層，用盒子模型css排版，圖文混排
在使用CSS進行網頁布局時,我們一定離不開的一個東西...css 盒子模型理解 閱讀數 10 盒子模型是html+css...理解了這個重要的概念才能更好的排版,進行...
Ⅳ 關於html的盒子模型，要求只用一對<div>做一個紅色邊框的空盒子，求相關代碼！
<style type="text/css">
#testDIV{
width: 80px;
height: 80px;
background-color: yellow;
border:5px solid red;
padding:5px 10px 5px 10px;
}
</style>
</head>
<body>
<div id="testDIV">sdf</div>
Ⅵ 求一個div+css盒子模型，普通模板樣本
代碼可直接運行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/dialog.js" language="JavaScript" type="text/javascript"></script>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
div,img,a,body,ul,li,span,p{margin:0;padding:0;}
.clear{clear:both;}
.ban{
width:960px;
height:40px;
background-color:red;
border:1px blue solid;
margin:10px 0;
padding:10px 10px;
/*ban的實際高度是height的40+border的2（上下各1px）+padding的20（上下各10px）=62px；寬度同樣 */
}
.menu{
width:960px;
height:40px;
background-color:blue;
border:1px red solid;
margin:20px 0;
padding:10px 10px;
}
/*ban與menu之間的上下邊距本應是10+20=30，但是因為瀏覽器的margin的上下邊距bug，因而兩者之間的值取其中的較大值，因而為20 */
.left{
width:150px;
height:38px;
background-color:blue;
border:1px red solid;
margin:20px 10px 10px 0;
padding:10px 10px;
float:left;
}
.main{
width:558px;
height:38px;
background-color:#000;
border:1px red solid;
margin:20px 10px 10px 0;
padding:10px 10px;
float:left;
}
.right{
width:150px;
height:38px;
background-color:blue;
border:1px red solid;
margin:20px 0 10px 10px;
padding:10px 10px;
float:right;
}
/*menu與left，right，main之間的上下邊距本應遵從上邊的margin原則為20px，但是因為為left，right，main設置了浮動，所以margin的bug不起作用，為40px*/
</style>
</head>
<body>
<div style="margin:0 auto;width:982px;">
<div class="ban"></div>
<div class="menu"></div>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
<div class="foot"></div>
</div>
</body>
</html>
Ⅶ 什麼是css盒子模式（框模型）
不用表格來做網頁布局，通過由CSS定義的大小不一的盒子和盒子嵌套來編排網頁。用這種方式排版的網頁代碼簡潔，更新方便，能兼容更多的瀏覽器。可以在盒子里添加你所需要加的內容
Ⅷ 網頁中DIV+CSS盒模型是怎麼組成的
css盒模型是重點。如果您會用表格布局的話，就非常好理解和掌握了。這里的盒模型是和table布局的一個不同點。學 習web標准，首先要弄懂的就是這個盒模型，這就是DIV排版的核心所在。傳統的表格排版是通過大小不一的表格和表格嵌套來定位排版網頁內容，改用CSS 排版後，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網頁。這種排版方式的網頁代碼簡潔，表現和內容相分離，維護方便，能兼容更多的瀏覽器，比如PDA設備也能正常瀏覽。
那麼它為什麼叫盒子呢？先說說我們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模式都具備這些屬性。
我們可以把它想像成現實中上方開口的盒子，然後從正上往下俯視，邊框相當於盒子的厚度，內容相對於盒子中所裝物體的空間，而填充呢，相當於為防震而在盒子內填充的泡沫，邊界呢相當於在這個盒子周圍要留出一定的空間，方便取出。是不是這樣就很容易理解盒模型了。
所以整個盒模型在頁面中所佔的寬度是由左邊界+左邊框+左填充+內容+右填充+右邊框+右邊界組成，而css樣式中weight所定義的寬度僅僅是內容部分的寬度，這是許多朋友容易搞混的地方
這里的邊界我們也稱之為：外邊距、外補丁；填充也叫：內邊距、內補丁。
Ⅸ frameset和盒子模型如何創建簡易網站
按步驟操作。
1、首先劃分好區域,編寫一個html框架。
2、編寫css規則就可以在frameset和盒子模型創建簡易網站了。
3、frameset通過使用框架,你可以在同一個瀏覽器窗口中顯示不止一個頁面。
4、CSS盒模型本質上是一個盒子,用來封裝周圍的HTML元素,它包括：邊距,邊框,填充,和實際內容。