css 空心圆
用css实现一个空心圆,并始终放置在浏览器窗口左下角
div{
position:fixed;
bottom:0;
left:0;
width:100px;
height:100px;
border:2px solid #000;
border-radius:100px;
}
如何让圆水平,垂直居中
div{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width: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 左侧固定 */
最新文章
- 关于iOS和OS X废弃的API你需要知道的一切
- HTTP请求 GET POST 网络编程实现
- 使用 WordPress 插件模板开发高质量插件
- Android M新特性之Permissions
- Xcode中使用debug模式和release模式
- 网页制作技巧:iframe自适应高度
- db2常用函数(1)
- Linux编译安装Mysql步骤
- github恢复
- 支付宝app对接的坑
- Python shuffle() 函数
- vue-12-element组件库
- SpringBoot笔记十六:ElasticSearch
- leetcode — add-two-numbers
- java 中如何声明线程安全的集合 set, map 和list【转】
- L258 技术转让
- css实战——第一天
- JXL基本操作
- 安装labelImg
- Xshell记录日志的方法
热门文章
- R_Studio(学生成绩)绘制频率分布直方图、分布饼图、折线比较图
- 第七周总结&;第五次实验报告
- LeetCode 15. 三数之和(3Sum)
- 百度地图api服务端根据经纬度得到地址
- const变量的修改实践
- Emacs常用命令快速参考
- 阶段3 2.Spring_07.银行转账案例_5 编写业务层和持久层事务控制代码并配置spring的ioc
- shell命令find删除修改后带尾巴的重复的文件
- Windows系统Git Bash Sock5代理
- etcd节点扩容至两个节点