详细解决方案
说说标准——CSS核心可视化格式模型(visual formatting model)之十二
热度:3270 发布时间:2013-02-26 00:00:00
'display','position'和'float'相互关系
前面几贴,我们介绍了display,position,float,介绍了他们是如何影响框的生成和框的布局的。
那么,这几个特性之间有无制约关系呢,比如,既浮动又是绝对定位的元素,到底应当是浮动还是应当以绝对定位的方式定位呢?
带着我们的问题,请看以下3者间的关系。
标准如是说
1. 如果 'display' 的值为 'none',那么 'position' 和 'float' 不起作用。在这种情况下,元素不产生框。
因为不产生任何框,也就无所谓布局了。
2. 否则,如果 ‘position’ 的值是 'absolute' 或 'fixed',框就是绝对定位的,’float’ 计算后的值应该是 ’none’,并且,’display’ 会被按照下表设置。框的位置将由'top','right','bottom'和'left'属性和该框的包含块确定。
当元素是绝对定位时,浮动失效,display会被按规则重置。
例:
- HTML code
<script type="text/javascript"> function getStyle(obj, style) { var _style = (style == "float") ? "styleFloat" : style; return document.defaultView ? document.defaultView.getComputedStyle(obj, null).getPropertyValue(style) : obj.currentStyle[_style.replace(/-[a-z]/g, function() { return arguments[0].charAt(1).toUpperCase(); })]; } window.onload = function() { document.getElementById("info").innerHTML = "float : " + getStyle(document.getElementById("test"), "float") + "<br/>display : " + getStyle(document.getElementById("test"), "display"); }</script><div id="test" style="position:absolute; float:left;display:inline;"></div><div id="info"></div>
其他浏览器中计算后的结果是:”float : none; display : block”。
在IE里,这时候需要小心了。
3. 另外,如果'float'的值不是'none',该框浮动并且 ’display’ 会被按照下表设置。
当元素浮动时,display属性会被浏览器按照表中的规则重置。
典型的例子:
- HTML code
<script type="text/javascript"> function getStyle(obj, style) { var _style = (style == "float") ? "styleFloat" : style; return document.defaultView ? document.defaultView.getComputedStyle(obj, null).getPropertyValue(style) : obj.currentStyle[_style.replace(/-[a-z]/g, function() { return arguments[0].charAt(1).toUpperCase(); })]; } window.onload = function() { document.getElementById("info").innerHTML = "display : " + getStyle(document.getElementById("test"), "display"); }</script><span id="test" style="width:100px; height:100px; border:1px solid red; float:left;">float span</span><div id="info"></div>
IE中截图:
其他浏览器:
可见,display的值肯定发生了变化。但IE中,又没有按标准设置其值。
4. 如果元素是根元素,display的值按照下表设置。
5. 否则,应用指定的 'display' 特性值。
总结
这一节,可以说是为了调和这三种布局和框形成的关键特性之间的关系的,总的来说,可以把它看作是一个优先级类似的机制,position:absolute 和 fixed 优先级最高,有它存在的时候,浮动不起作用,display的值需要调整;其次是 浮动不是’none’的时候,调整 display 的值;最后,如果是根元素,也需要调整 display 的值;最后,非根元素,浮动,绝对定位的时候,才不需要调节display的值。
从另一个侧面也说明了一个问题,浮动或绝对定位的元素,只能是块元素或表格。
------解决方案--------------------------------------------------------
学习 学习
相关解决方案
- javaBean 跟 Model 的关系
- visual studio 2008 创设对话框类以后,在加入成员变量的时候,控件变量那部分是灰色的,无法选择控件变量,是什么原因呢
- visual studio 2008 创建对话框类以后,在加入成员变量的时候,控件变量那部分是灰色的,无法选择控件变量,是什么原因呢?该如何处理
- ARCGIS+.NET(C#)(Visual Studio 2005)+SQL2008/2005解决方法
- Visual Studio 2008代码行距设置解决方案
- 急安装[Visual.Studio.net.2005.简体中文版].rar时出现1311异常
- Visual Studio 插件Resharper 有关问题
- visual c#怎么打包成安装包。可以qq教一上吗
- visual studio 2010 中文旗舰版安装devenv.exe应用程序异常
- Visual studio的上载地址
- visual studio 2005 上载地址
- Visual Studio 2012安装后2个有关问题
- Microsoft Visual Studio 2010 有关问题
- Visual Studio 2005安装ASPAJAXExtSetup.msi 有关问题
- Visual Studio 2010如何不兼容BarCode.dll,求解
- 在 visual studio 2008中做了一个对话框,其后在创建对话框类的时候发现添加成员变量的时候,空间变量选择框变成灰色的了,无法进行选择,这是什么原因
- Visual Studio的32为版本无法调试64为进程或64为转储?解决思路
- visual studio 2012 vc++ 的webbrowser控件不可用,请教是咋回事
- 装配 Microsoft Visual C++ 2010 Express 时出错
- visual studio c++中mfc应用程序入门(望迷津)
- Visual Studio的32替版本无法调试64为进程或64为转储?
- Visual studio 2008一调试程序,自己就会死掉(界面freeze),有哪位高手知道是什么回事
- visual C++中头文件、源文件、调用函数的有关问题
- 在 visual studio 2008中做了一个对话框,然后在创建对话框类的时候发现添加成员变量的时候,空间变量选择框变成灰色的了,无法进行选择,这是什么原因,该怎么解决
- visual studio 2008 中出现的有关问题
- [!]Microsoft Visual Studio C 运行时库在 arctic.exe 中检测到一个异常
- visual studi 2005 中c++的自动补全解决思路
- visual studio 2005里vc++的设置有关问题
- Visual C++ 语法异常 : 缺少“;”
- Microsoft Visual SourceSafe 源代码管理提供程序时失败。该怎么解决