CSS定位属性之间的相互作用
2015-10-28 09:45
651 查看
0. 目录
目录引言
正文
1 DISPLAY NONE
2 POSITION ABSOLUTE OR FIXED
Float
DISPLAY
3 FLOAT LEFT OR RIGHT
DISPLAY
4 POSITION STATIC
偏移值
声明
1. 引言
原文:bitsofcode的HOW POSITIONING CSS PROPERTIES INTERACT译者:爱前端,乐分享的FedFun,前端痴王海庆的博客。
译言:来看下CSS标布局情况下,定位相关属性之间的相互作用,意译为主,不当之处敬请指正。
阅读建议5分钟。
2. 正文
在定位元素时,我们经常用到四个属性display、
position、
float和偏移属性
top right bottom left等。但不是在每个元素上都可以同时应用这四个属性,一些特殊的值组合会覆盖其他属性的应用,这些组合有:
display: none
position: absolute或
position: fixed
float: left或
float: right
position: static
接下来,我们就一起来研究这些组合之间如何相互作用。
2.1 DISPLAY: NONE
当display设置成none时,其它定位属性统统失效,因为没有产生盒模型(the box model)。
.foo { display: none; /* None of these apply,以下这些将不会应用 */ position: absolute; float: left; top: 10px; }
2.2 POSITION: ABSOLUTE (OR FIXED)
如果将position属性设置为
absolute或
fixed时,将会产生以下作用:
Float
对float属性设置的任何值都会被覆盖,
float属性的计算值(the computed value)自动设置为
none。
.foo { position: absolute; float: left; /* 被忽略, 计算值为none */ }
DISPLAY
随着display属性值的不同,计算值可能会被覆盖,如下表所示。
指定值 | 计算值 |
---|---|
inline, inline-block, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption | block |
inline-table | table |
其他值 | 跟指定值相同 |
.foo和
.bar表现上没有区别。
.foo { position: fixed; display: inline-block; /* ignored, computed value is block */ } .bar { position: fixed; display: block; }
2.3 FLOAT: LEFT (OR RIGHT)
除了上面两种情况,当我们把float属性设置为
left或
right时,相互作用如下:
DISPLAY
跟上面绝对定位、固定定位类似,元素浮动后display属性变换如上表所示。
下面代码中,
.foo和
.bar的表现效果也一样。
.foo { float: left; display: inline-block; /* ignored, computed value is block */ } .bar { float: left; display: block; }
2.4 POSITION: STATIC
除了上面的变化,当position属性值为
static时,相互作用如下:
偏移值
当元素静态定位时,偏移属性将失效,如下代码所示。.foo { position: static; top: 50px; /* does not apply */ }
3. 声明
爱前端,乐分享。前端痴王海庆的博客,希望与您共同进步。博客之星评选正在进行,投我一票,感谢您的支持。
欢迎任何形式的转载,烦请注明装载,保留本段文字。
本文原文链接http://blog.csdn.net/whqet/article/details/49464099
独立博客http://whqet.github.io
新浪微博http://weibo.com/FedFun
极客头条http://geek.csdn.net/user/publishlist/whqet
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- 不同版本IE使用不同css(css条件注释语句用法)
- css类选择器的使用方法详解
- css文本框与按钮美化效果代码
- 解决ie动态修改link样式,import css不刷新的问题