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  把此元素放置在父元素的中部

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有