Tags:web css

[TOC]

CSS 框模型

CSS 框模型概述

CSS 框模型

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

  #box {
    width: 70px;
    margin: 10px;
    padding: 5px;
  }

padding|margin 内|外边距

等内边距实例:

h1 {padding|margin: 10px;}

按照上、右、下、左的顺序分别设置各边的内边距:

h1 {padding|margin: 10px 0.25em 2ex 20%;}

外边距合并

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:

CSS 外边距合并实例 1

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

CSS 外边距合并实例 2

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

CSS 外边距合并实例 3

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

CSS 外边距合并实例 4

CSS 外边距合并的实际意义

border 边框

在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创> 建出效果出色的边框，并且可以应用于任何元素。
元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
每个边框有 3 个方面：宽度、样式，以及颜色。在下面的篇幅，我们会为您详细讲解这三个方面。

border

border 简写属性在一个声明设置所有的边框属性

可以按顺序设置如下属性：

• border-width
• border-style
• border-color

border-width 设置边框宽度

border-width:thin medium thick 10px;/*上右下左*/

border-style 设置边框的样式

 border-style:dotted solid double dashed;

border-color 设置边框颜色

border-color:red green blue pink;

CSS 定位

position: relative; 相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

如下图所示:

CSS 相对定位实例

注意! 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

position: absolute; 绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

如下图所示：

CSS 绝对定位实例

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

position: fixed; 浏览器窗口绝对定位

生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

z-index 用于将在一个元素放置于另一元素之后

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  } 

float 浮动

img
  {
  float:right;
  }

定义和用法:

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止

clear 规定元素的哪一侧不允许其他浮动元素

img
  {
  float:left;
  clear:both;
  }