目录视图
摘要视图
订阅版权声明：本文为博主原创文章，未经博主允许不得转载。
盒子模型是使网页中各个元素能合理地进行组织的一套原则和规范。有content（内容）、border（边框）、padding（内边距）、margin（外边距）4个部分组成。一个盒子实际在页面上占据的空间由“内容+内边距+外边距+边框”组成。也不是用<div>定义的网页元素才是盒子，所有的网页元素都可以看做是盒子。
当连个元素是行内元素水平定位margin设置时，它们之间的距离是第一个元素的margin-right加上第二个元素的margin-left，若是垂直排列的块级元素，则margin的距离是两者制作较大的，这种现象称为margin的“塌陷”现象。
当块级元素的定位为嵌套关系（父子关系，即一个元素包含另一个元素）时，margin将以父块的内容为参考。
如下代码：
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
div.father{
background-color:#fffebb;
text-align:center;
font-family:Arial1, Helvetica, sans-serif;
font-size:20px;
padding:10px;
border:1px solid #000000;
}
div.son{
background-color:#a2d2ff;
margin-top:30px;
margin-bottom:0px;
padding:15px;
border:1px dashed #004993;
}
</style>
</HEAD>
<BODY>
<div class="father">
<div class="son">内容距离父div边框为10+30+15+1=56px</div>
</BODY>
</HTML>
运行效果如图：
可以看出外层盒子的宽度会自动延伸，直到浏览器边界为止，而里面嵌套的div宽度也会自动延伸，并以外面的内容部分为限。
当margin为负值时会使设为负值的块相反方向移动，甚至覆盖在一个块上。
盒子的定位：
盒子的定位有四中方式：
static（静态定位 ，是默认值） ：盒子以标准流方式布局
relative（相对定位）：盒子以标准流方式为基础，是盒子相对于原来的标准位置偏移指定距离。
absolute（绝对定位）：盒子的位置以它的包含框为基准偏移。
fixed（固定定位）：以浏览器窗口为基准定位，即拖动浏览器窗口滚动条是，依然保持对象位置不变。
- 顶
- 0
- 踩
- 0
- 上一篇内联及解决CSS冲突
- 下一篇table一些重要细节问题
查看评论
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
