zoukankan      html  css  js  c++  java
  • 定位 相对定位 偏移量 绝对定位 固定定位 粘滞定位 水平和垂直布局

    定位(position)

    1.定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置。

    2.使position属性来设置定位,可选值:

      -static 默认值,元素是静止的没有开启定位

      -relative 开启元素的相对定位

      -absolute 开启元素的绝对定位

      -fixed 开启元素的固定定位

      -sticky 开启元素的粘滞定位

    相对定位(relative)

    1.特点:

      -元素开启相对定位以后,如果不设置偏移量元素不会发生任何变化。

      -相对定位是参照与元素在文档流中的位置进行定位的。

      -相对定位会提升元素的层级。

      -不会使元素脱离文档流。

      -不会改变元素的性质块还是块,行内还是行内。

    偏移量(offset)

    1.当元素开启偏移量来设置元素的位置

      -top

        -定位元素和定位位置上边的距离

      -bottom

        -定位元素和定位位置上边的距离

      -top和bottom控制垂直方向,通常使用其一就可以

      -left

        -定位元素和定位位置左侧的距离

      -right

        -定位元素和定位位置右侧的距离

      -top和bottom控制垂直方向,通常使用其一就可以

    绝对定位(absolute)
    1.特点
      -开启绝对定位后,如果不设置偏移量位置不会发生变化。

      -开启绝对定位后,元素会从文档流中脱离。

      -绝对定位会改变元素的性质,行内变成块,块的宽高被内容撑开。

      -绝对定位会使元素提升一个层级。

      -绝对定位元素使相对于其包含块进行定位的。

    2.包含块(containing block)

    1.正常情况下:

      -包含块就是离当前元素最近的祖先块元素。

    绝对定位的包含块:

      -包含块就是离它最近的开启了定位的祖先元素。

      -如果所有的祖先元素都没有开启定位则根元素就是它的包含块。

      -html(根元素、初始包含块)。

    固定定位(fixed)

    1.固定定位也是一种绝对定位,所以大部分特点都和绝对定位一样。

    2.唯一不同的是固定定位永远参照于浏览器的视口进行定位,固定定位不会随网页的滚动条滚动。

    粘滞定位(sticky)

    1.粘滞定位和相对定位的特点基本一致。

    2.不同的是粘滞定位可以在元素到达某个位置时将其固定。

    水平和垂直布局

    1.水平方向布局的等式必须满足;

      left + margin-left/right + border-left/right + width +padding-left/right + right = 包含块内容的宽度

    2.当我们开启绝对定位后:

      -水平方向的布局等式就需要添加 left 和 right 两个值。

      -如果9个值中没有auto则自动调整right值以使等式满足。

      -如果有auto,则自动调整auto的值以使等式满足。

      -可设置auto的值:margin width left right。

      -left right默认是auto,所以如果不知道 left 和 right,则等式不满足时,会自动调整这两个值。

    3.垂直方向布局的等式必须满足;

      top + margin-top/bottom + padding-top/bottom + border-top/bottom + height + bottom = 包含块内容的高度

    4.利用绝对定位实现居中:

    .div1 {
         100px;
        height: 100px;
        position: absolute;
        margin: auto;
        left: 0; 
        right: 0; 
        top: 0; 
        bottom: 0; 
    }
    

    学识浅薄,如有错误,恳请斧正,在下不胜感激。

  • 相关阅读:
    小型数据库的选择(轻量级数据库)(转)
    MSSOAP与WebService
    SOAP和WSDL的一些必要知识 (转)
    几个小型数据库的比较
    常用的嵌入式数据库的比较
    webservice Quiz(Wsdl &Soap)
    ASP.Net获取文件的路径
    SOAP=RPC+HTTP+XML
    记录几个IP查询接口
    COM+组件注册方法
  • 原文地址:https://www.cnblogs.com/yin-jie/p/13754981.html
Copyright © 2011-2022 走看看