1.定位
2.四种定位的各自特点【需要记】
3.定位之 --子绝父相布局【理解】
4.css扩展及案例练习
标准流
浮动
定位
复习：浮动元素---- 1.压不住父亲的边框2.压不住父亲的padding。
浮动压不住图片和文字。---定位是可以的。
将盒子定在某一个位置 --- 自由的漂浮在其他的盒子(标准流和浮动)之上。
标准流（在海底）---》浮动（海面上的泡沫）---》定位在最上层（天空）
定位==定位模式 + 边偏移(top bottom left right)
relative 相对定位absolute 绝对定位fixed 固定定位
1.相对于自己原来在标准流中的位置移动 -- 占位置
2.原来的位置继续保留，后面的盒子仍然以他原来在标流的位置对待它。
1.如果父级(爸爸爷爷...)没有定位,就会参考浏览器文档为准来移动位置。
2.绝对定位是参考带有定位的最近父级元素来移动位置。
3.不保留原先的位置，完全脱标。
1.为了实现排版的要求，由于子元素自由漂浮不应该占有位置，所以使用绝对定位。
2.为了不影响后面的排版，父元素应该占有位置，所以使用相对定位-- 占位置
1.完全脱标--- 不占位置
2.只认浏览器可视化窗口，跟定位的父亲没有关系--认死理
1.先走浏览器的一半 left:50%
2.再次margin-left 版心的一半。
1.相对定位和固定定位的混合。
2.占有位置（相对定位特点）
3.以浏览器可视化窗口为参考点移动（固定定位）
4.必须添加top bottom left right 其中一个才生效
1.添加了定位的元素，默认层级都是0，后来者居上。
2.z-index 值，可以是正整数 负整数 --- 数值越大越靠上
3.z-index 只能用于添加了二手交易平台定位的元素（浮动的元素不生效）
绝对定位和固定定位盒子 -- 不能直接设置margin：0 auto；实现水平居中
绝对定位实现居中方法：
1.先走自己父级盒子的一半
2.再往回走自身宽度的一半
注意：相对定位，原则上可以使用margin:100px auto；来实现水平居中。
实现绝对定位盒子的水平垂直居中办法： .box { position: absolute; / 先走父元素宽度的一半 / left: 50%; / 再次往回走自己宽度的一半 / margin-left: -100px; / 先走父元素top一半（高度的一半） / top: 50%; / 再次往回走自己高度的一半 / margin-top: -100px; width: 200px; height: 200px; background-color: pink; / margin: auto; / }
总结：加了浮动的元素，加了绝对定位和固定定位的元素，不用display转换，可以直接设置宽高。
注意：相对定位占位置，没有类似于行内块的特性。
浮动 -- 1.不会超过父元素的padding和border2.浮动不会压住下面标准流里面的文字和图片。
前置知识点：淘宝案例之--圆角矩形?正方形变成圆 --border-radius:数值/百分比 宽度和高度的一半?矩形变成椭圆 --border-radius：数值 高度的一半?简写形式 --border-radius: 左上角 右上角 右下角 左下角; 顺时针原则
1.先有一个大盒子520x280 --》img图片
2.制作按钮---》子绝父相--》绝对定位垂直居中top:50% margin-top:-自己宽一半
3.把按钮小盒子变成半圆 border-radius:0 xxpx xxpx 0;简写形式
4.合并简化代码
5.底部小圆点制作 --- 长方形变成椭圆，border-radius值等于高度的一半 。
6.正方形变成圆 --- border-radius值等于宽高的一半。
display -- block;(转换为块元素&显示) none -- (隐藏&不保留位置) 用处多！
visibility -- visible(显示) hidden(隐藏&隐藏之后，保留原来的位置)
overflow -- 1.清除浮动 2.解决父子关系垂直塌陷问题 3.隐藏超出的内容(剪贴)
属性值：scroll(总是有滚动条) auto(自动检测是否出现滚动条) hidden(溢出隐藏)--记住
其实：scroll和auto，我们绝大多数情况，不用，因为太丑了。
以上！祝大家学习愉快~~~
