html-day07垂直对齐&定位

简介： html-day07垂直对齐&定位

html-day07垂直对齐&定位

---

1.垂直对齐:只有行内块元素可以使用该属性

2.定位

概念:将一个元素放在指定的位置上。特指position.  [将a强行放在b身上]
语法：
    position:定位方式;
    left：*px; | right:*px;
    top:*px; | bottom:*px;

1.定位方式
    1.static静态定位。【默认值】
    2.fixed固定定位：基于浏览器当前屏进行定位。
        盒子完全居中于未知大小的盒子【面试题】
            法1.
                position:fixed;
                top:50%;
                left:50%;
                margin-top:负盒子高度的一半;
                margin-left:负盒子宽度的一半;

           法 2.
                position:fixed;
                top:0;
                left:0;
                right:0;
                bottom:0;
                margin:auto;

    3.relative相对定位：基于元素本身的位置进行定位.不会脱离文档流
    4.absolute绝对定位：基于最近的被设置非静态定位的上级元素进行定位，如果没有，就基于浏览器第一屏进行定位。
        应用：子绝父相。
    
    注意：fixed和absolute都会脱离文档流！

2.锚点链接

<div id='id名'>要跳转到的区域内容</div>
<a href='#要跳转区域的id名'>链接提示内容</a>

3 img图片和背景图片的选用：

        数据从数据库来，经常更换，使用img [产品图。广告图]
        是页面结构的一部分，使用img  [logo]
        精灵图用背景图。