第3章 可视化格式模型

一·盒模型

　　1 IE 和盒模型

　　　　IE早期版本包括IE6，在混杂模式下使用自己的非标准盒模型，其width属性不是内容的宽度，而是内容，内边距，和边框宽度的总和。因此，IE专有的盒模型使元素预期小。目前最好的解决方法是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素或子元素。其他方法见后。

　　2 外边距叠加

　　　　两个或多个垂直外边距相遇，将叠加形成一个外边框，高度等于两者中的较大者。

　　　　可以利用外边距使段落之间的空间保持一致。

　　　　只有在普通文档流中才会叠加，行内框，浮动，绝对定位框之间的外边距不叠加。

　　3 定位

　　　　CSS中3种基本定位机制：普通流，浮动，绝对定位

　　　　块级框

　　　　行内框：行内框的高度总是足以容纳它包含的所有行内框，因此，改变行内框尺寸的唯一方法是修改行高或水平边框，内边距或外边距。

　　　　css2.1的display:inline-block;属性可让元素像行内元素一样水平排列，但框的内容符合块级框的行为，例如可设置高度，宽度，垂直外边距和内边距。（Firefox3.0+,IE8+）

　　　　相对定位：相对于元素在文档流中的初始位置。无论是否移动，元素仍然占据原来空间，因此移动元素会导致它覆盖其他框。

　　　　绝对定位：先对于距离它最近的祖先元素，如果不存在则相对于初始包含块（可能是画布或html元素）。绝对定位脱离文档流，因此不占用空间，普通文档流中其他元素布局就好像该元素不存在一样。可以通过z-index属性来控制框的叠放次序，z-index值越大，框在栈中的位置越高。

　　　　父元素进行相对定位，子元素进行绝对定位。如果扩大绝对定位的框（如，通过则增加字号），周围的框不会重新定位，因此，尺寸的任何改变都会导致绝对定位的框产生重叠。（bug:在IE5.5和ie6中，如果相对与相对定位的框的右边或底部设置绝对定位的框，需要确保相对定位的框已经设置了尺寸。否则会错误的相对于画布定位。）

　　　　固定定位：（Ie6及更低版本不支持固定定位，IE7部分支持但实现中有许多bug,因此可以使用javascript实现此此效果）

　　　　浮动：浮动将脱离文档流。

　　　　　　　如果浮动元素的高度不同，那么在移动时可能被其他元素卡住。

　　　　行框和清理：创建浮动框可使文本围绕图片。

　　　　　　　clear:left,right,both,none;在清理元素时，浏览器在元素顶部添加足够的外边框是元素的顶部边缘垂直下降到浮动框下。因此对于元素的清理实际上是为元素留出了垂直空间。利用清除浮动可以解决前面垂直高度改变影响周围元素的问题。

　　　　　　　添加一个可以进行清理的空元素可以使容器元素包围浮动元素。也可以选择浮动div容器。

　　　　　　　

<style type="text/css">

.clear {
  clear: both;
}

.news {
  background-color:#eaeaea;
  border: solid 1px #999;
  width: 500px;
}

.news img {
  float: left;
}

.news p {
  float: right;
}
</style>
</head>

<body>


<div class="news">
<img src="img/atol.jpg" width="120" height="180" />
<p>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text  </p>
<div class="clear"></div>
</div>

 

　　　　　　overflow:auto,hidden会自动清理包含浮动的任何元素。这种方法在某些情况下会产生滚动条或截断内容。

　　　　　　在使用css方法：

　　　　　　

.clear :after{
     content:' . ';
     height:0;
     visibility:hidden;
     display:block;
     clear:both;          
}

 

　　　　　　

　　　　　　　　

　　　　　　　　　　

　　　　

　　　　

posted @ 2015-11-16 08:34  hou_hou  阅读(198)  评论(0)  编辑  收藏  举报