盒模型与定位 博客分类： Css

 

 一直认为css很难掌握，所以一直有所畏惧， 不过最近由于工作上需要了解它，硬着头皮看了下，发现其实没有想象的难。 整理一下CSS中相对比较重要的 盒模型 与定位相关的比较。

 

  盒模型：

     每个元素类似于一个盒子， 由 内容，内边距、 边框、外边距 四个部分组成。

     其中，外边距是透明的，但是其也控制元素的大小。

     通过ff的firebug可以很清晰的看到某个元素的 盒模型是什么样子的， 类似于：

 

   可以很清楚的看到，它的盒模型。  其对应的css属性为:

				/*margin : 外边距*/
                                margin-bottom:8px;
				margin-left:0;
				margin-right:0;
				margin-top:6px;
				/*padding : 内边距*/
				padding-bottom:3px;
				padding-left:3px;
				padding-right:3px;
				padding-top:3px;

 

    其中，外边距有叠加的效果， 如果两个元素的外边距叠加在一起，则最终2个元素的外边距为外边距元素大的的那个外边距为准。（有点绕口)

 

再来看看定位：

   CSS中，元素划分主要分两类 ｛块元素、行内元素｝

   块元素是按照一个一个垂直排列的， 所以你会看到div等都是垂直换行排列的。

 

而主要的定位方式有：

   ｛普通流、浮动、绝对定位｝

 

看看相对定位：

   相对定位主要是相对于元素，原来定位的地方， 比如 没有定位之前：

   相对定位以后：

 

#div2{
	position:relative;
	top:20px;
	left:25px;
}

 

 

 绝对定位：

     绝对定位主要是相对于它距离最近的，并已定位好的祖先元素。

     因为绝对定位会脱离文档流，所以它会覆盖页面的其他元素。 z-inde可以控制框的叠放次序，值越大栈中位置越高。

   看看下面,没绝对定位之前的:

 

   绝对定位之后:   

      可以看到，div2在绝对定位以后，脱离了文档流， 独立于之前的文档元素了。

 

 浮动：

     元素可以左右浮动，直到碰到包含框和另外一个浮动对象为止.

     未浮动之前：

 

       把div1浮动到右边的效果如下：

 

另外一个需要记录的是，clear属性的使用。

 用图说话吧， 

 

.new{
				background-color:gray;
				border:solid 1px black;
			}
			.new img{
				float:left;
			}
			.new p{
				float:right;
			}

<div class="new">
			<img src="http://img03.taobaocdn.com/tps/i3/T1ogqgXfXeXXXXXXXX-168-42.png">
			<p>Some Text</p>
</div>

 

  效果：

  而我是希望，图片和文字都能被div给包含起来， 由于行框围绕在浮动框的外边，所有div在视觉上并没有包含图片和文本。 

 

  故而，需要做如下修改， 添加一个不用的元素， 设置clear属性，清除行框。

 

			.new{
				background-color:gray;
				border:solid 1px black;
			}
			.new img{
				float:left;
			}
			.new p{
				float:right;
			}
			.clear{
				clear:both;
			}

<div class="new">
			<img src="http://img03.taobaocdn.com/tps/i3/T1ogqgXfXeXXXXXXXX-168-42.png">
			<p>Some Text</p>
			<br class="clear">
</div>

 

  具体效果：