PINK老师HTML5+CSS3教程7

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

CSS书写顺序

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、定位

某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
当滚动窗口时，盒子是固定在屏幕某个位置的。

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

1.定位组成

定位：摆放盒子
定位模式+边偏移

1.定位模式

用于指定一个元素在文档中的定位方式
position来设置

1.静态定位 static 了解

默认定位方式，无定位的方式
选择器{position:static;}
静态定位按照标准流特性摆放位置，没有边偏移
布局中很少用到

2.相对定位 relative 重要

相对定位时元素在移动位置的时候，是相对于它原来的位置来说的
选择器{position:relative;}
总是相对于自己原来的位置来移动的
原来在标准流的位置继续占有，后面的盒子依然以标准流方式对待（继续保持原来位置）
相对定位没有托标，应用于给绝对定位当爹

3. 绝对定位 absolute 重要

绝对定位时元素在移动位置的时候，是相对于它祖先元素来说的
选择器{position:absolute;}

1、没有祖先元素或祖先元素无定位，则以浏览器为准定位
2、祖先有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置
3、绝对定位不再占有原先位置，脱离标准流
eg 轮播图
子绝父相：子级用绝对定位，父级用相对定位
子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
父盒子需要加定位限制子盒子在父盒子内展示

4. 固定定位 fixed 重要

固定于浏览器可视区的位置，浏览器页面滚动时元素位置不变
选择器{position:fixed;}
以浏览器的可视窗口为参照点移动，跟父元素没有任何关系，不会随滚动条滚动
固定定位不在占有原先的位置
脱离标准流，可以看作特殊的绝对定位

一种特殊的固定定位 固定在版心右侧

5. 粘性定位 sticky 了解

相对定位和固定定位的混合
选择器{position:sticky;top:10px;}
以浏览器的可视窗口为参照点移动元素（固定定位特点）
占有原先的位置（相对定位特点）
必须添加top、left、right、bottom其中一个才有效

2.边偏移

决定了该元素的最终位置
top、bottom、left、right四个属性

3.定位叠放次序 z-index

使用定位布局时，可能会盒子重叠，使用z-index来控制盒子的前后次序（z轴)
选择器{z-index:1;} 数值可以时正整数，负整数或者0，默认时auto，数值越大，盒子越靠上
如果值是相同的，则按书写顺序，后来居上
数字后面不能家单位
只有定位的盒子才有z-index属性

4.定位拓展

1、绝对定位的盒子居中
不能通过margin:0 auto水平居中
可以通过left:50% 父容器宽度一半
margin-left:负值（盒子宽度的一半）

垂直居中：
可以通过top:50% 父容器宽度一半
margin-top:负值（盒子高度的一半）

2、定位特殊特性
绝对定位和固定定位和浮动类似
①行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度
块级元素添加绝对定位或者固定定位，如果不给高度或宽度，默认大小时内容大小

3、脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题

4、绝对定位（固定定位）会完全压住盒子
浮动元素只会压住下面标准流的盒子，不会压住下面标准流盒子里面的文字（图片），因为浮动产生的目的是文字环绕图片
绝对定位（固定定位）会完全压住下面标准流的内容

二、元素的显示与隐藏

eg 网站广告，点击关闭就不见了，重新刷新会重新出现
本职让一个元素在页面中隐藏或者显示出来

1.display属性

可用于模式转化
display属性用于设置一个元素应如何显示
display:none; 隐藏对象
display:block; 除了转换为块级元素之外，同时还有显示元素的意思
display隐藏元素后，不再占有原来的位置
搭配JS可以做很多网页特效

2.visibility

visibility：visible 元素可视
visibility：hidden 元素隐藏 继续占有原来的位置

3.overflow 溢出显示隐藏

overflow属性制定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么
overflow: visible 默认超过的也显示
overflow: hidden 溢出隐藏
overflow: scroll; 溢出的部分显示滚动条 不溢出也显示滚动条
overflow: auto; 溢出的时候才显示滚动条 不溢出不显示滚动条

            /* overflow: visible; */
            /* overflow: hidden; */
            /* scroll 溢出的部分显示滚动条  不溢出也显示滚动条 */
            /* overflow: scroll; */
            /* auto 溢出的时候才显示滚动条 不溢出不显示滚动条 */
            /* overflow: auto; */

总结

为什么要用定位
定位的四种分类 特点
为什么常用子绝父项布局
淘宝轮播图
元素显示隐藏的2种方式及区别