position 再谈

absolute 

  本身 具有脱离文档流,不占有文档的位置, 在原来的上方, 定位后会输入top等值会离开原来的位置,以文档的左上角点位. 

   与浮动的区别是: 浮动文字会环绕,而absolute底下的文字会上移被覆盖, 1块下面是文字, 

      header 是个块; 底下有文字

    aside   section  footer   

    absolute 在页面任意定位, 而浮动这回上移的左上角.

 

  先后问题,在HTML页面的前后顺序排列与css的顺序无关,  z-index可以决定他们的先后. 

  跟随性:会跟着文档走,但是下方文字会上移,  如果加的top letf定位就会以窗口移动

 

fixed  

  脱离文档流,  随着滚动条变动而变动.以窗口的左上角,与absolute(文档)不同, 同absolute一样,没定位时,跟随文档,定位及以窗口移动.

 

 

relative

 不脱离文档流,在自己原来的基础上发生偏离(如body 或其他块元素等).,也有top等值来移动定位.  而不是同absolute和fixed的窗口或文档的左上角移动 .   用padding 会挤占, 用定位会有位移有层的效果,就像脱离文档流一样,只是位置还站着, 其他元素不会移动,发生覆盖.

  就是不会像absolute和fixed一样 ,文字上移站他的位置.   不同的的是relative的定位是以他的父元素位移,而不是窗口.

 

实际使用 

   现在父元素设置一个参考点 (relative), 在用absolute设置成脱离文档流的 具有绝对定位.    但实际上可以不用relative这一步, 只用absolute的跟随性,就可完成区域的绝对定位.

 

 header设置成立absolute,宽度和高度要重新设置,因为浮动了,     如果上一层有没有浮动, 第二层浮动后 ,下面的文字会在二层快位置左边浮动.

 

 

border-box    (padding和border会撑大快的宽度,即使浮动后 ,左边的aside是20,右边的section是80,section会下移动,宽度不够了, 这是用border-bor自动减)

 

   content-box 是默认值     border-box是不用于总长度,自动减

 

 

 border-box 让 border 和 padding 不在额外增加元素大小

aside {

       width: 200px;
       height: 500px;
       background-color: purple;
       padding: 10px;
       border: 5px solid red;
       box-sizing: border-box;
       float: left;} // border 主要是让边框 内填充  外边距 自动跟总宽度一起计算,自动减去.

//完整形式
-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

box-sizing: border-box; 

 

这个就是 在右下角出现一个可以放大缩小的东西.

aside {

     resize: both;

    overflow:auto;
}