【CSS学习第六篇】

CSS学习第六篇1. 初识定位1.1 为什么需要定位1.2 定位的组成2. 定位的分类2.1 相对定位2.2 绝对定位2.2.1 绝对定位—没有父级或者父级无定位情况2.2.2 绝对定位—父级有定位情况2.2.3 绝对定位脱标的不占有原来位置2.2.4 子绝父相的由来2.3 固定定位2.4 粘性定位3. 定位的叠放顺序4. 定位的拓展4.1 绝对定位的盒子居中算法4.2 定位的特殊特性4.3 脱标的盒子不会触发外边距塌陷4.4 浮动元素不会压住标准流的文字定位会5. 网页布局总结6. 元素的显示与隐藏6.1 display显示隐藏元素6.2 visibility显示隐藏元素6.3 overflow溢出显示隐藏1. 初识定位1.1 为什么需要定位1.2 定位的组成2. 定位的分类2.1 相对定位1静态定位2相对定位原来的在标准流的位置继续占有后面的盒子仍然以标准流的方式对待它。如下文所示与父元素/浏览器无关是以自己原来的位置为基准在移动的并且原来的盒子还是占有位置的。下面的盒子不会上去还是在原来的位置。2.2 绝对定位2.2.1 绝对定位—没有父级或者父级无定位情况1绝对定位→没有父级或者父级定位情况2.2.2 绝对定位—父级有定位情况2绝对定位—父级有定位情况看最近一级有定位的祖先强调有定位2.2.3 绝对定位脱标的不占有原来位置绝对定位脱标的不占有原来位置绝对定位是不占有位置的2.2.4 子绝父相的由来先来思考两个问题问题解答过程为什么呢请看下文。轮播图的左右按钮用什么定住呢浮动浮动只会影响后面的盒子如果图片的先插入的再加入左右按钮这两个盒子则这两个盒子只会在下面显示。而且也不止需要两个盒子如果是加了浮动则三个盒子则在一行显示。此时就可以使用绝对定位因为绝对定位不占有位置可以在盒子内自由地摆放位置。因此就有以下结论子绝的由来并且父盒子一定要加定位。但是父盒子不能加绝对定位因为绝对定位是不占有位置的其他地方的盒子会飘到父盒子里去。因此只能使用相对定位了。总结2.3 固定定位3固定定位固定定位小技巧—固定到版心右侧固定定位不是基于浏览器的四个角来定位的它还可以基于版心来定位。2.4 粘性定位4粘性定位如下图一开始跟着滚动条走走到一定位置就固定了。粘性定位兼容性特别差并不常用。3. 定位的叠放顺序定位的叠放顺序4. 定位的拓展4.1 绝对定位的盒子居中算法绝对定位的盒子居中算法水平 垂直 居中4.2 定位的特殊特性定位特殊特性div是abcdspan是1234.3 脱标的盒子不会触发外边距塌陷脱标的盒子不会触发外边距塌陷4.4 浮动元素不会压住标准流的文字定位会浮动元素不会压住标准流的文字定位会5. 网页布局总结网页布局总结6. 元素的显示与隐藏6.1 display显示隐藏元素元素的显示与隐藏1display属性6.2 visibility显示隐藏元素2visibility6.3 overflow溢出显示隐藏3overflow→对溢出的部分进行显示和隐藏例如1.hidden并没有删掉文字2.scroll溢出的部分显示滚动条可以拖着看3.auto在需要的时候再添加滚动条总结如果有定位请慎用隐藏