浮动 定位 盒模型

标签：

1 outline属性不同于border属性，它绘制于元素框之上，但他不会占据空间。

p{
  outline:#00ff00 solid thick  
}

p{
  border:1px solid #00ff00  
}

2 盒模型表示一个元素所要占据的空间大小，其中元素的内容，内边距，边框粗细，外边距一起决定了她所占据的空间大小。但是我们一般设置的width和height指的是内容区域的宽度和高度。但是其中当我们为一个元素添加背景的时候，背景会应用于由内容和内边距组成的区域。

3 只有普通文档流中块框的垂直外边距才会发生外边距叠加，行内框 浮动框 和绝对定位框之间的外边距不会叠加。

比如说<p></p>当它里面没内容时，即内容区域为0，不占空间，它的内边距默认也为0，那么给他加背景也不会有任何效果，把它放在任何两端有内容的<p></p>之间，两段段落之间的距离是它们中最大的外边距，这就是外边距叠加。

4 相对定位和绝对定位。

绝对定位中：left：20px；相对于距离它最近的已定位的祖先元素相对于他的左边右移20px

                top：20px；相对于距离它最近的已定位的祖先元素相对于他的上边下移20px

                bottom：20px；相对于距离它最近的已定位的祖先元素相对于他的下边上移20px

　　　　　　right：20px；相对于距离它最近的已定位的祖先元素相对于他的右边左移20px

5 固定定位：使某个标签在页面滚动时一直出现在屏幕上的固定位置。（这里他所固定的对像是可视窗口而并非是body或是父级元素）（不考虑IE6）

    #bottom{
        position:fixed;
        bottom:0;
        right:20px;
    }

<div id="bottom">联系方式：15262760111</div>

6 行框和清理  float和clear

浮动 定位 盒模型

标签：

原文地址：http://www.cnblogs.com/mingbao/p/4521839.html