CSS的经常使用属性（三）

本文转载于:猿2048网站CSS的经常使用属性（三）

静态定位

position: static (默认) 标准流

 

绝对定位

position: absolute

特色：

1. 元素使用绝对定位以后，不占据原来的位置（脱标）
2. 元素使用绝对定位，位置是从浏览器出发
3. 嵌套的盒子，父盒子没有使用定位，子盒子使用绝对定位，子盒子位置是从浏览器出发
4. 嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素出发
5. 行内元素使用绝对定位，转化成行内块元素

注意： 使用绝对定位的元素能够覆盖到其余元素上面，使用z-index属性来控制堆放次序

 

相对定位

position: relative

特色：

1. 使用相对定位，位置从自身出发
2. 还占据原来的位置
3. 行内元素使用相对定位，不能转成行内块元素

补充： 经常使用的定位方式为子绝父相（子元素绝对定位，父元素相对定位）

 

固定定位

position: fixed

特色：

1. 位置从浏览器出发
2. 固定定位以后，不占据原来的位置（脱标）
3. 元素使用固定定位，会转化成行内块元素

 

隐藏元素

overflow: hidden 溢出隐藏

visibility: hidden 隐藏元素(隐藏以后还占据原来位置)

display: none 隐藏元素(隐藏以后不占据原来的位置)

补充：内容移除：text-indent: -5000em 或者 将元素高度设置为0，使用内边距将盒子撑开，给盒子使用overflow: hidden

 

元素垂直对齐方式

vertical-align: baseline 设置元素的垂直对齐方式 

baseline(默认)  元素放置在父元素的基线上

text-top  把元素的顶端与父元素字体的顶端对齐

text-bottom  把元素的底端与父元素字体的底端对齐

middle  把此元素放置在父元素的中部