zoukankan      html  css  js  c++  java
  • 用css实现一个空心圆,并始终放置在浏览器窗口左下角

    用css实现一个空心圆,并始终放置在浏览器窗口左下角
            div{
                    position:fixed;
                    bottom:0;
                    left:0;
                    100px;
                    height:100px;
                    border:2px solid #000;
                    border-radius:100px;
    }
            如何让圆水平,垂直居中
            div{
                    position:fixed;
                    top:50%;
                    left:50%;
                    transform:translate(-50%,-50%);
                    100px;
                    height:100px;
                    border:2px solid #000;
                    border-radius:100px;
    }
    IE7以下不支持position:fixed;的bug

    1. 利用 Javascript 计算出需要的 top 值
    <!--[if IE lt 7]>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <![endif]-->
    在style.css样式表中针对目标定位元素样式中写入:
    position:absolute;
    top:expression(eval(document.body.scrollTop + 50));
    防止滚动条滚动时的闪动,需要定义HTMl的属性为:
    html {
        background-image: url(about: blank); /*用浏览器空白页面作为背景*/
        background-attachment: fixed; /*确保滚动条滚动时,元素不闪动*/
    }
    在 IE 中特有的 CSS 运算符 expression中我们可以利用 Javascript 计算出需要的 top 值,这样就达到了与 position: fixed 同样的效果。
    2.利用容器对溢出内容的处理方式来实现
    定义body内外边距为0,实现html和浏览器窗口相同大小,使body出现滚动条,元素相对于html相对定位。
    body { padding: 0; margin: 0; }
    html { overflow: hidden; }
    body { height: 100%; overflow: auto; }
    针对IE6定义元素属性:
    position: absolute;
    top: 50% ;
    left: 50% ;
    margin-top: -140px;
    margin-left: -168px;
    让元素固定于浏览器
    分别让元素定位于浏览器左侧、右侧、顶部、底部综合样式演示:
    position:absolute;
    bottom:auto;
    top:expression(eval(document.documentElement.scrollTop));/* IE6 头部固定 */

    position:absolute;
    right:auto;
    left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft, 10)0)-(parseInt(this.currentStyle.marginRight, 10)0));/* IE6 固定右侧 */

    position:absolute;
    bottom:auto;
    top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)0)-(parseInt(this.currentStyle.marginBottom, 10)0)));/* IE6 固定底部  */

    position:absolute;
    right:auto;
    left:expression(eval(document.documentElement.scrollLeft));/* IE6 左侧固定 */

  • 相关阅读:
    【原生】数组去重的方法
    【原生】详解Javascript中prototype属性(推荐)
    【原生】 ES5中的构造函数与 ES6 中的类 及构造函数的理解
    【react】React学习:状态(State) 和 属性(Props)
    【react】 flux 了解
    【请求数据】fetch 的get请求和post请求
    【react】 使用create-react-app创建react项目,运行npm run eject报错: 暴露webpack配置文件
    package.json 文件的介绍
    802.11协议精读1:学习资料整理(转)
    ns2之包结构解析
  • 原文地址:https://www.cnblogs.com/ricesm/p/5052308.html
Copyright © 2011-2022 走看看