css 学习

1. display

它是管理布局的。如果没有他，页面会是一排一直往下走。

 1. block
    div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。

 2. inline
    span 是一个标准的行内元素。一个行内元素可以在段落中 <span> 像这样 </span> 包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素，它可以被用作链接。

3.none
    一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
    它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。

2.margin

  width: 600px;
  margin: 0 auto; 

  像这样的设置会使容器居中并且宽度600，但是，屏幕笔600 都小呢，此时就需要修改width为max-width了，这样在屏幕小的时候他也会调整宽度。

3.盒模型

    * {
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }
一般这样写在css中确定盒模型中的width和heigth指的是包括border的内容。可以取content-box(默认值);border-box;inherit;

4.position

static：默认值，表示该容器不会被位置化(positioned)。它没有确切的位置。
relative：的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。但还不会脱离文档流。只是相对于它本身应该显示的位置。
fixed:表示它的位置是相对窗口进行定位的。会脱离文档流。
absolute：也表示相对固定，但是是相对于最近的位置化的祖先元素。

5.float

float 可用于实现文字环绕图片，浮动是针对与它所在的父容器
float浮动后会对，它所在的父容器和父容器下的会受到影响。
感觉fload和position的absolute差不多，区别好像就是absolute对父容器内的其他元素造成影响。
如果把容器比作一盆水的话，不浮动的元素就是冰块（可能不太恰当），他们在水的上层但是没有浮出水面，而浮动的元素就相当于泡沫，如果不进行其他设置的话，泡沫会把冰块挡住，可以在水面上任意浮动，两个层次之间互不影响，所以你会看到如下的内容：