`
seavers
  • 浏览: 172350 次
  • 来自: ...
社区版块
存档分类
最新评论

display, position, float 之间的关系

    博客分类:
  • css
阅读更多
从 css2.1 规范中翻译而来
出处见: http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

Ps: 原文中的box未翻译, 可理解为盒模型, 或盒子

影响 产生box及布局的三个属性 - display, position, float 之间的关系如下:

  • 如果 display 的值为none, 则忽略position与float, 这种情况下, 元素不产生box
  • 如果 position 的值为 absolute 或者 fixed, 则box绝对定位, float的值设定为 none , display 的值按照下面的表格来设定. box 的定位将决定于 top, right, bottom, left 属性及box的容器
  • 如果 float 的值不是 none, 则 box 是浮动的且 display 按照下面的表格来设定
  • 如果元素是根元素, display 按下面的表格来设定, 有一个例外: 当指定的值为list-item时,将变成计算后的 block 还是 list-item, 这点没有在CSS2.1中定义   (这句话不会翻译了)
  • 剩余的 display 按照指定的方式来显示



specified value computed value
inline-table   table         
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block block
otherssame as specified
分享到:
评论

相关推荐

    浅谈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属性

    " Float与Position属性" Float 与 Position 属性是 CSS 中两个重要的概念,它们可以帮助开发者建立复杂的布局,实现多年的梦想。通过这两个属性,可以将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用...

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

    在这个场景下,`float`与`position:relative`结合使用可以达到预期的居中效果,而避免使用对这些老版本IE浏览器支持不理想的`display:inline-block`。以下我们将详细探讨这种实现方法。 首先,我们了解`float`属性...

    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浮动提示框向上滑动提示

    在网页设计中,浮动层(Float Layer)是一种常见的交互元素,用于向用户显示临时通知、提示信息或广告。本教程将详细介绍如何使用jQuery库来创建一个位于页面右下角的浮动提示框,并实现向上滑动的动画效果,类似于...

    网页的效果: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>...

    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; } #...

    css 跨浏览器实现float:center

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

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

    当为这些元素设置`float:left`属性时,它们会沿着左侧排列,但有时我们需要整个包含这些浮动元素的容器(如`<ul>`或`<div>`)保持居中对齐。本文将探讨两种实现这种居中效果的方法。 **方法一:使用`text-align:...

    css3-image-float-reversal.rar

    1. **Flexbox**:使用`display: flex;`开启一个容器,并通过`justify-content`或`align-items`属性调整子元素的对齐方式。例如,如果想要元素在容器内反向排列,可以使用`justify-content: flex-end;`(默认为`flex-...

    CSS3 display知识详解

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

    [ CSS-CSS3 ] 史上最全CSS样式一览表

    文本CSS样式(II) 背景与超链接CSS样式(III) 列表与表格CSS布局与定位盒子模型(I) overflow和border盒子模型(II) padding和marginCSS定位机制 display、float和positionCSS3CSS3(I) 圆角边框与阴影CSS3(II) 文本与...

    CSS命名规范参考及书写注意事项

    CSS书写顺序 *{ /*显示属性*/ display position float clear cursor … /*盒模型*/ margin padding width height /*排版*/ vertical-align white-space text-decoration text-align … /*文字*/ color font ...

Global site tag (gtag.js) - Google Analytics