05HTML5学习之页面布局

页面布局

1. 盒模型

     文档中的每一元素都被认为是一个矩形盒子。如下图所示，盒子是由内容区以及围绕着内容区的内边距、边框以及外边距组成。这就是所谓的盒模型。

   内容

     内容区由文本和其它诸如图像、段落、标题、列表之类的网页元素组成。页面上元素的可见宽度为内容、内边距和边框三者宽度的总和。当然，width属性仅设置了内容的实际宽度；它并不包括内边距、边框或外边框。

   内边距

     内边距（Padding）指内容和边框之间的区域。默认的内边距值为0。某个元素的背景属性对内边距与内容区域而言是一致的。我们使用padding属性来设置元素的内边距。

   边框

     边框是位于内边距与外边距之间的区域。默认的边框值为0，也即不显示边框。我们使用border属性来设置元素的边框。

   外边距

     外边距（Margin）是指元素和相邻元素之间的空白区域。

   Margin属性

     我们用margin属性来设置某个元素各个方向上的外边距。这一区域总是透明的，显示的是网页或父元素的背景色。对于网页文档以及特定的如段落、标题、表单等元素，浏览器自带默认的外边距值。指定margin属性就能覆盖默认值。   外边距的值是数值类型，单位为px或em。将其设置为0（无单位），外边距就消失了。设置为auto，将由浏览器计算决定外边距值。下标列出了配置外边距的各种CSS属性：

   属性	简介与常用值
   margin	配置元素周围外边距的简化写法 数字值（单位为px或em）或百分比；例如margin: 10px; 值为auto时浏览器自动计算元素的外边距, 两个数字值（单位为px或em）或百分比：第一个值指定顶底外边距，第二个值指定左右外边距。例如margin: 20px 10px; 三个数字值（单位为px或em）或百分比：第一个值指定顶部外边距，第二个值指定左右外边距，第三个值指定底部外边距。例如margin: 10px 20px 5px; 四个数字值（单位为px或em）或百分比时按一下顺序设置各外边距：顶部、右侧、底部、左侧。例如margin: 10px 30px 20px 5px;
   margin-bottom	底部外边距，数字值（单位为px或em）、百分比或auto
   margin-left	左侧外边距，数字值（单位为px或em）、百分比或auto
   margin-right	右侧外边距，数字值（单位为px或em）、百分比或auto
   margin-top	顶部外边距，数字值（