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;
            }
  • 相关阅读:
    什么是C/S和B/S结构(二)转
    程序员的爱情独白(转)
    为什么美女喜欢软件开发的gg做老公
    C# DataGridView中 显示行号
    联想F31笔记本配置分析
    理解.NET中的数据库连接池[转]
    C#获取当前路径的方法集合
    vb6,vs2005快捷键使用,提高操作速度[转]
    Visual Studio Team System 2008 Team Suite (VSTS 2008) 简体中文正式版下载(正在下载中 60K/秒)
    一个正在项目中使用的DataInterface数据访问接口
  • 原文地址:https://www.cnblogs.com/wfblog/p/8945219.html
Copyright © 2011-2022 走看看