DIV+CSS

1、w3c: world wide web consortium （全球万维网联盟）；

2、为了解决兼容性问题，我们加DTD头，为了解决默认边距的问题，我们将所有标签的内外边距清零；
  在CSS属性里写入： * {margin:0;padding:0}

3、DOM： 文档对象模型（document object model）

4、无意义标签： 但有大意义
  <div> ： 块级标签
  <span> ： 行内标签

5、标准流中排列方式：
  水平盒子之间的margin是相加的关系；
  垂直盒子之间的margin是以大值为准；这个现象称为“塌陷”；
  嵌套盒子之间的边距关系：外盒子的padding和内盒子的margin，是相加的关系；
    （margin是负值，会重合）

  注意：
    <span>aaa</span>
    <span>bbb</span>
    因为span是行内元素，所以这样换行写，会在两个元素之间产生一个空格；

6、标准流：块级元素和行内元素在DOM中自然的排列就是标准流；
  标准流DIV，因为每一个占满一行，不利于布局，所以要用属性float，使之脱离标准流；

7、标准盒子模型
  每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充
  （padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。

8、内边距 （padding）
  单独设置某一个方向的padding，可以使用padding-top、padding-right、padding-bottom、padding-left来设置；
  一起设置为padding，可以有四个值：
  设定1个属性值时（X1），表示上下左右padding值均为X1值；
  设定2个属性值时（X1 X2），表示上下padding值为X1值，左右padding值为X2值；
  设定3个属性值时（X1 X2 X3），表示上padding值为X1，左右padding值为X2，下padding值为X3；
  设定4个属性值时 （X1 X2 X3 X4），表示padding值，上为X1，右为X2，下为X3，左为X4；

9、外边距（margin） （body本身也是有外边距的，但在IE中没有外边距，在火狐中body上下边框包含着内容，在google浏览器中，body边框由窗口决定）

10、块级元素 ： 指占据一个矩形区域，并且和相邻的元素竖直排列，不会排在同一行中，且左右撑满；
  大部分HTML格式标签都是，如：
  center
  div
  ol
  ul
  form
  h1-6
  hr
  p
  pre
  table

11、行内元素 ： 行内元素不占用独立的区域，仅仅是在其他元素的基础上指出一定的范围。如：
  <b></b><a></a>
  大部分HTML文本标签都是行内元素：
  a
  b
  big
  i
  img
  input
  small
  span
  strong
  sub
  sup
  textarea
  u

12、两个重要的属性：float  position
  a、float默认值是none，可以使用left,right；
    清除浮动使用clear，有值（left,right,both）；
    如经常用来分隔DIV的类  .clear{clear:both;}

  b、定位position
    默认值是： static 静态定位  表示块保持在原有应该在的位置上，即该值没有任何移动效果；没有position定位，相当于使用position:stataic;
    还有： relative 相对定位  以标准流的排版方式为基础，利用设置属性left,right,top,bottom的值使盒子相对于它原本的位置偏移指定距离，（仍然是在标准流中）；  写法：position:relative;top:30px;left:30px;
    absolute 绝对定位  就是盒子的位置以包含它的框为基准进行偏移，盒子从标准流中脱离； 写法：position:absolute;top:30px;left:30px;
    需要注意的是：使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，则会以浏览器为基准进行定位；
    所以一般会在父级盒子里加上position:relative;不给值；
    fixed 固定定位  生成绝对定位的元素，相对于浏览器窗口进行定位；元素的位置通过 left,top,right以及bottom属性进行规定；
    如：
      div {
      width:150px;
      height:250px;
      border:1px dashed blue;
      position:fixed;/* 光这样写还不行 需要指定定位的坐标 */
      bottom:3px;
      right:3px;
    }

    就会形成像广告一样的效果一直在右下角。

13、z-index 属性
  用于调整定位时，重叠块的上下位置；默认值为0，可以是正数或负数，值越大越靠上；

14、display 属性
  用于确定盒子的类型
  属性值：
    inline  行内
    block   块级
    none    无

补充：
  CSS 注释   /* 注释内容 */
  兼容性问题解决：加DTD
  行内标签的宽高是根据内容决定的，直接给height和width没有效果，解决方法：改成块级元素：display:block；技巧：使用height：设置了块级的高度，再使用line-height：设置文字行高与块级高度一样，就可以使文字竖直居中了。