CSS学习记录5

1 定位

区分于浮动，浮动可以让多个块级盒子一行没有缝隙排列显示。定位则是可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子。

1.1 定位的组成

定位=定位模式+边偏移

1.1.1 定位模式

1.1.2 边偏移

注意：

1、只有定位的盒子才有边偏移，标准流和浮动的盒子没有。

2、边偏移和margin/padding 不一样。

1.2 静态定位 static(了解)

1.3 相对定位 relative

特点：自恋型

因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。当爹不需要加边偏移

1.4 绝对定位 absolute(重要)

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。

特点：

1、如果没有父元素，或者父元素没有定位，则以浏览器为准定位。

2、如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

说明：爷爷有定位+父亲无定位，儿子以爷爷为主

           爷爷无定位+父亲无定位，儿子以浏览器为主

3、绝对定位不在占有原先的位置。（脱标，跟浮动差不多，他如果是大毛，那二毛会占有他的位置）

总结：开发中使用：父相子绝

1.5 固定定位 fixed (重要)

特点：

固定定位小技巧：固定在版心右侧位置。

1.6 粘性定位 sticky(了解)

粘性定位可以看作相对定位relative和固定定位fixed的混合。

特点：

1.7 定位总结

一定要记住 相对、绝对、固定 两大特点：1、是否脱标 2、以谁为基准点移动位置

学习定位重点学会父相子绝

1.8 定位叠放次序 z-index

z-index:1;

规则：

1.8 定位的拓展

1.8.1 绝对定位的盒子居中

起因：加了绝对定位的盒子不能通过margin:0 auto; 水平居中，但是可以通过以下方法实现。

left: 50%;/*让合资的左侧移动到父级元素的水平中心位置*/
margin-left: -100px; /*让盒子向左移动自身宽度的一半*/

1.8.2 定位特殊特性

绝对定位和固定定位也和浮动类似。

1.8.3 脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位(固定定位)元素都不会触发外边距合并的问题。

1.8.4 浮动和绝对定位(固定定位)的小区别

1、div盒子浮动，不会遮挡标准流p内的文字

2、绝对定位会使div盒子会遮挡标准流p内的文字

2 网页布局总结

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己专门的用法。

3 元素的显示与隐藏

让一个元素在页面中隐藏或者显示出来

3.1 display属性

1、隐藏对象

display:none;

2、除了转换成块级元素之外，同时还有显示元素的意思

display:block;

注意：display隐藏元素后，不再占有原来的位置

后面应用及其广泛，搭配JS可以做很多网页特效

3.2 visibility 可见性

用于指定一个元素是可见还是隐藏

1、元素可视

visibility: visible;

2、元素隐藏

visibility: hidden;

注意：visibility隐藏元素后，继续占有原来的位置

3.3 overflow 溢出

用于指定溢出盒子的内容是可视、隐藏还是加滚动条

1、溢出部分可视

overflow: visible;

2、溢出部分隐藏

overflow: hidden;

3、盒子加滚动条

overflow: scroll;/*不论是否超出，总显示滚动条*/

4、自动加滚动条

overflow: auto; /*超出自动加滚动条，不超出不加*/

注意：

1、一般情况下都不想让溢出的内容显示出来，因为会影响布局

2、如果有定位的盒子，请慎用over:hidden; 因为它会隐藏多余的部分，如下图所示(如果加了,hot会显示不全)。

3.4 显示与隐藏总结