zoukankan      html  css  js  c++  java
  • 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;
            }
  • 相关阅读:
    LeetCode(35):Palindrome Number 分类: leetCode 2015-07-10 09:26 161人阅读 评论(0) 收藏
    在pycharm进行单元测试(unittest python)
    Django 基本操作
    Django中数据库操作相关的错误
    Question&&Answer
    ubuntu下 SVN 服务器搭建及使用
    python 在不同层级目录import 模块的方法
    Ubuntu 16.04安装PyCharm
    修改mysql中数据库存储主路径
    查看mysql的数据库物理存放位置
  • 原文地址:https://www.cnblogs.com/wfblog/p/8945219.html
Copyright © 2011-2022 走看看