css 定位

目录

定位属性

z-index属性

相对定位

绝对定位

子元素在父元素中水平垂直居中 

元素消失与显示

文本和字体样式

行高

文本溢出的效果

---

 

定位属性

1. position定位属性，五种状态，
2. 元素没有potion属性就不能用四个位移属性：top 上，bottom 下，left 左，right 右
3. 元素具有position定位属性后，可以改变其原有属性

z-index属性

1. 取值默认为auto;
2. 可以为负数,以十位或百位为范围;
3. 一般使用正负整数，无需任何单位，数值越大层级越高;

相对定位

position：relative；相对定位属性

1. 相对定位使用四个方向的位移，参照自己本身的位置，当定位的位置距离原有位置较远，不好计算位移的位置，小距离的位移可以；
2. 加一个相对定位，会让当前元素在同一个层中级别更高，会在其他元素的层上；

绝对定位

position：absolute；绝对定位属性 

1. 绝对定位的元素脱离文档流，会使父 级元素失去高度；
2. 相对定位元素使用位移属性，顺着标签结构向上寻找，但碰到position：relative属性；
3. 子绝父相；
4. 元素处于绝对定位，变成块级元素。

子元素在父元素中水平垂直居中 

1. 子元素绝对定位，父元素相对定位；
2. 对边的数值一致
3. 子元素设置margin：auto；

元素消失与显示

1. display：none；脱离文档流的的完全消失；
2. visibility：hidden；隐藏，元素占据位置，不显示出来；
3. opacity属于元素透明，整个元素包括其子元素是一起透明的；

文本和字体样式

行高

line-height：行高是包含文本本身的高度，

1. 单行文本在父元素中，行高等于高度，就相当于让单行文本在元素中垂直居中；如果元素中只有一行文本，可以只写行高撑开；
2. 行高对行内元素也有效；
3. 行高可以写没有任何单位的值，代表倍数，文本字号的倍数；

文本溢出的效果

1. 单行文本溢出
2. 指定宽度，宽度小于文字总和；

文本强制不换行：white-space：nowrap；

 多余溢出部分隐藏掉：overflow：hidden

文本增加省略号：text-overflow: ellipsis