CSS 定位，元素的显示隐藏

目录

前言

一、CSS定位

1、为什么需要定位？

2.定位组成

3.定位的拓展

 二、元素的显示与隐藏

三、CSS进阶

1.css用户界面

2.vertical-align属性应用

3.溢出的文字省略号显示

总结

---

前言

这次介绍一些css定位以及显示隐藏的内容，还有小的拓展知识。

一、CSS定位

1、为什么需要定位？

由于标准流和浮动无法快速实现，浮动可以让多个块级盒子一行没有缝隙排列显示；某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子； 将盒子定在某一个位置，也是在摆盒子。

2.定位组成

• 定位=定位模式+边偏移；  定位模式用于指定一个元素在文档的定位方式，边偏移决定了元素最终位置。
• 5种定位模式：static静态定位、relative相对定位、absolute绝对定位、fixed 固定定位、sticky粘性定位
• static静态定位 ：position ：static；  按照标准流特性摆放位置，没有位偏移，很少用到；
• relative相对定位：相对定位是元素在移动位置的时候，是相对于它原来的位置来说的，参照点是自己原来的位置；它不脱标，继续保留原来位置，原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式待它。
• absolute绝对定位：绝对定位是元素在移动位置时候，相对于它祖先元素来说的；如果祖先元素有定位，以最近一级有定位元素为参考点移动位置；绝对定位不占有位置-脱标。
• fixed 固定定位：固定定位是元素固定在浏览器可视区位置，以浏览器可视窗口为参照点移动，在页面滚动时元素位置不会改变；和父元素无关；不占有位置；
•   固定在版心右侧位置小技巧：让固定定位的盒子left：50%，走到浏览器可视区一半位置；让它margin-left版心宽度一半位置，就可以右对齐了
• sticky粘性定位：粘性定位 是以浏览器窗口为参照点，占有位置，必须添加其中一个top、bottom、right、left才可以
•  子绝父相：子级是绝对定位，父级要用相对定位，绝对和相对定位经常搭配使用。
• 边偏移：top、bottom、left、right四个值
• 注意：定位叠放次序z-index，它控制盒子前后次序，值可以是正负整数或0，数值越大盒子越往上，数值后面没有单位。只有在定位中才可以使用

3.定位的拓展

绝对定位的盒子居中    ： 水平居中：left：50%让盒子左侧移动父级元素水平中心位置，再margin-left让盒子左移自身宽度的一半；  垂直居中：再top：50%，margin-top自身高度一半

定位的特殊性：行