学习笔记08

2017年9月27日

学习笔记与总结

1.定位方式

相对定位：position: relative

1：相对于自己原来的位置进行定位

2：如果是仅仅添加了相对定位的样式，

position: relative

显示效果不发生变化

3：使用定位让元素发生偏移的

可以使用z-index来调整显示顺序（最大值为1000 默认为0）

4：原来的位置不会被其他元素占用

绝对定位：position: absolute

1：找一个离他最近的，并且使用了定位的父元素

如果没有找到，以body为标准

2：元素本身占用的空间被其他元色占用

3：可以使用z-index来控制显示顺序

固定定位：position: fixed

相对于显示的页面进行布局（基于整个屏幕）

2.双飞翼布局

3.弹性盒子

4.练习中有用的东西：

让一个子元素垂直水平都居中的方法：

1：让子元素相对于父元素进行定位

2：让子元素相对于父元素上左都偏移50%

3：通过外边距对元素显示的位置进行修正（本身宽高的一半）

position: absolute;

left: 50%;

top: 50%;

margin-left: -50px;

margin-top: -50px;