006 Python前端之定位

position定位属性

position：检索对象的定位方式各属性值的作用：static：默认值。位置设置为 static 的元素会正常显示，它始终会处于文档流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。absolute：相对于父级元素的绝对定位，浮出、脱离文档流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，若父级都没有定位，则以html（根元素）可直接指定 “left”、“top”、“right” 以及 “bottom” 属性。。(层叠的顺序z-index:value)relative：是相对于默认位置的偏移定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流】fixed：相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过"left"、"top"、"right" 以及"bottom"属性来规定。不论窗口滚动与否，元素都会留在那个位置。

绝对定位和相对定位的区别

1、参照物不同，绝对定位的参照物是包含块（已定位的父元素），相对定位的参照物是元素本身默认的位置2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间

包含块的概念及作用

包含块是绝对定位的基础，包含块就是为定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；       默认状态下，html是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；

定位元素层叠属性：

z-index : auto |number检索或设置对象的层叠顺序。 auto：默认值。number:无单位的整数值。可为负数 没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；说明：1）较大 数值的对象会覆盖在较小 数值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。 此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象。

让一个元素始终在窗口水平、垂直位置居中

div{    width:200px;    height:200px;    background:#f00;    position:fixed;    left:0;    right:0;    top:0;    bottom:0;    margin:auto;}div{    width:200px;    height:200px;    background:#f00;    position:fixed;    left:50%;    top:50%;    margin:-100px 0 0 -100px;}

命名锚点链接的应用

定义： 是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。应用：命名锚点的作用：在同一页面内的不同位置进行跳转。制作锚标记：1)给元素定义命名锚记名 语法：<标记   id="命名锚记名">    </标记>2)命名锚记连接 语法：<a href="#命名锚记名称"></a>

滚动条应用

1、Overflow内容溢出时的设置属性：overflow 水平及垂直方向内容溢出时的设置overflow-x 水平方向内容溢出时的设置overflow-y 垂直方向内容溢出时的设置以上三个属性设置的属性值： visible、scroll、hidden、auto、visible 默认值，其中的内容无论是否超出范围都将被显示。hidden 效果与visible相反。任何超出“width”和“height”的内容都会隐藏。scroll 无论内容是否超越范围，都将显示滚动条。auto 当内容超出范围时，显示滚动条，否则不显示。应用:1）没有水平滚动条: <div style="overflow-x:hidden">test</div>2）没有垂直滚动条 <div style="overflow-y:hidden">test</div>3）没有滚动条 <div style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden">test</div>4）自动显示滚动条 <div  style="height:100px;width:100px;overflow:auto;">test</div>