Ⅰ 在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元素,它包括：边距,边框,填充,和实际内容。