CSS 相关

CSS中的盒状模型（box model）用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距（margin）、边框（border）、内边距（padding）和内容的具体操作。下图显示了盒状模型的结构：

通过添加一些颜色及字体信息，该例可以有以下显示效果：

  

这个例子包含了两个元素：h1和p。这两个元素的盒状模型如下图所示：

尽管上图显得有点复杂，不过它展示了每个HTML元素是如何被盒子所围绕的。我们可以通过CSS来调整这些盒子。

 

为元素设置外边距

一个元素有上（top）、下（bottom）、左（left）、右（right）四个边。外边距（margin）表示从一个元素的边到相邻元素(或者文档边界)之间的距离。

在下面这个例子中，我们将了解如何为文档本身（即body元素）定义外边距。下图显示了我们对外边距的要求。

 

满足上述要求的CSS代码如下：

body {
margin-top:100px;
margin-right:40px;
margin-bottom:10px;
margin-left:70px;
}

或者你也可以采用一种较优雅的缩写形式：
body {
margin: 100px 40px 10px 70px;
}

为元素设置内边距

内边距（padding）也可以被理解成“填充物”。这样理解是合理的，因为内边距并不影响元素间的距离，它只定义元素的内容与元素边框之间的距离。

下面我们通过一个简单的例子来说明内边距的用法。

通过为标题设置内边距，你可以控制在标题文本周围填充多少空白：
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}

h2 {
background: orange;
padding-left:120px;
}

边框样式[border-style]

边框样式有多种可供选择。下图显示了8种不同样式的边框在Internet Explorer 5.5里的实际显示效果。在这个例子里，我们为这8种边框都选择了“金色（gold）”作为边框颜色、“厚(thick)”作为边框宽度。当然，这只是个例子，你可以为边框设置别的颜色和厚度。

如果你不想有任何边框，可以为它取值为“none”或者“hidden”。

一些示例

我们可以将上面三个有关边框的CSS属性组合起来使用，从而制造出多种多样的变化。来举个例子，我们要为一个文档中的h1、h2、ul和p等元素分别定义不同的边框。尽管其显示效果也许并不那么美观，但是它很好地向你展示了多种变化的可能：

h1 {
	border-width: thick;
	border-style: dotted;
	border-color:gold;
}

h2 {
	border-width: 20px;
	border-style: outset;
	border-color: red;
}

p {
	border-width: 1px;
	border-style: dashed;
	border-color: blue;
}

ul {
	border-width: thin;
	border-style: solid;
	border-color: orange;
}
我们也可以为上边框、下边框、右边框、左边框分别指定特定的CSS属性。具体做法如下例所示：
  
  

   
   

h1 {
	border-top-width: thick;
	border-top-style: solid;
	border-top-color: red;

	border-bottom-width: thick;
	border-bottom-style: solid;
	border-bottom-color: blue;

	border-right-width: thick;
	border-right-style: solid;
	border-right-color: green;

	border-left-width: thick;
	border-left-style: solid;
	border-left-color: orange;
}



   
   float:属性

  
  
　首先我们了解到，CSS网页布局的原理，就是按照HTML代码中对象声明的顺序，以流布局的方式来显示它，

而流布局就不得不说到float浮动技术，在HTML中的所有对象，默认分为两种：块元素(block element)、

内联元素(inline element)，虽然也存在着可变元素，但只是随上下文关系确定该元素是块元素或者内联元素。

关于块元素和内联元素可以参考这里。

　其实CSS的float属性，作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后，

它将不再独自占据一行。可以浮动到左侧或右侧，关于float属性的详细说明可以参考这里。