知识总结：CSS定位今日学习1.定位2.四种定位的各

今日学习1.定位
2.四种定位的各自特点【需要记】
3.定位之 --子绝父相布局【理解】
4.css扩展及案例练习
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 其中一个才生效
定位的扩展定位中的堆叠顺序-z-index1.添加了定位的元素，默认层级都是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:inline-block 特性总结：加了浮动的元素，加了绝对定位和固定定位的元素，不用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 ，我们绝大多数情况，不用，因为太丑了。
【知识总结：CSS定位】以上！祝大家学习愉快~~~