陈力：传智播客古代 珍宝币 泡泡龙游戏开发第十讲：深入理解盒子模型
2015-07-19 16:05
316 查看
陈力：传智播客古代 珍宝币 泡泡龙游戏开发第十讲：深入理解盒子模型
摘要：通过前节《第九讲：块元素、行内元素、标准流、盒子模型》学习了前节介绍了贵阳网站建设中的DIV+CSS中类选择器、id选择器和html选择器等内容。本章将PHP教程中HTML与div+CSS中盒子模型进行介绍,以方便贵阳网站建设人员在网站建设、网站优化以及软件设计中加深对PHP教程的了解。本节：陈力：传智播客古代 珍宝币 泡泡龙游戏开发第十讲：深入理解盒子模型
什么是DIV+SCC的盒子模型？
在贵阳网站建设中，经常看到一些概念：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。盒子模型是说我们可以将各种HTML标签都看成一个个的盒子，这些HTML标签可以发挥盒子的功能，将网页上的不同元素装入其中，就像是汉字、符号等等,这些元素都是在网站建设中经常用到的。除此之外，还能够嵌套另一个CSS盒子。一个盒子模型由内至外由content（内容），padding（填充），border(边框)，margin(边界)四部分组成，如图所示。
软件设计,贵阳网站建设
盒子模型在具体的页面中占据的宽度就是左边界+左边框+左填充+内容+右填充+右边框+右边界几部分共同构成的，但是在CSS中width所代表的宽度则没有这么的复杂，它只是代表了盒子中内容部分的宽度。
盒子模型呈现两种排列形态：块级元素和内联元素。块级元素可以通过height和width定义高度和宽度，默认占据一行，相当于在它之前和之后各插入了一个换行。内联元素显示的大小只根据它包含的内容来确定，定义它的height和width无效，内联元素后面没有换行符，允许其他内联元素与之同一行。可以用css的display：inline将块级元素转变为内联元素，也可以用display：block将内联元素转变为块元素。
我们可以把盒子模型转移到我们日常生活中的盒子(箱子)上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大,但它不会损坏的。
border可以控制几个选项，有border-left、border-top、border-bottom,border-right等等，可以分别控制边框的四边的颜色。比如bordre-bottom:1px solid blue;设置下边的颜色为红色。
在HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>贵阳网站建设——盒子模型案例</title>
<link rel="stylesheet" type="text/css" href="box1.css"/>
</head>
<body>
<div class="div1">
<img src="aa.bmp"/><br/>
<a href="#">点击信息</a>
</div>
</body>
</html>
CSS文件程序设计代码：
body{
border:1px solid red;/* 1px 表示边框的宽度 solid 实线 red 表示颜色*/
width: 500px;
height: 500px;
font-size:12px;
/*如果让body自动居中*/
margin:0 auto; /*第一个用于上－下，第二个用于左－右。auto表示自动居中*/
}
/*盒子模型的概念 : margin, padding, border content */
.div1{
width:65px;
height:72px;
border:1px solid blue;
/*border-bottom: 1px solid blue;*/
/* margin-top:5px;
margin-left:5px;*/
margin: 5px 0px 0px 5px;
/*padding-top:35px;*/
padding-left:5px;
}
.div1 img{
width:40px;
height:40px;
margin-top:5px;
margin-left:5px;
margin-bottom:5px;
}
超级链接已经被DIV包起来，因此不会显示在DIV外。通过 padding-left:5px;可以控制图片和超链接一起左移或者右移。
案例2：如图
软件设计,浮动,贵阳网站建设
这种布局在贵阳网站建设中经常用到，且很多大型网站上都有使用，可以设计成模式来套用,它的各个边距都可调节,从而达到网站建设的理想布局，是比较实用的。但是要做成这种效果，需要用到css另外一个核心知识-浮动。
网页默认的布局方式
文档流指文档中能够明确显示对象在排列时所占用的具体方位。文档流不但是盒子模式定位的基础所在，它也是HTML中默认的网页布局模式，在没有特殊要求的情况下，页面中的块状元素呈现自上而下的动态分布形式，内联元素则是按照从左到右的方式存在。如果我们想要改动某一汉字或是符号在网页中的具体方位，只能有一种方式
可以选择，就是通过操作网页结构中汉字或是符号的先后位置和分布位置来实现自己的目的和想法。
(1)浮动（float）
所谓浮动就是让设置的标签产生漂浮效果，脱离原来在页面本应出现的空间位置，不再占用任何文档流空间。元素设置为浮动以后，会生成一个块级元素，而不论它本
身是何种元素。且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。该属性值有inherit、none、left、right四种取值，其中none为默认值，也就是标准流通常的显示状态；inherit将会从祖先元素获取float值，left或right，表示当前标签会向其父容器标签的左侧或右侧靠拢。
(2)position 定位
页面布局使用最多的是相对定位（relative）和绝对定位（absolute）。
相对定位（relative）
这种定位方式下元素不脱离文档流，仍然保持其未定位前的形态并且保留它原来所占空间。偏移时以自身位置的左上角作为参照物，通过 left、top、right 和 bottom 四个方向的属性来定义偏移的位置。下面通过比较定位前和定位后的两种状态来分析相对定位的效果。
首先为未定位的效果，在页面添加三个 100*100 像素的div，如图 2-1 所示。现在对 box2 设置相对定位属性
#box2{background：#F36；height：100px；width：100px；position：relative；left：30px；top：50px；}
保存预览得如下效果，如图 2-2 所示。可见，box3 并没有上移，且 box2覆盖了box3部分内容。
绝对定位（absolute）
这种定位方式下元素将脱离文档流，不占据空间，文档流中的后续元素将填补它留下的空间。下面通过比较定位前和定位后的两种状态来分析绝对定位的效果。
在图2-1的基础上，对box2进行设置#box2{background：#F36；height：100px；width：100px；position：absolute；left：30px；top：50px；}
保存预览如图2-3所示。
从前后两种状态可以看出，绝对定位的 box2 脱离了文档流后根据当前父元素（页面的左上角）进行移位，原来排在下面的 box3 自动填补 box2 位移后留下的空间。需要注意的是绝对定位在选择参照物进行偏移时存在下列两种情况：1）如果不存在已定位的父元素，则以浏览器的页面框，即 body 元素为参照物。2）以最近的已定位的父元素作为参照物。将父元素设定为相对定位，则它包含子块的绝对定位偏移将以它为参照物。
HTML的程序
4000
设计源代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html><head><link rel="stylesheet" type="text/css" href="box2.css"/></head>
<body><!--div在布局起到一个控制整个内容显示的位置-->
<div class="div1"><!--ul在布局中作用是可以控制显示内容多少-->
<ul class="faceul">
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
</ul>
</div>
</body>
</html>
对应的CSS文件程序设计代码如下：
.div1{
width:500px;
height:300px;
border:1px solid gray;
margin-left:200px;
}
.faceul{
width:400px;
height:250px;
border:1px solid red;
padding-left:5px;
margin-left:10px;
}
.faceul li{
list-style-type:none;/*什么都不要，不显示圆点*/
float:left;/*左浮动*/
width:50px;
height:52px;
border:1px solid red;
margin-right:15px;/*li与li之间的边距*/
margin-top:15px;
}
.faceul li img{
margin-left:5px;
margin-top:5px;
width: 40px;
height:40px;
}
ul默认与边框之间有一定间隔。属于内边距。在.faceul中添加 padding-left:5px;可以取消内边距。
总结：本节介绍了“《一步一步跟我学PHP》第十讲：深入理解盒子模型”的相关知识，对DIV+SCC的盒子模型有一定了解，这对于在贵阳网站建设过程中的网页布局非常有用，也是网站优化和SEO优化必须掌握的相关知识。对盒子模型进行了简单介绍，并介绍了浮动、相对定位（relative）、绝对定位（absolute）等内容。希望这篇文章对于贵阳网站建设的朋友有一定的帮助。谢谢阅读！
【推荐阅读】
陈力：传智播客古代 珍宝币 泡泡龙游戏开发第十讲：深入理解盒子模型
摘要：通过前节《第九讲：块元素、行内元素、标准流、盒子模型》学习了前节介绍了贵阳网站建设中的DIV+CSS中类选择器、id选择器和html选择器等内容。本章将PHP教程中HTML与div+CSS中盒子模型进行介绍,以方便贵阳网站建设人员在网站建设、网站优化以及软件设计中加深对PHP教程的了解。本节：陈力：传智播客古代 珍宝币 泡泡龙游戏开发第十讲：深入理解盒子模型
什么是DIV+SCC的盒子模型？
在贵阳网站建设中，经常看到一些概念：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。盒子模型是说我们可以将各种HTML标签都看成一个个的盒子，这些HTML标签可以发挥盒子的功能，将网页上的不同元素装入其中，就像是汉字、符号等等,这些元素都是在网站建设中经常用到的。除此之外，还能够嵌套另一个CSS盒子。一个盒子模型由内至外由content（内容），padding（填充），border(边框)，margin(边界)四部分组成，如图所示。
软件设计,贵阳网站建设
盒子模型在具体的页面中占据的宽度就是左边界+左边框+左填充+内容+右填充+右边框+右边界几部分共同构成的，但是在CSS中width所代表的宽度则没有这么的复杂，它只是代表了盒子中内容部分的宽度。
盒子模型呈现两种排列形态：块级元素和内联元素。块级元素可以通过height和width定义高度和宽度，默认占据一行，相当于在它之前和之后各插入了一个换行。内联元素显示的大小只根据它包含的内容来确定，定义它的height和width无效，内联元素后面没有换行符，允许其他内联元素与之同一行。可以用css的display：inline将块级元素转变为内联元素，也可以用display：block将内联元素转变为块元素。
我们可以把盒子模型转移到我们日常生活中的盒子(箱子)上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大,但它不会损坏的。
border可以控制几个选项，有border-left、border-top、border-bottom,border-right等等，可以分别控制边框的四边的颜色。比如bordre-bottom:1px solid blue;设置下边的颜色为红色。
在HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>贵阳网站建设——盒子模型案例</title>
<link rel="stylesheet" type="text/css" href="box1.css"/>
</head>
<body>
<div class="div1">
<img src="aa.bmp"/><br/>
<a href="#">点击信息</a>
</div>
</body>
</html>
CSS文件程序设计代码：
body{
border:1px solid red;/* 1px 表示边框的宽度 solid 实线 red 表示颜色*/
width: 500px;
height: 500px;
font-size:12px;
/*如果让body自动居中*/
margin:0 auto; /*第一个用于上－下，第二个用于左－右。auto表示自动居中*/
}
/*盒子模型的概念 : margin, padding, border content */
.div1{
width:65px;
height:72px;
border:1px solid blue;
/*border-bottom: 1px solid blue;*/
/* margin-top:5px;
margin-left:5px;*/
margin: 5px 0px 0px 5px;
/*padding-top:35px;*/
padding-left:5px;
}
.div1 img{
width:40px;
height:40px;
margin-top:5px;
margin-left:5px;
margin-bottom:5px;
}
超级链接已经被DIV包起来，因此不会显示在DIV外。通过 padding-left:5px;可以控制图片和超链接一起左移或者右移。
案例2：如图
软件设计,浮动,贵阳网站建设
这种布局在贵阳网站建设中经常用到，且很多大型网站上都有使用，可以设计成模式来套用,它的各个边距都可调节,从而达到网站建设的理想布局，是比较实用的。但是要做成这种效果，需要用到css另外一个核心知识-浮动。
网页默认的布局方式
文档流指文档中能够明确显示对象在排列时所占用的具体方位。文档流不但是盒子模式定位的基础所在，它也是HTML中默认的网页布局模式，在没有特殊要求的情况下，页面中的块状元素呈现自上而下的动态分布形式，内联元素则是按照从左到右的方式存在。如果我们想要改动某一汉字或是符号在网页中的具体方位，只能有一种方式
可以选择，就是通过操作网页结构中汉字或是符号的先后位置和分布位置来实现自己的目的和想法。
(1)浮动（float）
所谓浮动就是让设置的标签产生漂浮效果，脱离原来在页面本应出现的空间位置，不再占用任何文档流空间。元素设置为浮动以后，会生成一个块级元素，而不论它本
身是何种元素。且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。该属性值有inherit、none、left、right四种取值，其中none为默认值，也就是标准流通常的显示状态；inherit将会从祖先元素获取float值，left或right，表示当前标签会向其父容器标签的左侧或右侧靠拢。
(2)position 定位
页面布局使用最多的是相对定位（relative）和绝对定位（absolute）。
相对定位（relative）
这种定位方式下元素不脱离文档流，仍然保持其未定位前的形态并且保留它原来所占空间。偏移时以自身位置的左上角作为参照物，通过 left、top、right 和 bottom 四个方向的属性来定义偏移的位置。下面通过比较定位前和定位后的两种状态来分析相对定位的效果。
首先为未定位的效果，在页面添加三个 100*100 像素的div，如图 2-1 所示。现在对 box2 设置相对定位属性
#box2{background：#F36；height：100px；width：100px；position：relative；left：30px；top：50px；}
保存预览得如下效果，如图 2-2 所示。可见，box3 并没有上移，且 box2覆盖了box3部分内容。
绝对定位（absolute）
这种定位方式下元素将脱离文档流，不占据空间，文档流中的后续元素将填补它留下的空间。下面通过比较定位前和定位后的两种状态来分析绝对定位的效果。
在图2-1的基础上，对box2进行设置#box2{background：#F36；height：100px；width：100px；position：absolute；left：30px；top：50px；}
保存预览如图2-3所示。
从前后两种状态可以看出，绝对定位的 box2 脱离了文档流后根据当前父元素（页面的左上角）进行移位，原来排在下面的 box3 自动填补 box2 位移后留下的空间。需要注意的是绝对定位在选择参照物进行偏移时存在下列两种情况：1）如果不存在已定位的父元素，则以浏览器的页面框，即 body 元素为参照物。2）以最近的已定位的父元素作为参照物。将父元素设定为相对定位，则它包含子块的绝对定位偏移将以它为参照物。
HTML的程序
4000
设计源代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html><head><link rel="stylesheet" type="text/css" href="box2.css"/></head>
<body><!--div在布局起到一个控制整个内容显示的位置-->
<div class="div1"><!--ul在布局中作用是可以控制显示内容多少-->
<ul class="faceul">
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
<li><img src="aa.bmp" /></li>
</ul>
</div>
</body>
</html>
对应的CSS文件程序设计代码如下：
.div1{
width:500px;
height:300px;
border:1px solid gray;
margin-left:200px;
}
.faceul{
width:400px;
height:250px;
border:1px solid red;
padding-left:5px;
margin-left:10px;
}
.faceul li{
list-style-type:none;/*什么都不要，不显示圆点*/
float:left;/*左浮动*/
width:50px;
height:52px;
border:1px solid red;
margin-right:15px;/*li与li之间的边距*/
margin-top:15px;
}
.faceul li img{
margin-left:5px;
margin-top:5px;
width: 40px;
height:40px;
}
ul默认与边框之间有一定间隔。属于内边距。在.faceul中添加 padding-left:5px;可以取消内边距。
总结：本节介绍了“《一步一步跟我学PHP》第十讲：深入理解盒子模型”的相关知识，对DIV+SCC的盒子模型有一定了解，这对于在贵阳网站建设过程中的网页布局非常有用，也是网站优化和SEO优化必须掌握的相关知识。对盒子模型进行了简单介绍，并介绍了浮动、相对定位（relative）、绝对定位（absolute）等内容。希望这篇文章对于贵阳网站建设的朋友有一定的帮助。谢谢阅读！
【推荐阅读】
陈力：传智播客古代 珍宝币 泡泡龙游戏开发第十讲：深入理解盒子模型
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- hadoop每个家庭成员
- java基础第八天
- 谷歌地图服务
- 关于嵌入式的基础知识归纳
- 数位dp
- java 实现单链表的逆序
- iOS SDK详解之UIScreen
- sys.default_constraints
- 如何快速成为javascript高手？
- 如何快速成为javascript高手？
- Lowest Common Ancestor of a Binary Tree
- （七十六）CoreLocation（二）获取经纬度、速度、方向，进行区域监听
- const变量探究
- （七十六）CoreLocation（二）获取经纬度、速度、方向，进行区域监听
- textfield 限制字数
- day07
- Android 实现滚动数字的TextView
- mysql循环批量插入测试数据
- 深度学习在图像识别中的应用--学习笔记5
- JS高级程序设计13-事件