CSS-定位

1.相对定位。
1.1如何设置相对定位？
给元素设置postion:relative 即可实现相对定位。
可以使用left,right top,bottom调整位置
1.2相对定位的参考点在哪里
相对自己原来的位置。
1.3相对定位的特点.
(1)不会脱离文档流，元素位置的变化只是视觉效果的变化。不会对其他元素产生影响。
（2）定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
a.定位元素在普通元素之上
b.都发生的两个元素，后写的元素会盖在先写的元素之上。
3.left和right不能一起设置，top和bottom不能一起设置
4.相对定位的元素也可以浮动，但不推荐这么做。
5.相对定位的元素可以通过Margin调整，但不推荐这么做

2.绝对定位
2.1如何设置绝对定位？
给元素设置position:absolute;
可以使用left,right,bottom,top调整位置
2.2绝对定位的参考点在哪里？
参考它的包含块。
什么是包含块？
1.对于没有脱离文档流的元素，包含块就是父元素。
2.对于脱离文档流的元素，包含块是第一个拥有定位属性的祖先元素。（如果所有祖先都没有定位，包含块就是整个文档）
2.3绝对定位元素的特点。
1脱离文档流，会对后面的兄弟元素，父元素有影响。
2.left和right不能一起设置，top和bottom不能一起设置。
3.绝对定位浮动不能同时设置，如果同时设置，浮动会失效。
4.绝对定位的元素可以通过Margin调整，但不推荐这么做。
5.无论什么元素（块，内联，块行内）设置了绝对定位就成为定位元素。
定位元素：可以设置宽高，默认宽高由内容撑开。

3.固定定位
3.1如何设置固定定位？
给元素设置postion:fixed:即可实现固定定位。
可以使用left,right bottom,top调整属性值。
3.2固定定位的参考点在哪里？
参考它的视口。
3.3固定定位元素的特点。
1.脱离文档流。会对后面兄弟元素和父元素有影响。
2.left,right不能一起设置，top,bottom不能一起设置。
3.固定定位和浮动不能同时设置，如果同时设置浮动失效。
4.固定定位的元素可以通过Margin调整，但不推荐这么做。
5.无论什么元素（块，内联，块行内）设置了固定定位就成为定位元素。

4.粘性定位
4.1如何设置粘性定位？
给元素设置position:sticky;即可实现粘性定位。
可以使用top,bottom,left,right四个属性调整位置，最常用的是top
4.2粘性定位的参考点在哪里？
离他最近的一个拥有“滚动机制”的祖先元素，即使这个祖先不是最近的真实可滚动祖先。
4.3粘性定位的特点。
不会脱离文档流，它是一种专门用于窗口滚动的新的定位方式
粘性定位和浮动可以一起设置，不推荐
粘性定位可以调整Margin，不推荐

5.定位层级
1.定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
2.如果位置发生重叠，默认情况是：后面的元素，会显示在前面的元素之上。
3.可以通过z-index调整显示的层级。
4.z-index越大显示层级越高
5.只有定位元素设置z-index才生效
6.如果z-index大的元素没有盖过z-index较小的元素。则检查较大元素的包含块。

6.版心
在PC端网页里，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心。
版心的宽度一般是960-1200像素之间。
版心可以是一个，也可以是多个。

7.布局常用单词
（1）顶部导航条topbar
(2)页头，header,pageheader
(3)导航，nav navigator,navbar
(4)搜索框，search,search-box
(5)横幅，广告，宣传图，banner
(6)主要内容content main
(7)侧边栏，aside,sidebar
(8)页脚,footer page-footer

8.重置默认样式
1.p元素有上下margin
2.h1-h6也有上下的margin
3.body有默认8px的外边距
4.超链接有默认的文字颜色和下划线
5.u1有默认的左Padding
使用reset.css//从各公司下载
使用Normalize
http://necolas.github.io/normalize.css