盒子模型

原创 2013年12月06日 00:01:25

         盒子模型是使网页中各个元素能合理地进行组织的一套原则和规范。有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(固定定位):以浏览器窗口为基准定位,即拖动浏览器窗口滚动条是,依然保持对象位置不变。

  

相关文章推荐

盒子模型剖析

  • 2012年02月23日 09:07
  • 100KB
  • 下载

盒子模型.shs

  • 2013年07月19日 17:50
  • 1.27MB
  • 下载

计算盒子模型的尺寸、display属性、块级和内联元素、浮动、overfloat

计算盒子模型的尺寸  盒子实际高度=上下外边距+上下边框+上下内边距+内容高度  盒子实际宽度=左右外边距+左右边框+左右内边距+内容宽度 box-sizing属性  content-box   ...

css盒子模型

  • 2016年08月22日 15:40
  • 35KB
  • 下载

DIV布局十大技巧以及DIV盒子模型

  • 2010年07月05日 13:29
  • 166KB
  • 下载

html标签的盒子模型介绍

html标签的盒子模型介绍  盒子模型,这主要是针对像div等块标签而言,是拿生活中的实物形象比喻。    1.盒子模型        在html标签中div和div中的内容,可以比喻成生活中一个锦盒...
  • aozeahj
  • aozeahj
  • 2016年10月19日 00:42
  • 2219

css盒子模型

  • 2016年02月14日 17:43
  • 230KB
  • 下载

CSS盒子模型结构

  • 2013年06月30日 13:58
  • 14KB
  • 下载

使用flex box(弹性盒子模型)进行页面布局的注意事项

什么时候下使用flex比较方便?flexbox最主要的作用在于我们可以通过这个属性快速设置和操作它的子元素的布局,可以方便地实现居中、居左、居右、两边对齐、垂直居中、水平居中的效果; 一般如果遇到这...

CSS+DIV-盒子模型示例.zip

  • 2013年11月03日 17:17
  • 183KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:盒子模型
举报原因:
原因补充:

(最多只允许输入30个字)