目录
定位属性
- position定位属性,五种状态,
- 元素没有potion属性就不能用四个位移属性:top 上,bottom 下,left 左,right 右
- 元素具有position定位属性后,可以改变其原有属性
z-index属性
- 取值默认为auto;
- 可以为负数,以十位或百位为范围;
- 一般使用正负整数,无需任何单位,数值越大层级越高;
相对定位
position:relative;相对定位属性
- 相对定位使用四个方向的位移,参照自己本身的位置,当定位的位置距离原有位置较远,不好计算位移的位置,小距离的位移可以;
- 加一个相对定位,会让当前元素在同一个层中级别更高,会在其他元素的层上;
绝对定位
position:absolute;绝对定位属性
- 绝对定位的元素脱离文档流,会使父 级元素失去高度;
- 相对定位元素使用位移属性,顺着标签结构向上寻找,但碰到position:relative属性;
- 子绝父相;
- 元素处于绝对定位,变成块级元素。
子元素在父元素中水平垂直居中
- 子元素绝对定位,父元素相对定位;
- 对边的数值一致
- 子元素设置margin:auto;
元素消失与显示
- display:none;脱离文档流的的完全消失;
- visibility:hidden;隐藏,元素占据位置,不显示出来;
- opacity属于元素透明,整个元素包括其子元素是一起透明的;
文本和字体样式
行高
line-height:行高是包含文本本身的高度,
- 单行文本在父元素中,行高等于高度,就相当于让单行文本在元素中垂直居中;如果元素中只有一行文本,可以只写行高撑开;
- 行高对行内元素也有效;
- 行高可以写没有任何单位的值,代表倍数,文本字号的倍数;
文本溢出的效果
- 单行文本溢出
- 指定宽度,宽度小于文字总和;
文本强制不换行:white-space:nowrap;
多余溢出部分隐藏掉:overflow:hidden
文本增加省略号:text-overflow: ellipsis