网页布局基础

1  CSS 规定的定位机制有三种，分别是

        标准文档流(Normal folw)

        浮动(Floats)

        绝对定位(Absolute positioning)

2 W3C标准：

由万维网制定的一系列标准，包括：

              结构化标准语言(HTML和XML)

              表现标准语言(CSS)

              行为标准语言(DOM和ECMAScript)

    倡导结构，样式，行为分离

3 标准文档流(Normal flow)

   特点：

    从上到下，从左到右，输出文档内容，由块级元素和行级元素组成

       (1) 块级元素

        特点：

           从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行

          常见块级元素：div，ul，li，dl，dt，p...

       (2) 行级元素

         特点：

            能在同一行内显示，不会改变HTML文档结构

            常见行级元素：span，stronng,img,input...

   块级元素呵呵行级元素都是盒子模型

4 盒子模型

      盒子模型=网页布局的基石，由4部分组成

       边框(border)

        外边距(margin)

        内边距(padding)

        盒子中的内容(content)

盒子模型的尺寸=边框+外边距+内边距+盒子中的内容尺寸

5.清除浮动

在受到浮动影响的标签中设置属性：

   (1) clear：both;

   (2) width:100%; overflow:hidden;

6.position属性有3中定位形式：

1、静态定位2、相对定位3、绝对定位可设置4种属性值：static（静态定位）relative（相对定位）absolute（绝对定位）fixed（固定定位）

relative(相对定位):无定位祖先是参照html，而不是body；

设置绝对定位时，没设置宽度，那么它的宽度是由内容决定的；