day9 定位

在html中方位值top距上距离 bottom距下 left距左 right距右

静态定位

position:static  默认定位

静态定位

方位值不起作用

具有清除定位的作用

相对定位

position:relative 支持方位值

相对位移是对自己移动了距离

50%是针对父级的一半 是左上角与父级中点对齐

绝对定位

position:absolute

绝对定位能够脱离正常的文档流  默认参考系是body 与页面原定相对

在父级加position:relative 就会以父级为参考系

要求：如果长辈级有多个 会选择最近的长辈为参考系  不会选择同级标签为参考系

绝对定位也可以成为参考系  固定定位也可以作为参考系

div在整个页面水平居中

div{
    position:absolute;
    left:50%;
    top:50%;
    width:100px;
    height:100px;
    margin-top:-50px;
    margin-left:-50px;


}

固定定位

positon:fixed;脱离文档流

固定在窗口 不随滚动条滚动

div{
    position:fixed;
    

}

总结

1、绝对定位和固定定位会脱离文档流 静态和相对定位不会脱离文档流

2、对元素本身是否会产生影响（行内元素是否支持宽高）

absolute和fixed会  relative不会

3、块级标签默认100%，块级元素是否从默认100%变成由内容撑开宽度

relative  absolute

4、都支持margin padding 但是都不支持auto

5、绝对定位 会将所有并列元素重叠

z-index：99；z-index后面赋值  谁大谁在上边

属性  width、height、color、border、font、margin、padding、list-style

white-space（字间隙）

1、布局属性

display list-style position float clear overflow

2、自身属性

width height margin padding border background

3、字体、文本属性

color font text-decoration text-align vertical-align white-space break-word

4、其他（css）

content border-radius box-shadow text-shadow linear-gardient