垂直对齐固定定位相对绝对定位盒子完全居中粘性定位透明度锚点链接

587 阅读1分钟

vertical-align: top | middle ; 垂直对齐 opacity:数字; 【值应该在0-1之间,0是完全透明,1是完全不透明】 应用场景: 1.解决图片3px问题 2.实现表格内容垂直对齐的方式设置 1.定位 概念:将一个元素放在指定的位置上 语法:
position:定位方式; 坐标: left:*px | right:*px; top:*px | bottom:*px;

定位方式(51. static 静态定位:元素的默认定位方式。
    2. fixed  固定定位:基于浏览器窗口进行位置移动
            position:fixed;
            left:*px | right:*px;
            top:*px | bottom:*px;
    
        盒子完全居中未知大小的盒子  【面试题】
            方式1position:fixed;
                top:50%;
                margin-top:-盒子高度的一半;
                left:50%;
                margin-left: -盒子宽度的一半;
            方式2position:fixed;
                top:0;
                left:0;
                right:0;
                bottom:0;
                margin:auto;
    3. relative  相对定位:基于元素原来的位置进行移动
    4. absolute  绝对定位:基于被设置非静态定位的最近上级元素进行定位。如果都没有,基于浏览器的第一屏进行定位。
    5. sticky    粘性定位:

2.锚点 语法:

要跳转到的区域
链接的文字

3.透明度 opacity:数字; 【值应该在0-1之间,0是完全透明,1是完全不透明】 兼容低版本ie filter:alpha(opacity=数值); [值应该在0-100之间,0为完全透明]

position: fixed | absolute | relative;  [盒子居中]
锚点的语法
    <div id='id名'></div>
    <a href='#id名'></a>
透明度
    filter:alpha(opacity=数值)   ie
    opacity:数值;