盒子模型

盒子模型

     今天遇到css中的盒子模型问题,因此研究了一下。

     盒子模型是相对于一个元素的,每个元素都有自己的盒子,可以设置margin,border,padding,content.

     从外到内一次是:margin,border,padding,content.

     设置高和宽是实际上是设置border的height和width属性。

     元素的宽度计算公式为:margin-left+border-left+padding-left+content+padding-right+border-right+margin-right;

     而且margin是相对于相邻元素的外边距。

     在嵌套相邻元素中,设置内层元素margin-top时不起作用,原来是没有激活外层元素的layout属性,即内层元素没有获得外层父级元素的layout属性。

     具体什么原因,还是不太明白,可以根据下面方法解决:

     为父级元素加上float,overflow,position,padding-top属性来激活layout属性渲染自己。

     盒子模型

     在没有激活父级元素layout属性的前提下,上面显示效果的代码如下:

<!DOCTYPE html>
<html>
<head>
<title>###</title>
<style type="text/css">

#outer{
   background-color:blue;
   width:150px;
   height:100px;
}
#inner{
   margin-left:20px ;
   margin-top:30px;
   padding-top:20px;
   background-color:red;
   width:100px;
   height:20px;

}
</style>
</head>
<body>
<div id="outer">
<p id="inner">生命的起源</p>
</div>

</body>
</html>

盒子模型

上面是激活父级元素的layout属性后的显示效果,比如在父级元素中加入overflow属性,代码如下:

<!DOCTYPE html>
<html>
<head>
<title>###</title>
<style type="text/css">

#outer{
   background-color:blue;
   overflow:hidden;
   width:150px;
   height:100px;
}
#inner{
   margin-left:20px ;
   margin-top:30px;
   padding-top:20px;
   background-color:red;
   width:100px;
   height:20px;

}
</style>
</head>
<body>
<div id="outer">
<p id="inner">生命的起源</p>
</div>

</body>
</html>

 

 

    

盒子模型

上一篇:IIS:连接数、并发连接数、最大并发工作线程数、应用程序池的队列长度、应用程序池的最大工作进程数详解


下一篇:Junit的简单使用