• CSS定位


    1、定位元素的属性:

      top:定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

      bottom:定义了定位元素下外边距边界与其包含块下边界之间的偏移。

      left:定义了定位元素左外边距边界与其包含块左边界之间的偏移。

      right:定义了定位元素右外边距边界与其包含块右边界之间的偏移。

    总结:定位属性的top、bottom、left、right都是相对于  相对元素  的相对应边界的距离,利用这个可以设置元素的自适应宽高。如上下高度固定,中间自适应的页面的布局。                        

    参考网站:http://www.cnblogs.com/wfblog/p/8944902.html


    固定定位:元素的位置相对于浏览器窗口是固定位置。(脱离标准文档流)

    注意:固定定位的元素不是说该元素的某一个点相对于参考元素的元素定位,而是定位元素的四条边相对于参考元素的定位。

    如下面的例子中 left、right、top、bottom四个属性的值都是有效果的。

        h2
            {
                position:fixed;
                background-color: red;
                left:100px;
                right: 10px;
                top:150px;
                bottom: 10px;
            }

    相对定位:相对定位元素的定位是相对其正常位置。(标准文档流)

    相对定位的元素只是位置的改变,大小不会变化。

    如下面的例子中,bottom没有效果。

     h2
            {
                position:relative;
                background-color: red;
                top:150px;
                bottom: 10px;
            }

    绝对定位:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。(脱离标准文档流)

    注意:绝对定位的元素不是说该元素的某一个点相对于参考元素定位,而是定位元素的四条边相对于参考元素的定位。(相对定位,位置改变不会影响元素大小的变化)

    如下面的例子中 left、right、top、bottom四个属性的值都是有效果的。

     h2
            {
                position:absolute;
                background-color: red;
                left:100px;
                right: 10px;
                top:150px;
                bottom: 10px;
            }
  • 相关阅读:
    List Curry
    List Polymorphic
    List Fibonacci
    搭建 docker + nginx + keepalived 实现Web应用的高可用(亲测)
    Java 大数相乘、大数相加、大数相减
    剑指offer —— 从尾到头打印链表
    剑指offer —— 替换空格
    剑指offer —— 二维数组的查找
    JDK源码 Integer.bitCount(i)
    Springboot 实现前台动态配置数据源 (修改数据源之后自动重启)
  • 原文地址:https://www.cnblogs.com/wfblog/p/8945219.html
Copyright © 2020-2023  润新知