`
zccst
  • 浏览: 3319134 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

display,position和float之间的关系

css 
阅读更多
作者:zccst

对‘display’,‘position’和‘float’之间关系的定义
英文原文:http://dbaron.org/css/test/sec0907
影响框的生成和布局的三个属性——'display','position'和'float'——间的相互关系如下:
1,如果'display'设置为'none',用户端必须忽略掉'position'和'float'。在这种情况下,元素不产生框。
2,否则,'position'设置为'absolute'或'fixed','display'设置为'block'且'float'设置为'none'。框的位置将由'top','right','bottom'和'left'属性和该框的包含块确定。
3,否则,如果'float'的值不是'none','display'设置为'block'并且该框浮动。
4,否则,应用指定的其它'display'属性。
即如果'position'设置为'absolute'或'fixed'且‘float’的值不为‘none’,display的值就会被设置为‘block’,所以设置display: inline; float: left;等同于float:left,display:inline 的属性并未生效。因为用户端会忽略掉对’display‘的设置。float:left和display:inline-block当然是不等同的。



position:absolute和float会隐式的改变display类型,
不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让元素以display:inline-block的方式显示,可以设置长宽,默认宽度并不占满父元素,就算是显示的设置display:inline或display:block,仍然无效。
float在IE6下的双倍边距bug就是利用添加display:inline来解决的
注意一点的是,position:relative并不能够隐式的改变display的类型


The three properties display, float, and position interact in certain ways.

If an element’s display property is set to none, no box is generated. In this case, float and position are ignored.

If an element’s position property is set to absolute or fixed, it’s absolutely positioned. In this case, float is ignored (the computed value is none).

For absolutely positioned elements, floated elements (elements whose float property is set to left or right), and the root element, the computed value for display is set according to Table 1.

Otherwise, the computed value for display is the same as the specified value.
分享到:
评论

相关推荐

    float与position属性

    " Float与Position属性" ...Float 和 Position 属性是 CSS 中两个非常重要的概念,它们可以帮助开发者建立复杂的布局,实现多年的梦想。但是,使用这些属性需要非常小心,因为它们可以对布局产生非常大的影响。

    浅谈CSS中display/float/position属性值的相互影响

    有3个属性和布局以及box的创建有关:’display’, ‘position’ 和 ‘float’,彼此交互作用如下: 如果’display’值为’none’,则’position’ 和 ‘float’无作用。这种情况下,不生成box。 否则,如果’...

    css(display,float,position)深入理解

    display 用来设置元素的显示方式 display : block | none | inline | inline-block inline:指定对象为内联元素 block:指定对象为块元素 inline-block:指定对象为内联块元素 none:隐藏对象 float 控制元素是否...

    如何用float配合position:relative实现居中

    总结来说,通过巧妙地结合`float`和`position:relative`,我们能够有效地解决IE6和IE7浏览器中元素居中对齐的问题,而无需使用可能导致兼容性问题的`display:inline-block`。这种方法虽然在某些情况下可能需要额外的...

    html之CSS设计(float定位和position定位详细分析)

    本文将深入探讨两种主要的定位方式:float浮动和position定位。 一、float浮动 1. **文档流**:在HTML中,元素默认按照文档流进行排列,即从左至右,从上至下。**脱离文档流**意味着元素不再遵循常规布局,而是...

    display属性.doc

    - 使用`display`属性时需要注意与`position`、`float`等其他CSS属性的配合使用。 - 在处理响应式设计时,根据屏幕尺寸动态调整元素的`display`值是一种常见的做法。 - 测试不同浏览器下的表现非常重要,因为某些旧版...

    position图片定位

    float:left;} .bg span{display:block;width:25px;height:25px;background:url(images/tu.gif) no-repeat left bottom;position:absolute;left:20px;bottom:20px;} .bg p{display:none;width:226px;height:226px;...

    jquery浮动层制作右下角float浮动提示框向上滑动提示

    这里,`display:none`用于初始时隐藏提示框,`position:fixed`确保它始终相对于浏览器窗口定位,`bottom:20px`和`right:20px`设置其在页面右下角的位置。 接下来,引入jQuery库。如果项目中尚未包含,可以在头部...

    DIV+CSS的布局元素.pdf

    本文将详细介绍其中的关键布局元素,包括position、float、display、clear和overflow等属性,以及CSS的基础知识和定位机制。 一、CSS基础知识:定位position和浮动float 1. 定位position:position属性允许我们...

    IE又一个让人吐血的BUG: 关于 table的position 和 select

    标题中的“IE又一个让人吐血的BUG: 关于 table的position 和 select”指的是在Internet Explorer(IE)浏览器中,开发者遇到的一个与HTML表格(table)的定位(position)属性和下拉选择框(select)相关的bug。...

    网页的效果:Style 中的Display用法.pdf

    网页效果的实现往往依赖于CSS(Cascading Style Sheets)中的属性设置,其中`display`属性是控制元素...在实际开发中,应结合其他CSS属性和技巧,如浮动(float)、定位(position)等,共同构建出理想的网页视觉效果。

    右下角弹出窗口 javascript

    #rbbox{position:absolute;right:0;bottom:0;width:300px;height:0px;overflow:hidden} .button{display:inline;float:right;font-size:12px;cursor:pointer} </style> <body><div id="rbbox">()">关闭</a>...

    css 跨浏览器实现float:center

    在给定的例子中,我们可以看到一个使用`position`和负偏移量来模拟`float:center`的方法。下面我们将详细解释这个方法: ```css #macji { position: relative; width: 100%; height: 80px; background-color: #...

    CSS3 display知识详解

    而当元素使用了position: absolute或fixed时,display的计算值会受到float和position属性的影响,可能会变为block或table等其他值。此外,旧版的Internet Explorer浏览器(如IE6和IE7)在处理display属性时存在限制...

    div-css-漂亮的导航条

    float:left; width:100%; background:#F4F7FB; font-size:93%; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #...

    css3-image-float-reversal.rar

    在CSS3中,我们不仅可以使用`float`属性,还可以利用其他布局技术来实现类似的效果,比如`flexbox`(弹性盒模型)和`grid`(网格布局)。这些新的布局模式提供了更强大的控制力,可以更容易地创建复杂的布局结构,...

    具有Float属性的元素依然居中

    另一种方法是为`<ul>`和`<li>`都设置`position: relative`属性。然后,我们可以利用负的`left`或`right`属性来调整元素的位置,使其居中。例如: ```css ul { position: relative; left: 50%; } li { float: ...

Global site tag (gtag.js) - Google Analytics